Saltar al contenido principal

React Native 0.80 - React 19.1, cambios en la API JS, congelación de la arquitectura heredada y mucho más

· 12 min de lectura
Jorge Cohen
Jorge Cohen
Engineering Manager @ Meta
Fabrizio Cucci
Fabrizio Cucci
Software Engineer @ Meta
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Software Engineer @ Expo
Christian Falch
Christian Falch
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 el lanzamiento de React Native 0.80!

Esta versión actualiza React incluido en React Native a la última versión estable disponible: 19.1.0.

También implementamos mejoras de estabilidad en nuestra API JS: las importaciones profundas ahora generarán advertencias y ofrecemos una nueva API TypeScript Estricta opcional que proporciona tipos más precisos y seguros.

Además, la Arquitectura Heredada de React Native está oficialmente congelada, y comenzarás a ver advertencias para APIs que dejarán de funcionar cuando retiremos completamente esta arquitectura.

Lo más destacado

Lo más destacado

Desaprobación de importaciones profundas en JavaScript

En esta versión, estamos tomando medidas para mejorar y estabilizar la API pública de JavaScript de React Native. El primer paso es definir mejor qué APIs pueden ser importadas por aplicaciones y frameworks. En consecuencia, estamos desaprobando formalmente las importaciones profundas en React Native (ver RFC) e implementando advertencias a través de ESLint y la consola de JavaScript.

Estas advertencias aplican a importaciones dentro del código fuente de tu proyecto, y puedes excluirte de ellas. Sin embargo, ten en cuenta que nuestro objetivo es eliminar las importaciones profundas de la API de React Native en futuras versiones, por lo que deberás actualizarlas para usar la importación raíz.

// Before - import from subpath
import {Alert} from 'react-native/Libraries/Alert/Alert';

// After - import from `react-native`
import {Alert} from 'react-native';

Algunas APIs no están exportadas en la raíz y dejarán de estar disponibles sin importaciones profundas. Esto es intencional, para reducir la superficie total de la API de React Native. Tenemos un hilo de comentarios abierto para problemas de usuarios, y trabajaremos con la comunidad para definir qué APIs exportaremos durante (al menos) las próximas dos versiones de React Native. ¡Comparte tus comentarios!

Obtén más información sobre este cambio en nuestra publicación dedicada: Hacia una API de JavaScript estable.

API TypeScript Estricta opcional

Con la redefinición de exportaciones en nuestra API pública, también incluimos en la versión 0.80 un nuevo conjunto de tipos TypeScript para el paquete react-native, que llamamos API TypeScript Estricta.

Adoptar la API TypeScript Estricta es una vista previa de nuestra futura API JavaScript estable para React Native. Estos nuevos tipos:

  1. Se generan directamente desde nuestro código fuente — mejorando cobertura y precisión, por lo que puedes esperar garantías de compatibilidad más sólidas.

  2. Están restringidos al archivo índice de React Native — definiendo más estrictamente nuestra API pública, evitando romper la API al realizar cambios internos en archivos.

Estamos lanzando estos tipos junto con nuestros tipos existentes, lo que significa que puedes elegir migrar cuando estés listo. Además, si estás utilizando las API estándar de React Native, muchas aplicaciones deberían validarse sin cambios. Recomendamos encarecidamente a los primeros adoptantes y a las aplicaciones recién creadas que opten por activarlo mediante su archivo tsconfig.json.

Cuando la comunidad esté lista, la API Estricta de TypeScript se convertirá en nuestra API predeterminada en el futuro, sincronizada con la eliminación de las importaciones profundas.

Obtén más información sobre este cambio en nuestra publicación dedicada: Hacia una API de JavaScript estable.

Congelamiento de la Arquitectura Legacy y Advertencias

La Nueva Arquitectura de React Native es la opción predeterminada desde la versión 0.76 y hemos leído historias de éxito de proyectos y herramientas que se benefician enormemente de ella.

Recientemente compartimos que ahora consideramos la Arquitectura Legacy como congelada. No desarrollaremos nuevas correcciones de errores ni características en la Arquitectura Legacy, y dejaremos de probarla durante el desarrollo de nuevas versiones.

Para facilitar la migración, seguimos permitiendo a los usuarios optar por no usar la Nueva Arquitectura si experimentan errores o regresiones.

