React Native 0.78: React 19 y más

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.78!

Esta versión incluye React 19 en React Native y otras características relevantes como soporte nativo para drawables vectoriales de Android y una mejor integración brownfield para iOS.

Lo más destacado

• React 19

• Hacia lanzamientos más pequeños y rápidos

• Opción para activar registros JavaScript en Metro

• Soporte añadido para drawables XML de Android

• ReactNativeFactory en iOS

Lo más destacado

React 19

¡React 19 ya está disponible en React Native!

React 19 requiere actualizar tu aplicación, ya que introdujimos cambios respecto a React 18. Por ejemplo, eliminamos algunas APIs como propTypes, y necesitas ajustar tu app para hacerla compatible con la nueva versión de React.

Sigue nuestras instrucciones paso a paso para actualizar tu aplicación a React 19.

Tras la migración, podrás aprovechar todas las nuevas funcionalidades de React, incluyendo (entre otras):

• Actions: funciones que utilizan transiciones asíncronas. Estas transiciones gestionan automáticamente el envío de datos: manejan estados pendientes, actualizaciones optimistas, gestión de errores y más.

• useActionState: hook de utilidad basado en Actions. Toma una función y devuelve una Action encapsulada para invocar. Cuando se llama la acción, devuelve el último resultado y su estado pending.

• useOptimistic: nuevo hook que simplifica mostrar el estado final de una actualización de forma optimista mientras la solicitud asíncrona está en curso. Si falla, React revertirá automáticamente al valor anterior.

• use: nueva API que permite acceder a recursos durante el renderizado. Ahora puedes leer promesas o contextos con use, y React se suspenderá hasta que se resuelvan.

• ref como props: ahora puedes pasar ref como prop igual que cualquier otra. Los componentes funcionales ya no necesitarán forwardRef y puedes migrar tus componentes ahora.

• Y muchas otras

Para la lista completa de nuevas funcionalidades, consulta la publicación del blog de lanzamiento de React 19.

React Compiler

React Compiler es una herramienta de tiempo de compilación diseñada para optimizar aplicaciones React aplicando automáticamente memoización. Aunque los desarrolladores pueden usar manualmente APIs como useMemo, useCallback y React.memo para evitar recomputaciones innecesarias de partes inalteradas de una app, también podrían olvidar o usar mal estas optimizaciones. React Compiler aborda esto aprovechando su comprensión de JavaScript y las Reglas de React para memorizar automáticamente valores o grupos de valores dentro de componentes y hooks.

Con esta versión, simplificamos el proceso para habilitar React Compiler en tus apps de React Native. En versiones anteriores, debías instalar dos paquetes: el compilador y su runtime. Tras instalar esos paquetes, debías configurar un plugin de Babel para habilitar React Compiler mediante Metro.

Ahora solo necesitas instalar el compilador en sí y configurar el plugin de Babel. Para aprender cómo habilitarlo, sigue nuestra guía paso a paso.

Para verificar que el compilador está funcionando, abre React Native DevTools: deberías ver que los componentes memorizados tienen la etiqueta Memo ✨ adjunta en el Inspector de Componentes.

Si quieres aprender más sobre React Compiler, estos recursos son útiles:

• Documentación de React Compiler

• Análisis profundo de React Compiler

Hacia lanzamientos más pequeños y rápidos

Estamos actualizando nuestro proceso de lanzamiento para publicar versiones estables de React Native con mayor frecuencia en 2025.

Será más fácil actualizar tu versión de React Native porque reduciremos la cantidad de cambios rompedores. Los lanzamientos más rápidos también significan que las correcciones de errores internas llegarán antes a ti, y podrás beneficiarte de las últimas características desarrolladas en React Native.

Creemos que este nuevo modelo beneficiará a cada desarrollador en el ecosistema React Native, ya que menos cambios rompedores significan un framework más estable en el que todos pueden confiar.

Opción de activar registros JavaScript en Metro

Hemos añadido una opción para restaurar la transmisión de registros JavaScript mediante el servidor de desarrollo Metro, eliminada previamente en 0.77 para usuarios de Community CLI. Esto responde a comentarios de usuarios y a nuestra evaluación actual de las alternativas disponibles.

Para activarlo, usa la nueva bandera --client-logs. Esto también puede configurarse como alias mediante un script npm para mayor comodidad.

npx @react-native-community/cli start --client-logs

La transmisión de registros en Metro seguirá desapareciendo en el futuro y permanece desactivada por defecto. Sin embargo, daremos a los desarrolladores un período de migración más extenso para adaptarse a este cambio.

Esta actualización también estará disponible en la próxima versión menor 0.77.1.

Añadido soporte para drawables XML en Android

En React Native 0.78, implementamos una nueva forma de cargar iconos, ilustraciones y otros elementos gráficos en Android como recursos XML. Esto significa que puedes usar drawables vectoriales para mostrar imágenes vectoriales a cualquier escala sin perder calidad, o drawables de formas para dibujar elementos decorativos básicos. Todo esto es soportado por el mismo componente Image que conoces. Para usar esta función, importa recursos XML como cualquier otro recurso estático referenciándolos en la prop source. Además, usar recursos XML en lugar de bitmaps ayudará a reducir el tamaño de tu aplicación y mejorará el renderizado en pantallas con distintos DPI.

// via require
<Image
  source={require('./img/my_icon.xml')}
  style={{width: 40, height: 40}}
