Saltar al contenido principal

React Native 0.82: Una nueva era

· 13 min de lectura
Vitali Zaidman
Vitali Zaidman
Software Engineer @ Meta
Nicola Corti
Nicola Corti
Software Engineer @ Meta
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Software Engineer @ Expo
Alan Hughes
Alan Hughes
Software Engineer @ Expo
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Hoy nos complace anunciar React Native 0.82: la primera versión de React Native que funciona completamente con la Nueva Arquitectura.

Esta es una versión histórica para React Native y creemos que marca el inicio de una nueva era. En futuras versiones, eliminaremos el código restante de la Arquitectura Legacy para reducir el tamaño de instalación y optimizar la base de código.

Además, la versión 0.82 incluye una opción experimental para activar una versión más reciente de Hermes llamada Hermes V1. También habilitamos varias funciones de React al actualizar a la versión 19.1.1 de React, e incluimos soporte para las APIs de nodos DOM.

Lo más destacado​

Solo Nueva Arquitectura​

En React Native 0.76 anunciamos que La Nueva Arquitectura se convirtió en la arquitectura predeterminada de React Native.

Desde entonces, la Nueva Arquitectura ha sido probada y refinada, y tenemos la confianza de convertirla en la única arquitectura para esta y futuras versiones de React Native.

Esto significa que si intentas configurar newArchEnabled=false en Android, o si intentas instalar CocoaPods con RCT_NEW_ARCH_ENABLED=0 en iOS, estas configuraciones serán ignoradas y tu aplicación seguirá ejecutándose con la Nueva Arquitectura.

Cómo migrar​

Si aún no has migrado tu proyecto a la Nueva Arquitectura, te recomendamos migrar primero a React Native 0.81 o Expo SDK 54. Estas son las últimas versiones que permiten usar la Arquitectura Legacy. Contienen advertencias y mejoras de rendimiento específicamente para ayudar en la migración a la Nueva Arquitectura.
Luego, activa la Nueva Arquitectura en la versión 0.81 y verifica que tu aplicación funcione correctamente.
Una vez que estés usando la Nueva Arquitectura en la 0.81, podrás actualizar de manera segura a React Native 0.82, que impide activar la Arquitectura Legacy.

Si una dependencia de terceros incompatible te impide migrar a la Nueva Arquitectura, te recomendamos contactar directamente a los mantenedores de la biblioteca.

Si un error en el núcleo de React Native te impide migrar, te recomendamos contactarnos a través de nuestro rastreador de problemas.

Capas de interoperabilidad y compatibilidad con bibliotecas de terceros​

Mantendremos las capas de interoperabilidad en la base de código en un futuro previsible. Todas las clases y funciones requeridas por estas capas no se eliminarán en el corto plazo. Compartiremos más actualizaciones en el futuro sobre la eliminación de las capas de interoperabilidad.

También hemos verificado que las bibliotecas de terceros que ofrecen compatibilidad con ambas arquitecturas seguirán funcionando con la 0.82, donde la Nueva Arquitectura es la única arquitectura.

Eliminación de las clases de la Arquitectura Legacy​

Para garantizar la compatibilidad con versiones anteriores y reducir los cambios importantes, no eliminaremos ninguna API de la Arquitectura Legacy del núcleo de React Native en esta versión. Eliminar la Arquitectura Legacy nos permitirá reducir significativamente el tamaño total del paquete, por lo que la eliminación está programada para comenzar a partir de la próxima versión de React Native.

Puedes encontrar más información en RFC0929: Eliminación de la Arquitectura Antigua de React Native.

Hermes V1 experimental​

React Native 0.82 agrega soporte para optar por Hermes V1.

Hermes V1 es la próxima evolución de Hermes. Hemos estado experimentando con él internamente en nuestras aplicaciones, y ahora es el momento de que la comunidad también lo pruebe. Incluye mejoras en el compilador y en la máquina virtual que potencian el rendimiento de Hermes.

Según pruebas iniciales y benchmarks, Hermes V1 supera al Hermes actual en varios escenarios. Hemos observado mejoras en la carga de bundles y en el TTI. Las mejoras dependen en gran medida de las características específicas de tus aplicaciones.

En la aplicación Expensify, una aplicación compleja del mundo real, hemos observado las siguientes mejoras:

MetricAndroid (low end device)iOS
Bundle Load Time3.2% faster9% faster
Total TTI7.6% faster2.5% faster
Content TTI7.2% faster7.5% faster

Para el TTI Total, medimos el tiempo transcurrido desde la carga del bundle hasta que la primera pantalla de la aplicación se renderiza y es interactiva.

Para el TTI de Contenido, medimos el tiempo que tarda un componente en ser interactivo, desde su primera renderización.

Hermes V1 aún no incluye la compilación JS-to-native (antes conocida como "Static Hermes") ni la compilación JIT que se presentó en React Native EU 2023. Seguimos probando estas funciones y compartiremos más avances a medida que progresemos.

