React Native 0.74 - Yoga 3.0, Nueva Arquitectura Bridgeless 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 lanzamos React Native 0.74! Esta versión incluye Yoga 3.0, la arquitectura Bridgeless activada por defecto en la Nueva Arquitectura, actualizaciones agrupadas de onLayout (Nueva Arquitectura), y Yarn 3 como gestor de paquetes predeterminado para nuevos proyectos.

También estamos eliminando APIs obsoletas, con la eliminación de PropTypes y cambios importantes en PushNotificationIOS. En Android, el SDK 23 (Android 6.0) es ahora la versión mínima soportada.

Lo más destacado

• Yoga 3.0

• Nueva Arquitectura: Bridgeless por Defecto

• Nueva Arquitectura: Actualizaciones Agrupadas de onLayout

• Yarn 3 para Nuevos Proyectos

Cambios importantes

• Actualización del SDK Mínimo de Android (Android 6.0)

• Cambios en la API de PushNotificationIOS (Obsoleto)

• Eliminación de PropTypes Obsoletas

• Eliminación del Plugin de React Native para Flipper

• Otros Cambios Importantes

Lo más destacado

Yoga 3.0

Nuevos Comportamientos de Layout

React Native 0.74 incluye Yoga 3.0, la versión más reciente de nuestro motor de layout. Yoga 3.0 mejora el layout haciendo que los estilos sean más predecibles y permite renderizar componentes escritos para la web.

React Native continúa preservando intencionalmente algunos comportamientos de layout incorrectos, ya que se encontró que corregirlos afectaría a un número significativo de componentes del mundo real. La conformidad del layout podrá configurarse de manera más granular en futuras versiones de React Native.

advertencia

Anteriormente, React Native invertía los bordes left/right (y start/end) al aplicar margin, padding o border en contenedores con row-reverse. Ahora, el comportamiento de estas propiedades se alinea con la web. Es posible que debas actualizar el código que dependía de esta inversión para mantener la representación correcta.

Style	Before	After
<View style={{ flexDirection: 'row', backgroundColor: 'red', margin: 10, width: 200, height: 100, }}> <View style={{ flexDirection: 'row-reverse', backgroundColor: 'blue', flex: 1, marginLeft: 50, }}> <View style={{ backgroundColor: 'green', height: '50%', flex: 1, marginLeft: 50, }} /> </View> </View>

Soporte para align-content: 'space-evenly'

Yoga 3.0 añade soporte para alignContent: 'space-evenly'. space-evenly distribuye las líneas en contenedores flex multi-línea usando espacios uniformes entre las líneas y los bordes del contenedor.

Source: World Wide Web Consortium

Soporte para position: 'static'

información

position: 'static' solo está disponible en la Nueva Arquitectura.

Los elementos con position: 'static' no pueden desplazarse y no se consideran al determinar el bloque contenedor de elementos posicionados absolutamente. Esto permite posicionar un elemento respecto a un ancestro que no sea su padre directo.

<View style={{ backgroundColor: 'blue', width: 200, height: 200, flexDirection: 'row-reverse', }}> <View style={{ backgroundColor: 'red', width: 100, height: 100, position: 'static', }}> <View style={{ backgroundColor: 'green', width: 25, height: '25%', left: 25, top: 25, position: 'absolute', }} /> </View> </View>

Observa cómo el <View> verde define left y top y se posiciona respecto al <View> azul, no a su padre directo.

React Native mantiene position: 'relative' como valor predeterminado cuando no se especifica position.

Nueva Arquitectura: Modo Sin Bridge por Defecto

En esta versión, establecemos el Modo Sin Bridge como predeterminado cuando se habilita la Nueva Arquitectura. Puedes conocer más sobre este cambio en esta publicación. Para facilitar la transición, mejoramos las capas de interoperabilidad y colaboramos con varias bibliotecas para garantizar su funcionamiento inmediato en Modo Sin Bridge.

No solo trabajamos en la interoperabilidad de Modo Sin Bridge: también mejoramos las capas de interoperabilidad del Nuevo Renderizador. Lo más destacado es que ahora están habilitadas por defecto sin necesidad de especificar componentes. Puedes leer más aquí.

