React Native: qué es, cómo funciona el Bridge y el entorno JavaScript

Qué es React Native

React Native es un framework creado por el equipo de Facebook (ahora Meta) y lanzado como código abierto en 2015. A diferencia de los enfoques híbridos (Cordova, Ionic), React Native no utiliza WebView. En su lugar, los componentes JavaScript se asignan a elementos nativos de la UI: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

La primera versión de React Native solo era compatible con iOS. El soporte para Android llegó en 2016. La versión 0.60 (2019) introdujo Autolinking — enlace automático de dependencias nativas. React Native 0.68 (2022) incluyó la nueva arquitectura Fabric + TurboModules. La versión estable actual 0.74 (2024) está completamente migrada a New Architecture con soporte de Yoga 3.0 para maquetación Flexbox.

Según Statista 2024, React Native se utiliza en el 38% de los proyectos multiplataforma. El framework es usado por Discord, Instagram, Shopify, Pinterest, Skype y Uber Eats. Meta utiliza React Native en Facebook e Instagram — la aplicación móvil principal con 2 mil millones de usuarios.

Historia y evolución de React Native

React Native fue anunciado en la React.js Conf de enero de 2015. La idea era trasladar el paradigma declarativo de React de la web a las plataformas móviles. El primer commit en el repositorio apareció en 2013 como un proyecto interno de Facebook para crear la aplicación Facebook Groups en iOS.

La versión 0.70 (2022) presentó Hermes como motor JavaScript predeterminado. Hermes es un motor con compilación anticipada (AOT) optimizado para dispositivos móviles. Reduce el tiempo de inicio de la aplicación en un 50% y disminuye el tamaño del APK en un 30% en comparación con JavaScriptCore. Hermes es compatible con ES6 y parcialmente con ES2020.

Diferencia entre React Native y React Web

React Web renderiza componentes en elementos DOM (div, span, p) a través de ReactDOM. React Native renderiza en componentes nativos de la plataforma. En lugar de <div> se usa <View>, en lugar de <span> — <Text>. Los estilos se definen mediante StyleSheet.create(), que se traduce a propiedades CSS de la plataforma. Flexbox está incluido por defecto a través del motor Yoga.

La navegación en React Native difiere de la web. En lugar de react-router-dom se usa React Navigation — una biblioteca nativa compatible con navegadores Stack, Tab y Drawer. React Navigation 6.x utiliza animaciones nativas (useNativeDriver) e integración con Deep Links. Para la navegación nativa por pantallas con UINavigationController de iOS y Fragment de Android se utiliza la biblioteca react-native-navigation de Wix.

Arquitectura de React Native

La arquitectura de React Native tradicionalmente se basaba en Bridge — un canal JSON asíncrono entre el entorno JavaScript y el código nativo. Desde la versión 0.68, Meta presentó New Architecture, que reemplaza Bridge por JSI (JavaScript Interface) y Fabric. Analicemos ambos modelos.

Bridge y Fabric

Bridge es un protocolo JSON serializado que funciona en varios hilos: JS Thread (interpretación del código React), Main Thread (UI) y Native Modules Thread (API). Cada interacción entre JS y el código nativo pasa por serialización y deserialización de objetos, lo que genera retrasos en llamadas frecuentes. Al desplazar una lista de 1000 elementos, Bridge genera hasta 10 000 mensajes JSON por segundo.

Fabric es un nuevo sistema de renderizado en React Native. En lugar de Bridge, Fabric utiliza un Shadow Tree en C++ que se sincroniza con el hilo de UI a través de JSI. Esto elimina la serialización JSON: el código nativo en C++ llama directamente a funciones en el entorno JavaScript y viceversa. Fabric reduce la latencia de renderizado de 16 ms (Bridge) a 2–4 ms.

TurboModules es la segunda parte de New Architecture. En el modelo antiguo, todos los módulos nativos se cargaban al iniciar la aplicación. TurboModules carga los módulos de forma diferida (lazy loading) — solo cuando el código JS los solicita por primera vez. Esto reduce el tiempo de inicio en frío en un 40% en aplicaciones con 20+ módulos nativos.

Ejemplo de aplicación en React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Módulos nativos