Cómo habilitar Hermes V1​

información

Mientras Hermes V1 esté en fase experimental, necesitarás compilar React Native desde el código fuente para probarlo. Esta restricción se eliminará cuando Hermes V1 se incluya por defecto en futuras versiones de React Native.

Para probar Hermes V1 en tu proyecto, sigue estos pasos:

  1. Fuerza a tu gestor de paquetes a resolver la versión experimental del paquete compilador de Hermes V1 modificando la sección correspondiente en tu package.json (nota: la convención de versionado actual es solo para la fase experimental de Hermes V1):
"resolutions": {
    "hermes-compiler": "250829098.0.1"
}
  1. Habilita Hermes V1 en Android añadiendo hermesV1Enabled=true en android/gradle.properties:
android/gradle.properties
hermesV1Enabled=true

Además, configura React Native para compilar desde el código fuente editando android/settings.gradle:

android/settings.gradle
  includeBuild('../node_modules/react-native') {
      dependencySubstitution {
          substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
          substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
          substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
      }
  }
  1. Habilita Hermes V1 en iOS instalando los pods con la variable de entorno RCT_HERMES_V1_ENABLED=1:
RCT_HERMES_V1_ENABLED=1 bundle exec pod install

Ten en cuenta que Hermes V1 no es compatible con compilaciones precompiladas de React Native, así que asegúrate de no usar la bandera RCT_USE_PREBUILT_RNCORE al instalar pods.

  1. Para confirmar si tu aplicación ejecuta Hermes V1, ejecuta este código en la consola de tu app o DevTools. Devolverá la versión de Hermes, que debe coincidir con la especificada en el paso 1 (250829098.0.1):
// expecting "250829098.0.1" in Hermes V1
HermesInternal.getRuntimeProperties()['OSS Release Version'];

React 19.1.1​

Esta versión de React Native incluye la última versión estable de React: React 19.1.1.

Esta versión de React incluye soporte completo para las pilas de propietario (owner stacks) en React Native. Anteriormente, en React Native 0.80, cuando añadimos soporte para 19.1.0, mencionamos que las pilas de propietario no tenían soporte completo si usabas el plugin de Babel @babel/plugin-transform-function-name. Esta versión elimina esa restricción y habilita las pilas de propietario para todos los usuarios de React Native.

BEFOREAFTER
Example error thrown without Owner Stacks
Example error thrown with Owner Stacks

React 19.1.1 también mejora la fiabilidad de useDeferredValue y startTransition dentro de un límite de Suspense en React Native. Estas son características esenciales de React, diseñadas para mejorar la capacidad de respuesta de las aplicaciones. Anteriormente, ambas mostraban incorrectamente el componente de reserva cuando se usaban con un límite de Suspense en React Native. Con React 19.1.1, ahora funcionan consistentemente como se espera en React Native, alineando su comportamiento con el de la Web.

APIs de nodos DOM​

A partir de React Native 0.82, los componentes nativos proporcionarán nodos similares a los del DOM mediante las referencias (refs).

Anteriormente, los componentes nativos proporcionaban objetos específicos de React Native con solo un puñado de métodos como measure y setNativeProps. Tras este lanzamiento, proporcionarán nodos que implementan un subconjunto de la API DOM para recorrer el árbol de la UI, medir el diseño y más, como en la Web. Por ejemplo:

function MyComponent(props) {
  const ref = useRef();

  useEffect(() => {
    const element = ref.current;

    // New methods
    element.parentNode;
    element.parentElement;
    element.childNodes;
    element.children;
    const bounds = element.getBoundingClientRect();
    const doc = element.ownerDocument;
    const maybeElement = doc.getElementById('some-view');

    // Legacy methods are still available
    element.measure((x, y, width, height, pageX, pageY) => {
      /* ... */
    });
  }, []);

  return <View ref={ref} />;
}

Además, esto expondrá el acceso a nodos de texto hoja (creados por el componente Text) y nodos de documento que representan los nodos raíz de React Native.

Este es un cambio compatible con versiones anteriores, ya que los nuevos nodos seguirán implementando los métodos heredados (como measure).

Para más información, consulta nuestra documentación.

Otros cambios​

APIs de rendimiento web (Canary)​

React Native ahora implementa un subconjunto de las APIs de rendimiento disponibles en la Web:

  • High Resolution Time: define performance.now() y performance.timeOrigin.

  • Performance Timeline: define PerformanceObserver y métodos para acceder a entradas de rendimiento en el objeto performance (getEntries(), getEntriesByType(), getEntriesByName()).

  • User Timing: define performance.mark y performance.measure.

  • Event Timing API: define tipos de entrada event reportados a PerformanceObserver.

  • Long Tasks API: define tipos de entrada longtask reportados a PerformanceObserver.

Permiten rastrear diferentes aspectos del rendimiento de tu aplicación en tiempo de ejecución (para telemetría) y serán visibles en el panel de rendimiento de React Native DevTools (disponible en una futura versión de React Native).