Si deseas profundizar en la Nueva Arquitectura, encontrarás documentación en el repositorio react-native-new-architecture. Cuando la Nueva Arquitectura sea el estándar, esta información se incorporará a reactnative.dev.

Nueva Arquitectura: Actualizaciones Agrupadas de onLayout

Las actualizaciones de estado en callbacks onLayout ahora se agrupan. Anteriormente, cada actualización en el evento onLayout generaba un nuevo commit de renderizado.

function MyComponent(props) {
  const [state1, setState1] = useState(false);
  const [state2, setState2] = useState(false);

  return (
    <View>
      <View
        onLayout={() => {
          setState1(true);
       }}>
      <View
         onLayout={() => {
          // When this event is executed, state1's new value is no longer observable here.
          setState2(true);
        }}>
      </View>
    </View>
  );
}

En la versión 0.74, las actualizaciones de setState1 y setState2 se agrupan en lotes. Este cambio es un comportamiento esperado en React que permite menos repintados.

peligro

Este cambio puede romper código que dependía de actualizaciones de estado no agrupadas. Deberás refactorizar este código para usar funciones de actualización o equivalente.

Yarn 3 para proyectos nuevos

Yarn 3 es ahora el gestor de paquetes de JavaScript predeterminado para nuevos proyectos inicializados con React Native Community CLI.

Yarn 3.x se usará con nodeLinker: node-modules, un modo que proporciona compatibilidad con bibliotecas de React Native. Esto reemplaza a Yarn Classic (1.x, obsoleto) como predeterminado anterior. Para actualizar Yarn en tu app existente, sigue esta guía.

$ yarn --help
━━━ Yarn Package Manager - 3.6.4 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  $ yarn <command>

La Community CLI también permite inicializar proyectos con otros gestores de paquetes mediante la bandera --pm (más información).

Cambios importantes

Aumento del SDK mínimo de Android (Android 6.0)

React Native 0.74 requiere como mínimo la versión 23 del SDK de Android (Android 6.0). Anteriormente era Android 5.0 (API 21). Consulta el contexto de este cambio aquí.

Extra: Reducción del tamaño en apps Android

El aumento del SDK mínimo, junto con mejoras en nuestra compilación nativa, nos permitió reducir considerablemente el tamaño de las apps en dispositivos de usuarios.

Por ejemplo, una app nueva creada con React Native 0.74 ocupa ~13% menos espacio en dispositivos, ahorrando ~4MB de almacenamiento.

Eliminación de PropTypes obsoletos

Antes de 0.74, React Native seguía incluyendo PropTypes, una API obsoleta desde React 15.5 (2017). Ahora eliminamos todos los PropTypes incorporados, reduciendo el tamaño de apps (26.4kB en bundles minimizados) y sobrecarga de memoria.

Se eliminaron estas propiedades de PropTypes: Image.propTypes, Text.propTypes, TextInput.propTypes, ColorPropType, EdgeInsetsPropType, PointPropType, ViewPropTypes (ver commit).

Si tu app o biblioteca usa PropTypes, recomendamos migrar a un sistema de tipos como TypeScript.

Cambios en la API de PushNotificationIOS (Obsoleto)

En React Native 0.74, avanzamos hacia la eliminación de la biblioteca obsoleta PushNotificationIOS. Los cambios eliminan referencias a APIs iOS antiguas. PushNotificationIOS migró al framework User Notifications de Apple, exponiendo nuevas APIs para programar y manejar notificaciones.

En la próxima versión (0.75), planeamos eliminar esta biblioteca, trasladándola fuera del núcleo de React Native al paquete comunitario @react-native-community/push-notification-ios. Si aún usas PushNotificationIOS, debes migrar antes de la próxima versión.

Cambios en la API

El callback didRegisterUserNotificationSettings: en RCTPushNotificationManager no tenía efecto y ha sido eliminado.

Las siguientes funciones de retorno (callbacks) en RCTPushNotificationManager han quedado obsoletas y se eliminarán en la versión 0.75:

+ (void)didReceiveLocalNotification:(UILocalNotification *)notification;
+ (void)didReceiveRemoteNotification:(NSDictionary *)notification;

Para recuperar la notificación que inició la aplicación usando getInitialNotification(), ahora deberás establecer explícitamente initialNotification en RCTPushNotificationManager:

[RCTPushNotificationManager setInitialNotification:response.notification];

En el lado de JavaScript, las propiedades de Notification han cambiado. alertAction y repeatInterval ahora están obsoletas y se eliminarán en la versión 0.75:

type Notification = {
  ...
  // NEW: Seconds from now to display the notification.
  fireIntervalSeconds?: ?number,

  // CHANGED: Used only for scheduling notifications. Will be null when
  // retrieving notifications using `getScheduledLocalNotifications` or
  // `getDeliveredNotifications`.
  soundName?: ?string,

  // DEPRECATED: This was used for iOS's legacy UILocalNotification.
  alertAction?: ?string,

  // DEPRECATED: Use `fireDate` or `fireIntervalSeconds` instead.
  repeatInterval?: ?string,
};

Finalmente, el parámetro handler en PushNotificationIOS.removeEventListener no se utilizaba y ha sido eliminado.

💡 How to Migrate

iOS

Your AppDelegate will need to implement UNUserNotificationCenterDelegate. This should be done on app startup in application:willFinishLaunchingWithOptions: or application:didFinishLaunchingWithOptions: (see Apple Docs for more details).

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  return YES;
}

Implement userNotificationCenter:willPresentNotification:withCompletionHandler:, which is called when a notification arrives and the app is in the foreground. Use the completionHandler to determine if the notification will be shown to the user and notify RCTPushNotificationManager accordingly:

- (void)userNotificationCenter:(UNUserNotificationCenter *)center
       willPresentNotification:(UNNotification *)notification
         withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
  // This will trigger 'notification' and 'localNotification' events on PushNotificationIOS
  [RCTPushNotificationManager didReceiveNotification:notification];
  // Decide if and how the notification will be shown to the user
  completionHandler(UNNotificationPresentationOptionNone);
}

To handle when a notification is tapped, implement userNotificationCenter:didReceiveNotificationResponse:withCompletionHandler:. Note that if you set foreground notifications to be shown in userNotificationCenter:willPresentNotification:withCompletionHandler:, you should only notify RCTPushNotificationManager in one of these callbacks.

If the tapped notification resulted in app launch, call setInitialNotification:. If the notification was not previously handled by userNotificationCenter:willPresentNotification:withCompletionHandler:, call didReceiveNotification: as well:

- (void)  userNotificationCenter:(UNUserNotificationCenter *)center
  didReceiveNotificationResponse:(UNNotificationResponse *)response
           withCompletionHandler:(void (^)(void))completionHandler
{
  // This condition passes if the notification was tapped to launch the app
  if ([response.actionIdentifier isEqualToString:UNNotificationDefaultActionIdentifier]) {
  // Allow the notification to be retrieved on the JS side using getInitialNotification()
    [RCTPushNotificationManager setInitialNotification:response.notification];
  }
 // This will trigger 'notification' and 'localNotification' events on PushNotificationIOS
  [RCTPushNotificationManager didReceiveNotification:response.notification];
  completionHandler();
}

Finally, delete the following methods and adapt the logic into the callbacks above which will be called instead:

1. application:didReceiveLocalNotification: [deprecated]
2. application:didReceiveRemoteNotification: [deprecated]
3. application:didReceiveRemoteNotification:fetchCompletionHandler: [not deprecated, but is superseded by the UNUserNotificationCenterDelegate methods]

Delete any usages of application:didRegisterUserNotificationSettings: and RCTPushNotificationManager’s corresponding didRegisterUserNotificationSettings: as well.

Example: See the RNTester AppDelegate.mm.

JS