Sin embargo, mantener dos arquitecturas en React Native representa un gran desafío, que impacta el rendimiento en tiempo de ejecución, el tamaño de la aplicación y el mantenimiento de nuestra base de código.

Por eso, eventualmente tendremos que retirar la Arquitectura Legacy en el futuro.

En la versión 0.80, hemos agregado una serie de advertencias que aparecerán en React Native DevTools para alertarte si estás usando API que no funcionarán en la Nueva Arquitectura.

Te recomendamos no ignorar estas advertencias y considerar migrar tus aplicaciones y bibliotecas a la Nueva Arquitectura para estar preparado para el futuro.

advertencias de la arquitectura legacy

Puedes aprender más sobre estos cambios en la charla "Life After Legacy: The New Architecture Future" que presentamos recientemente en App.js.

React 19.1.0

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

Puedes leer sobre todas las nuevas características y correcciones de errores introducidas en React 19.1.0 en la descripción de la versión.

advertencia

Una característica destacada de React 19.1.0 es la implementación y mejoras de las pilas de propietarios (owner stacks). Esta funcionalidad solo para desarrollo debería ayudarte a identificar qué componente es responsable de un error específico.

Sin embargo, sabemos que las pilas de propietarios no funcionan como se espera en React Native si usas el complemento de Babel @babel/plugin-transform-function-name, que está habilitado por defecto en el Preset de Babel de React Native. Enviaremos una corrección para esto en una futura versión de React Native.

Experimental: Las dependencias de React Native para iOS ahora están precompiladas

Si desarrollas una aplicación de React Native para iOS, probablemente notaste que la primera compilación nativa toma tiempo: unos minutos o incluso más en máquinas antiguas. Esto ocurre porque debemos compilar todo el código de React Native para iOS más todas sus dependencias.

Durante las últimas semanas, hemos experimentado con la precompilación de parte del núcleo de React Native para iOS, similar a lo que ocurre en Android, para reducir el tiempo de compilación inicial al ejecutar una aplicación de React Native.

React Native 0.80 es la primera versión que puede enviar parte de React Native para iOS como precompilado para ayudar a reducir los tiempos de compilación.

Durante el proceso de lanzamiento de React Native, producimos un XCFramework llamado ReactNativeDependencies.xcframework que es una versión precompilada de solo las dependencias de terceros de React Native.

Experimentamos y medimos cuánto tiempo ahorra esta precompilación inicial para iOS. En nuestras pruebas realizadas en una máquina M4, las compilaciones de iOS son aproximadamente un 12% más rápidas con la precompilación en lugar de compilar desde el código fuente.

