React Native: ¿Qué es y por qué usarlo?

React Native es un framework de código abierto desarrollado por Meta (Facebook) que permite crear aplicaciones móviles nativas para iOS y Android utilizando JavaScript y React. En lugar de escribir código nativo en Swift/Objective-C para iOS o Java/Kotlin para Android, puedes escribir una sola base de código que funciona en ambas plataformas.

¿Cómo funciona React Native?

A diferencia de frameworks híbridos que renderizan HTML/CSS en un WebView, React Native compila tu código JavaScript a componentes nativos reales. Tu aplicación no es una web app disfrazada, sino una aplicación nativa de verdad.

import { View, Text, Button } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>¡Hola desde React Native!</Text>
      <Button title="Presióname" onPress={() => alert('¡Funciona!')} />
    </View>
  );
}

El código anterior se traduce a:

• iOS: UIView, UILabel, UIButton (componentes nativos de UIKit)
• Android: View, TextView, Button (componentes nativos de Android)

¿Por qué usar React Native?

1. Una sola base de código

Escribe una vez, despliega en iOS y Android. Esto reduce drásticamente el tiempo de desarrollo y los costos de mantenimiento.

2. Rendimiento nativo

Como usa componentes nativos reales, el rendimiento es casi indistinguible de una app nativa escrita en Swift o Kotlin.

3. Ecosistema de React

Si ya conoces React, la curva de aprendizaje es mínima. Hooks, Context API, componentes funcionales… todo funciona igual.

import { useState, useEffect } from 'react';
import { Text } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count cambió:', count);
  }, [count]);

  return <Text onPress={() => setCount(count + 1)}>Contador: {count}</Text>;
}

4. Hot Reload

Guarda tu código y ve los cambios instantáneamente en tu dispositivo o emulador sin recompilar.

5. Acceso a APIs nativas

import { Camera } from 'expo-camera';
import * as Location from 'expo-location';
import AsyncStorage from '@react-native-async-storage/async-storage';

const { status } = await Camera.requestCameraPermissionsAsync();
const location = await Location.getCurrentPositionAsync({});
await AsyncStorage.setItem('user', JSON.stringify(userData));

¿Cuándo NO usar React Native?

React Native vs Alternativas

Expo vs React Native CLI

Expo (Recomendado para empezar)

npx create-expo-app mi-app
cd mi-app
npx expo start

Pros: Setup súper rápido, no necesitas Xcode/Android Studio inicialmente, incluye muchas APIs listas para usar.

Contras: Tamaño de app más grande, limitado a módulos nativos que Expo incluye (aunque esto ya casi no aplica con development builds).

React Native CLI

npx @react-native-community/cli@latest init MiApp
cd MiApp
npm run android  # o npm run ios

Pros: Control total, puedes agregar cualquier módulo nativo.

Contras: Requiere configurar Xcode y Android Studio, setup más complejo.

Ejemplo: App completa básica

import { useState } from 'react';
import { View, Text, TextInput, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

export default function TodoApp() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim()) {
      setTasks([...tasks, { id: Date.now(), text: task }]);
      setTask('');
    }
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter((t) => t.id !== id));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Mis Tareas</Text>
      <View style={styles.inputContainer}>
        <TextInput style={styles.input} value={task} onChangeText={setTask} placeholder="Nueva tarea..." />
        <TouchableOpacity style={styles.button} onPress={addTask}>
          <Text style={styles.buttonText}>Agregar</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.task} onPress={() => deleteTask(item.id)}>
            <Text style={styles.taskText}>{item.text}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  inputContainer: { flexDirection: 'row', marginBottom: 20 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ddd', padding: 10, borderRadius: 5 },
  button: { backgroundColor: '#007AFF', padding: 10, borderRadius: 5, marginLeft: 10 },
  buttonText: { color: '#fff', fontWeight: 'bold' },
  task: { padding: 15, backgroundColor: '#f0f0f0', borderRadius: 5, marginBottom: 10 },
  taskText: { fontSize: 16 },
});

Conclusión

React Native es una excelente opción si ya conoces JavaScript/React, quieres desarrollar para iOS y Android rápidamente y necesitas rendimiento nativo.

Empresas como Instagram, Discord, Shopify y Uber Eats usan React Native en producción con millones de usuarios.

Recursos para aprender

• Documentación oficial
• Expo Docs
• React Native Directory
• React Navigation