React Native en el desarrollo móvil: qué es, conceptos clave y cómo funciona

Fundamentos (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — extensión sintáctica de JavaScript para describir UI. Se parece a HTML pero funciona mediante React.createElement(). Expresiones JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — función que devuelve JSX. Acepta props como argumento. Estándar moderno de React (antes de React 16.8 se usaban Class Components). Hooks — funciones para acceder al estado y ciclo de vida desde Functional Component. Reglas de Hooks: solo en el nivel superior, solo en Functional Components.

Referencia de Hooks

useState — estado local. useEffect — efectos secundarios. useContext — acceso a Context. useRef — ref mutable. useCallback — memorización de función. useMemo — memorización de valor. Custom Hooks — lógica reutilizable: function useDebounce(value, delay).

// Functional Component con hooks en React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — devuelve [value, setValue]. setValue — reemplaza (no fusiona como setState en Class). Para objetos: setUser(prev => ({ ...prev, name: 'New' })). useEffect — se ejecuta después del renderizado. Array de dependencias: [] — una vez (montaje), [dep] — cuando dep cambia, undefined — cada renderizado. Función de limpieza — return () => {}. useContext — const value = useContext(MyContext). Requiere Context.Provider más arriba en el árbol.

useRef — objeto mutable que persiste el valor entre renderizados. .current — mutación. Se usa para: acceso a elementos nativos (ref={inputRef}), almacenar valores anteriores, temporizadores. useCallback — devuelve una función memoizada. const handlePress = useCallback(() => {}, [dep]). useMemo — devuelve un valor memoizado. const sorted = useMemo(() => data.sort(), [data]). Use useMemo para cálculos costosos.

useState — para estado simple. useEffect — para llamadas API y suscripciones. useCallback/useMemo — para optimización. IT Sectr recomienda no memoizar todo — solo cuando haya problemas reales de rendimiento.

Custom Hooks

Custom Hook — función que usa hooks incorporados. Nombre empieza con use*. Ejemplos: useDebounce, useNetworkStatus, useAppState, useKeyboard. Los Custom Hooks son la forma principal de reutilizar lógica en React Native. IT Sectr recomienda extraer la lógica de negocio en Custom Hooks y mantener los componentes limpios (solo JSX + estilos).

Componentes (View, Text, FlatList, ScrollView, SafeAreaView)

View — contenedor básico (análogo a div). Text — texto (único componente para texto). TextInput — entrada de texto. ScrollView — contenedor desplazable. FlatList — lista virtualizada para grandes datos. SectionList — FlatList con secciones. SafeAreaView — relleno automático de Safe Area (notch, barra de estado). Pressable — reemplazo moderno de TouchableOpacity. useColorScheme — detección de tema oscuro/claro.

Optimización de FlatList

FlatList — virtualización: solo se renderizan los elementos visibles + windowSize. Optimización: 1) keyExtractor — clave única, 2) getItemLayout — altura fija (omite medición onLayout), 3) React.memo para renderItem, 4) maxToRenderPerBatch (predeterminado 10), 5) windowSize (predeterminado 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navegación en React Native

React Navigation — pila de navegación estándar. NativeStackNavigator — animación nativa (push/pop). TabNavigator — pestañas inferiores. DrawerNavigator — menú lateral. NavigationContainer — componente raíz de navegación. Deep linking — configuración de enlaces para enlaces externos. Flujo de autenticación — navegación condicional: isAuth ? AppStack : AuthStack. IT Sectr recomienda NativeStackNavigator para pantallas principales y TabNavigator para navegación de primer nivel.

Estilos (StyleSheet)

StyleSheet.create() — creación de estilos. Todas las propiedades en camelCase: backgroundColor, fontSize, marginTop. Flexbox — modelo de diseño predeterminado (flexDirection: 'column'). Sin cascada CSS, sin herencia, sin selectores. Inline styles — funcionan pero no se recomiendan. StyleSheet.compose() — combinación de estilos. Platform.select — estilos por plataforma: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — gestión de insets de safe area.

Styled Components y CSS-in-JS

Styled Components — librería para CSS-in-JS en React Native. Restyle — tematización + estilos responsive. NativeWind — Tailwind CSS para React Native. Unistyles — estilos rápidos con CSS atómico. Modo oscuro — useColorScheme + estilos dinámicos. IT Sectr recomienda StyleSheet.create por simplicidad y NativeWind para proyectos con sistema de diseño.

Animación (Animated API)

Animated API — animación declarativa. Animated.Value — valor de animación. Animated.timing — animación simple. Animated.spring — animación con resorte. Animated.View — View animable. useNativeDriver — animación en el hilo nativo (transform, opacity — soportados). Animated.loop — animación en bucle. LayoutAnimation — animación automática al cambiar layout. reanimated 2/3 (librería) — alternativa más eficiente. Metro Bundler — empaquetador JavaScript. Empaqueta JS + assets en un bundle. Soporta Fast Refresh (Hot Reload). Hermes — motor JS optimizado para móviles: inicio rápido, menos memoria. Predeterminado desde RN 0.70+.

Gesture Handler y Animaciones

React Native Gesture Handler — procesamiento nativo de gestos. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API declarativa de gestos. Reanimated + Gesture Handler — combinación para animaciones a 60fps con gestos. react-native-skia — renderizado GPU para gráficos 2D complejos. IT Sectr recomienda Reanimated 3 para todas las animaciones más eficientes que Animated API.

Redes (fetch, AsyncStorage, API)

fetch — cliente HTTP incorporado. Soporta GET, POST, headers, body. Axios — librería popular con interceptores. AsyncStorage — almacenamiento clave-valor (similar a UserDefaults). MMKV — alternativa rápida a AsyncStorage de WeChat. react-native-keychain — almacenamiento seguro de tokens. React Query (TanStack Query) — gestión de estado del servidor: caché, revalidación, paginación. IT Sectr recomienda React Query para peticiones API y MMKV para almacenamiento local.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules y Turbo Modules

Native Module — puente entre JS y código nativo (Java/Kotlin para Android, ObjC/Swift para iOS). Permite llamar APIs nativas desde JS. Turbo Modules (New Architecture) — reemplazo de los antiguos Native Modules. Llamada síncrona, tipado mediante Codegen, menos overhead. Fabric Renderer — nuevo renderizador con layout síncrono. JSI (JavaScript Interface) — acceso directo de JS a objetos nativos sin puente. IT Sectr recomienda Turbo Modules para proyectos nuevos y Native Modules para los existentes.

// Módulo nativo de Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Pruebas (Jest, React Native Testing Library)

Jest — ejecutor de pruebas estándar. describe/it/expect. React Native Testing Library — pruebas de componentes. render, fireEvent, waitFor. screen.getByText, getByTestId — búsqueda. userEvent — simulación de acciones. Pruebas Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — simulación de API. Detox — pruebas E2E para RN (grey-box, nativas). IT Sectr recomienda React Native Testing Library para componentes y Detox para escenarios integrales.

CodePush (App Center) — actualizaciones OTA del bundle JS sin publicar en App Store/Google Play. Se usa para: parches urgentes, pruebas A/B, cambios de contenido. Limitaciones: no puede cambiar código nativo. Alternativas: EAS Update (Expo), react-native-update. IT Sectr recomienda CodePush para correcciones urgentes y EAS Update para proyectos Expo.

Expo — framework para React Native. Managed workflow — todas las configuraciones mediante app.json. Development builds — módulos nativos personalizados sin eject. Expo SDK — módulos incorporados: cámara, biometría, notificaciones. EAS Build — compilación en la nube. Expo Router — enrutamiento basado en archivos (similar a Next.js). IT Sectr recomienda Expo para proyectos nuevos y bare RN para proyectos con personalización nativa profunda.