/>;

// or via import
import MyIcon from './img/my_icon.xml';
<Image source={MyIcon} style={{width: 40, height: 40}} />;

Rendimiento y calidad

Al igual que otros tipos de imágenes, los recursos XML de Android se cargan y procesan fuera del hilo principal para evitar pérdida de cuadros. Esto significa que no se garantiza que el recurso se muestre instantáneamente, pero tampoco bloquea la interacción del usuario durante la carga. La decodificación fuera del hilo es especialmente importante al renderizar múltiples iconos simultáneamente. Aplicaciones internas observaron mejoras significativas de rendimiento al usar vector drawables de Android.

Utilizar recursos como vector drawables es la forma ideal de mostrar imágenes sin pérdida de calidad, además de generar archivos APK más pequeños al evitar múltiples versiones para cada densidad de pantalla. Adicionalmente, los vector drawables se copian desde memoria una vez cargados, por lo que si renderizas el mismo icono varias veces, todas las instancias aparecerán simultáneamente.

Contrapartidas

Es importante considerar que los recursos XML drawable no son perfectos y tienen limitaciones:

• Deben referenciarse durante la compilación de tu aplicación Android. Estos recursos pasan por Android Asset Packaging Tool (AAPT) para convertir XML crudo en XML binario. Android no admite cargar archivos XML sin procesar, una limitación conocida.

• No pueden cargarse por red mediante Metro. Si cambias la ubicación o nombre de un recurso XML, deberás recompilar tu aplicación Android cada vez.

• Carecen de dimensiones intrínsecas. Por defecto se mostrarán con tamaño 0x0 y deberás especificar ancho y alto manualmente.

• No son completamente personalizables en tiempo de ejecución; solo puedes controlar dimensiones o color global, pero no atributos individuales dentro del recurso como anchos de trazo, bordes redondeados o colores específicos. Estas personalizaciones requieren variantes distintas del recurso XML.

información

Los vector drawables de Android no son reemplazo directo de librerías como react-native-svg. Están diseñados específicamente para Android y no funcionan en iOS. Si necesitas SVG idénticos en todas las plataformas, deberás seguir usando react-native-svg. Los vector drawables ofrecen beneficios de rendimiento a costa de personalización.

ReactNativeFactory en iOS

En React Native 0.78 mejoramos la integración con iOS.

Esta versión introduce la clase RCTReactNativeFactory, que permite crear instancias de React Native sin necesidad de un AppDelegate. Esto facilita integrar React Native en ViewControllers, simplificando drásticamente la integración con aplicaciones Brownfield.

Imagina que quieres mostrar una vista de React Native en un ViewController. Tras instalar las dependencias como en esta guía, solo debes añadir este código:

+import React
+import React_RCTAppDelegate

public class ViewController {

+  var reactNativeFactory: RCTReactNativeFactory?
+  var reactNativeDelegate: ReactNativeDelegate?

  public func viewdidLoad() {
    super.viewDidLoad()
    // …
+ reactNativeDelegate = ReactNativeDelegate()
+ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeDelegate!)
+ view = reactNativeFactory.rootViewFactory.view(withModuleName: "<your module name>")
  }

}

+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {

+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    self.bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+    #if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+    #else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+    #endif
+  }
+}

React Native se cargará en el ViewController al navegar a él.

Este código crea un RCTReactNativeFactory, asigna un delegado y solicita crear un rootView para la vista de React Native.

El delegado (definido abajo) sobrescribe las propiedades sourceURL y bundleURL para indicar dónde encontrar el bundle JS a cargar.

Otros cambios importantes

General

• React Native DevTools

  • Se eliminó el dominio CDP FuseboxClient

• Codegen

  • Tipos de arrays de componentes y comandos separados

Android

• Cambios de nulabilidad: la migración de RootView a Kotlin modificó tipos de parámetros de nulables a no nulables.

• Las siguientes clases se han movido de públicas a internas, o se han eliminado, y ya no son accesibles:

  • com.facebook.react.bridge.GuardedResultAsyncTask
  • com.facebook.react.uimanager.ComponentNameResolver
  • com.facebook.react.uimanager.FabricViewStateManager
  • com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager

iOS

• Cambiar la información de tamaño en eventos de carga de imágenes de tamaño lógico a píxeles (Esto solo afecta a la Arquitectura Antigua)

Agradecimientos

React Native 0.78 incluye más de 509 commits de 87 colaboradores. ¡Gracias por todo su arduo trabajo!

Agradecemos a los autores adicionales que contribuyeron a documentar características en esta publicación:

• equipo de Dream11 por las pruebas exhaustivas de las funcionalidades de React 19 en React Native

• Nicola Corti por el trabajo en Lanzamientos Más Rápidos

• Alex Hunt por el trabajo en la opción de activación para logs de JavaScript en Metro

• Peter Abbondanzo por el trabajo en la compatibilidad con XML Drawable de Android

• Oskar Kwaśniewski por el trabajo en ReactNativeFactory

Actualización a la versión 0.78

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:

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

Si usas Expo, React Native 0.78 estará disponible en una versión canary del SDK de Expo.

información

0.78 es ahora la última versión estable de React Native, mientras que 0.75.x pasa a no ser compatible. Para más información, consulta la política de soporte de React Native. Nuestro objetivo es publicar una última actualización de fin de vida para la versión 0.75 en un futuro próximo.