Según nuestra experiencia, también observamos que varios informes de errores de usuarios son causados por problemas de compilación relacionados con las dependencias de terceros de React Native (ejemplo #39568). Precompilar estas dependencias nos permite construirlas por ti, evitando que enfrentes estos problemas.

Importante: no estamos precompilando todo React Native, solo las bibliotecas que Meta no controla directamente, como Folly y GLog.

En un futuro lanzamiento, también enviaremos el núcleo restante de React Native como precompilación.

Cómo utilizarlas

Esta característica sigue siendo experimental, por lo que no está activada por defecto.

Si deseas usarla, puedes instalar tus pods añadiendo la variable de entorno RCT_USE_RN_DEP:

RCT_USE_RN_DEP=1 bundle exec pod install

Alternativamente, si quieres habilitarla para todos los desarrolladores del proyecto, modifica tu Podfile así:

if linkage != nil
Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
use_frameworks! :linkage => linkage.to_sym
end

+ENV['RCT_USE_RN_DEP'] = '1'

target 'HelloWorld' do
config = use_native_modules!

Por favor, reporta cualquier problema que las precompilaciones puedan causar en tu app en esta discusión. Investigaremos cada caso para garantizar que su uso sea transparente en tu aplicación.

Otros cambios

Android: APK más pequeño gracias a IPO

Esta versión reduce significativamente el tamaño de las APK para todas las apps Android construidas con React Native. Desde la 0.80, habilitamos la Optimización Interprocedural tanto para React Native como para Hermes.

Esto representa un ahorro de ~1Mb para todas las aplicaciones Android.

Comparación de tamaño APK Android

Obtendrás esta reducción actualizando a React Native 0.80 sin cambios adicionales en tu proyecto.

Rediseño de la pantalla de nueva aplicación

Si no usas Expo sino la CLI y Plantilla Comunitaria, en esta versión trasladamos la pantalla de nueva app a su propio paquete con un rediseño visual. Esto reduce el código inicial al crear apps con la Plantilla Comunitaria y mejora la experiencia en pantallas grandes.

Rediseño de pantalla de nueva app

Aviso sobre soporte comunitario de JSC

React Native 0.80 es la última versión con soporte oficial para JSC. El soporte continuará mediante el paquete mantenido por la comunidad @react-native-community/javascriptcore.

Si te perdiste el anuncio, puedes leer más aquí

Cambios importantes

Campo "exports" añadido en el paquete principal

Como parte de los cambios para una API JavaScript estable, añadimos un campo "exports" en el package.json de react-native.

En la versión 0.80, este mapeo sigue exponiendo todas las subrutas JavaScript por defecto, por lo que no debería ser un cambio disruptivo. Sin embargo, podría afectar sutilmente cómo se resuelven los módulos dentro del paquete react-native:

  • En Metro, las extensiones específicas de plataforma no se expandirán automáticamente contra coincidencias de "exports". Hemos proporcionado varios módulos de adaptación para manejar esto (#50426).

  • En Jest, la capacidad para simular importaciones profundas podría verse afectada, lo que podría requerir actualizaciones en las pruebas.

Otros cambios importantes

Esta lista contiene otros cambios importantes que podrían tener un impacto menor en tu código de producto y vale la pena mencionar:

JS

  • Actualizamos eslint-plugin-react-hooks de v4.6.0 a v5.2.0 (ver changelog completo). Las reglas de lint react-hooks podrían generar nuevas señales de error que deberás corregir o suprimir.

Android

  • Esta versión actualiza Kotlin a la versión 2.1.20. Kotlin 2.1 introduce nuevas características de lenguaje en vista previa que puedes empezar a usar en tus módulos/componentes. Puedes leer más en las notas de lanzamiento oficiales.

  • Eliminamos la clase StandardCharsets. Estaba obsoleta desde la versión 0.73. Debes usar la clase java.nio.charset.StandardCharsets en su lugar.

  • Hicimos internas varias clases. Estas clases no son parte de la API pública y no deberían accederse. Ya notificamos o enviamos parches a las bibliotecas afectadas:

    • com.facebook.react.fabric.StateWrapperImpl
    • com.facebook.react.modules.core.ChoreographerCompat
    • com.facebook.react.modules.common.ModuleDataCleaner
  • Migramos varias clases de Java a Kotlin. Si usas estas clases, la nulabilidad y tipos de algunos parámetros cambiaron, por lo que podrías necesitar ajustar tu código:

    • Todas las clases dentro de com.facebook.react.devsupport
    • com.facebook.react.bridge.ColorPropConverter
    • com.facebook.react.views.textinput.ReactEditText
    • com.facebook.react.views.textinput.ReactTextInputManager

iOS

  • Eliminamos el campo RCTFloorPixelValue de RCTUtils.h. El método RCTFloorPixelValue no se usaba en React Native y lo removimos completamente.

Otros cambios importantes menores se listan en el CHANGELOG de la versión 0.80.

Agradecimientos

¡React Native 0.80 contiene más de 1167 commits de 127 colaboradores! Gracias por todo su arduo trabajo.

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

Además, queremos agradecer a los autores adicionales que trabajaron en documentar características en esta publicación:

  • Riccardo Cipolleschi por escribir la parte relacionada con las precompilaciones de iOS para dependencias de React Native.

  • Alex Hunt por la desaprobación de importaciones profundas, la API Estricta de TypeScript opcional y el rediseño de la pantalla de nueva aplicación.

  • Nicola Corti por la Congelación de la Arquitectura Legacy y las Advertencias.

Actualización a la versión 0.80

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

Para crear un nuevo proyecto:

Si usas Expo, React Native 0.80 estará disponible en una versión canary del SDK de Expo. Las instrucciones para usar React Native 0.80 en Expo también están disponibles en una publicación de blog dedicada.

información

La versión 0.80 es ahora la última versión estable de React Native y la 0.77.x pasa a no tener soporte. Para más información, consulta la política de soporte de React Native. Nuestro objetivo es publicar una actualización final de fin de vida para la 0.77 en un futuro próximo.