Los módulos nativos son un mecanismo para llamar a las API de plataforma desde JavaScript. Si la funcionalidad no está cubierta por los componentes estándar de React Native (cámara, Bluetooth, biometría), el desarrollador escribe un módulo en Swift/Kotlin y lo registra a través de RCTBridgeModule o TurboModule. La función nativa se llama desde JS mediante NativeModules.CameraModule.takePhoto().

React Native proporciona módulos nativos listos para acceder al acelerómetro (react-native-sensors), geolocalización (@react-native-community/geolocation), biometría (react-native-biometrics) y notificaciones locales (@notifee/react-native). Para escenarios personalizados, Expo ofrece Expo Modules API — una interfaz más simple para crear módulos nativos sin Xcode ni Android Studio.

Ventajas de React Native

Comunidad masiva — React Native tiene la comunidad más grande entre los frameworks multiplataforma. En GitHub, el proyecto tiene 117 000+ estrellas y 1800+ contribuidores. npm descarga react-native 3 millones+ de veces por semana. Las preguntas sobre React Native representan el 5% de todas las preguntas en Stack Overflow en la sección de desarrollo móvil.

Ecosistema JavaScript — los desarrolladores de React usan las mismas herramientas que en la web: npm, Babel, ESLint, Prettier, Jest, TypeScript. La lógica de negocio se puede reutilizar entre la versión web (React) y la aplicación móvil (React Native). Las bibliotecas Redux, Zustand, React Query y React Hook Form funcionan en ambas plataformas sin cambios.

Expo es un SDK y conjunto de herramientas que simplifica el desarrollo en React Native. Expo proporciona módulos listos (cámara, notificaciones, mapas, OAuth), compilaciones en la nube (EAS Build) y actualizaciones OTA (EAS Update). Expo Go permite ejecutar la aplicación en un dispositivo físico sin Xcode ni Android Studio. Según datos de Expo 2024, el 70% de los nuevos proyectos de React Native usan Expo.

Actualizaciones OTA — una función disponible a través de Expo Update y CodePush (Microsoft). Los desarrolladores pueden enviar actualizaciones del bundle de JavaScript directamente a los usuarios sin pasar por la revisión de App Store o Google Play. Esto acelera la corrección de errores críticos de 2–5 días (espera de revisión) a 1–2 horas.

Soporte de TypeScript incluido por defecto desde React Native 0.71. La plantilla del proyecto incluye tsconfig.json, tipos para todos los componentes y soporte de modo estricto. Flow (tipado estático de Facebook) también es compatible, pero Meta recomienda oficialmente TypeScript. La plantilla TypeScript representa el 85% de los nuevos proyectos según la encuesta State of React Native 2024.

Ecosistema y bibliotecas populares

npm es el registro principal de paquetes para React Native. La búsqueda de bibliotecas se filtra por la palabra clave react-native. Para la instalación se usa npm install o yarn add. React Native CLI enlaza automáticamente las dependencias nativas (desde la versión 0.60). Para proyectos Expo, la instalación se gestiona mediante expo install, que selecciona la versión compatible de la biblioteca.

Bibliotecas clave

@react-navigation/native — el estándar de facto para la navegación en React Native. La biblioteca incluye Stack Navigator (transiciones animadas), Tab Navigator (menú inferior para iOS/Android), Drawer Navigator (menú lateral) y Material Top Tab. React Navigation 7.x (2024) introdujo configuración estática de rutas y soporte completo de React 18 con useSyncExternalStore.

react-native-reanimated — una biblioteca para animaciones de alto rendimiento. Reanimated 3.x ejecuta animaciones en el hilo de UI (worklet), sin pasar por el hilo JS. Esto garantiza 60 FPS incluso al animar 100+ elementos. useSharedValue, useAnimatedStyle y withSpring reemplazan la API Animated del paquete estándar. Reanimated maneja gestos táctiles a través de react-native-gesture-handler.

@tanstack/react-query — una biblioteca para la gestión del estado del servidor. React Query almacena en caché las respuestas de la API, vuelve a solicitar datos automáticamente al cambiar de red (refetchOnReconnect) y admite paginación con useInfiniteQuery. La versión 5.x incluye actualizaciones optimistas para la UX — la interfaz se actualiza antes de recibir la respuesta del servidor y luego se ajusta.