Actualmente están disponibles solo en el nivel de lanzamiento canary, y se lanzarán como estables en una futura versión de React Native.

Tipo de compilación de depuración optimizada para Android​

A partir de React Native 0.82, podrás usar el tipo de compilación debugOptimized para acelerar tu experiencia de desarrollo.

Históricamente, Android crea dos variantes de compilación predeterminadas:

  • debug, usado por defecto durante el desarrollo y que te permite conectarte a varias herramientas de depuración como React Native DevTools, Metro, el depurador de Android JVM y C++

  • release, usado al publicar tu aplicación en producción. Está completamente optimizada, con ofuscación y optimizaciones que dificultarán la depuración.

Dado que la mayoría de desarrolladores de React Native no necesitarán usar el depurador de C++ durante el desarrollo, presentamos el tipo de compilación debugOptimized.

Con debugOptimized, tus animaciones y repintados serán más rápidos porque estás ejecutando una compilación de React Native con varias optimizaciones de C++ habilitadas. Al mismo tiempo, aún podrás usar React Native DevTools para depurar tu código JavaScript.

Cuando utilices debugOptimized, no podrás usar los depuradores nativos de C++, pero sí podrás usarlos si utilizas el tipo de compilación debug.

Para ejecutar la variante debugOptimized en tu aplicación, puedes invocar:

npx react-native run-android --mode debugOptimized
información

El tipo de compilación debugOptimized también se ha retroportado a React Native 0.81 y Expo SDK 54.

Puedes ver debugOptimized en acción en estas muestras donde estamos renderizando varias animaciones en pantallas.

La compilación que ejecuta debug funciona a ~20 FPS, mientras que la que usa debugOptimized funciona a ~60 FPS:

debugdebugOptimized
Example build running with debugExample build running with debugOptimized

Cambios importantes​

Los rechazos de promesas no capturados ahora generarán console.error​

Siguiendo la mejora en la notificación de errores de JavaScript no capturados de la versión anterior, ahora también notificaremos los rechazos de promesas no capturados mediante ese mecanismo:

Ejemplo de un rechazo de promesa notificado en la consola

Debido a un error, estos rechazos se ignoraban por completo anteriormente, así que espera que algunos errores preexistentes aparezcan después de actualizar a React Native 0.81. Por ese motivo, errores preexistentes también podrían aparecer en los informes de errores de JavaScript enviados a tu backend, provocando un aumento en nuevos reportes.

Otros cambios importantes​

General​

  • Se ha movido ReactNativeFeatureFlags a src/private

    • En general, no deberías depender de ReactNativeFeatureFlags ya que es una API privada.

  • El tipo de Appearance.setColorScheme() se ha actualizado para que ya no acepte valores nulos

    • Usa 'unspecified' en lugar de null/undefined en casos excepcionales donde sea necesario restablecer el esquema de color.

iOS​

  • Se ha migrado RCTDisplayLink fuera de la API heredada RCTModuleData ya que planeamos eliminarla en el futuro.

Android​

  • Se ha eliminado la clase com.facebook.react.bridge.JSONArguments porque accidentalmente era public

  • Se marca como obsoleto MessageQueueThreadPerfStats

    • Hemos marcado esta API como obsoleta y la reemplazamos con un stub. Ya no deberías confiar en sus estadísticas ya que no eran fiables.

  • Se actualiza Gradle de 8.x a 9.0.0

    • La lista completa de cambios en esta versión estable mayor está disponible aquí, pero no esperamos ningún impacto para los usuarios.

C++​

  • Se eliminan las cabeceras de compatibilidad para CallbackWrapper.h / LongLivedObject.h
    • Las inclusiones correctas son #include <react/bridging/LongLivedObject.h> y #include <react/bridging/CallbackWrapper.h>.
    • No deberías usar las inclusiones antiguas bajo #import <ReactCommon/….h>

Consulta la lista completa de cambios importantes en el CHANGELOG de la versión 0.82.

Agradecimientos​

¡React Native 0.82 contiene más de 868 commits de 93 colaboradores! Gracias por todo vuestro esfuerzo.

Queremos agradecer especialmente a estos miembros de la comunidad que realizaron contribuciones significativas en esta versión:

Actualización a la versión 0.82​

Para proyectos existentes, utiliza el React Native Upgrade Helper para ver los cambios de código entre versiones de React Native, además de la documentación de actualización.

Para crear un nuevo proyecto:

npx @react-native-community/cli@latest init MyProject --version latest

Si utilizas Expo, React Native 0.82 estará disponible en las versiones expo@canary.

El próximo SDK, SDK 55, se lanzará con la próxima versión estable de React Native: 0.83.

información

0.82 es ahora la última versión estable de React Native, mientras que 0.79.x pasa a ser incompatible. Para más detalles, consulta la política de soporte de React Native.