1. Remove any references to alertAction.
2. Remove the handler argument on any calls to removeEventListener.
3. Replace any usages of repeatInterval by firing multiple notifications using fireDate or fireIntervalSeconds instead.
4. Note that soundName will be null when it is accessed on a Notification returned from getScheduledLocalNotifications() and getDeliveredNotifications().

Eliminación del complemento Flipper para React Native

El uso de Flipper para inspeccionar diseños de React Native, solicitudes de red y otras funciones de complementos de React Native, ahora no es compatible. En la versión 0.74, hemos eliminado las bibliotecas nativas de Flipper y el código de configuración de los nuevos proyectos de React Native. Esto significa menos dependencias y una configuración local más rápida (consulta el RFC original).

Las diferencias para eliminar Flipper en tu aplicación se pueden ver en el Upgrade Helper. Si deseas conservar Flipper en una aplicación existente, ignora las líneas de diferencias relevantes.

💡 To re-integrate Flipper

Flipper can still be used as a standalone tool for debugging an Android or iOS app, and can be manually integrated by following the Flipper docs (Android guide, iOS guide).

We recommend that teams invest in switching to native debugging tooling in Android Studio and Xcode.

Sustitución de Flipper

Existen varias herramientas de depuración dedicadas que reemplazan las funciones de Flipper. Para obtener más información, recomendamos leer el excelente artículo Why you don't need Flipper in your React Native app de Jamon Holmgren.

Depuración de JavaScript

El uso del Depurador de Hermes sigue siendo nuestra opción recomendada para la depuración en la versión 0.74. También puedes probar el Nuevo Depurador Experimental, que también es el predeterminado en Expo. Esta sigue siendo una vista previa temprana: los problemas conocidos y las actualizaciones se pueden seguir aquí.

Otros cambios importantes

General

• Hacer que start/end en los estilos siempre se refiera a la dirección de escritura (#42251).

Android

• Eliminación de JSIModule* de FabricUIManagerProvider (#42059).

  • Esta API no se usaba en código abierto: usa TurboModules en su lugar.

• Declarar obsoletas UIManagerModule.showPopupMenu y UIManagerModule.dismissPopupMenu (#42441)

  • Esta API se ha movido al paquete npm @react-native/popup-menu-android y se eliminará en la versión 0.75.

iOS

• Eliminación de los argumentos configFilename y configKey de la CLI de codegen para iOS (#41533).

• Cambios en el manejo de bundleURL (#43994).

  • Anteriormente, bundleURL se establecía al iniciar React Native en una variable de instancia y no era posible actualizarla.
  • Ahora, bundleUrl es una función que se reevalúa cuando es necesario, permitiendo usar URLs diferentes en recargas.
  • Este cambio afectará tu aplicación solo si modificabas la variable bundleURL después del inicio. En ese caso, traslada la lógica de actualización a la función bundleURL en AppDelegate.

Consulta el registro de cambios completo para ver la lista completa de cambios importantes.

Problemas conocidos

iOS

• Caso extremo con múltiples ventanas: Cuando la ventana principal está inactiva y el sistema intenta mostrar un diálogo, este no se posiciona correctamente. Un fix está en camino en #44167 y se incluirá en la versión 0.74.1.

Agradecimientos

React Native 0.74 contiene más de 1673 commits de 57 colaboradores. ¡Gracias por todo su esfuerzo!

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

• Nick Gerleman por Yoga 3.0

• Joe Vilches por Yoga 3.0

• Riccardo Cipolleschi por Nueva Arquitectura: Bridgeless por Defecto

• Samuel Susla por Nueva Arquitectura: Actualizaciones agrupadas de onLayout

• Tim Yung por Eliminación de PropTypes obsoletos

• Ingrid Wang por Cambios en la API de PushNotificationIOS (Obsoleta)

Actualización a la versión 0.74

Utiliza 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@latest init MyProject

Si usas Expo, React Native 0.74 estará disponible en Expo SDK 51.

información

0.74 es ahora la versión estable más reciente de React Native y 0.71.x pasa a no ser compatible. Para más detalles, consulta la política de soporte de React Native. Planeamos publicar una actualización final de fin de vida para 0.71 a principios de mayo.