Saltar al contenido principal

La Nueva Arquitectura está aquí

· 24 min de lectura
The React Team
The React Team
@reactjs / @reactnative
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 →

¡React Native 0.76 con la Nueva Arquitectura habilitada por defecto ya está disponible en npm!

En la publicación del blog sobre el lanzamiento de la versión 0.76, compartimos una lista de cambios importantes incluidos en esta versión. En esta publicación, ofrecemos una visión general de la Nueva Arquitectura y cómo moldea el futuro de React Native.

La Nueva Arquitectura añade soporte completo para funciones modernas de React, incluyendo Suspense, Transitions, agrupamiento automático y useLayoutEffect. También incluye nuevos sistemas de Módulo Nativo y Componente Nativo que permiten escribir código con seguridad de tipos con acceso directo a interfaces nativas sin necesidad de un puente.

Este lanzamiento es el resultado de una reescritura completa de React Native en la que hemos estado trabajando desde 2018, y hemos puesto especial cuidado en que la Nueva Arquitectura sea una migración gradual para la mayoría de aplicaciones. En 2021, creamos el Grupo de Trabajo de la Nueva Arquitectura para colaborar con la comunidad y garantizar una experiencia de actualización fluida para todo el ecosistema React.

La mayoría de aplicaciones podrán adoptar React Native 0.76 con el mismo nivel de esfuerzo que cualquier otra versión. Las bibliotecas más populares de React Native ya son compatibles con la Nueva Arquitectura. Además, incluye una capa de interoperabilidad automática para mantener la compatibilidad con bibliotecas diseñadas para la arquitectura anterior.

Durante los últimos años de desarrollo, nuestro equipo ha compartido públicamente nuestra visión para la Nueva Arquitectura. Si te perdiste alguna de estas charlas, aquí las tienes:

¿Qué es la Nueva Arquitectura?

La Nueva Arquitectura es una reescritura completa de los principales sistemas que sustentan React Native, incluyendo cómo se renderizan los componentes, cómo se comunican las abstracciones de JavaScript con las nativas, y cómo se programa el trabajo entre diferentes hilos. Aunque la mayoría de usuarios no deberían preocuparse por cómo funcionan estos sistemas, estos cambios traen mejoras y nuevas capacidades.

En la arquitectura anterior, React Native se comunicaba con la plataforma nativa mediante un puente asíncrono. Para renderizar un componente o llamar a una función nativa, React Native necesitaba serializar y encolar las llamadas a funciones nativas mediante el puente, que se procesaban de forma asíncrona. La ventaja de esta arquitectura era que el hilo principal nunca se bloqueaba durante actualizaciones de renderizado o llamadas a funciones de módulos nativos, ya que todo el trabajo se realizaba en un hilo secundario.

Sin embargo, los usuarios esperan una respuesta inmediata a las interacciones para que la aplicación se sienta nativa. Esto significa que algunas actualizaciones deben renderizarse de forma síncrona en respuesta a la entrada del usuario, potencialmente interrumpiendo cualquier renderización en curso. Como la arquitectura anterior solo permitía actualizaciones asíncronas, necesitábamos reescribirla para admitir tanto actualizaciones asíncronas como síncronas.

Además, en la arquitectura anterior, la serialización de llamadas a funciones a través del puente rápidamente se convirtió en un cuello de botella, especialmente para actualizaciones frecuentes u objetos grandes. Esto dificultaba que las aplicaciones alcanzaran de manera confiable 60+ FPS. También existían problemas de sincronización: cuando las capas de JavaScript y nativa se desincronizaban, era imposible reconciliarlas de forma síncrona, lo que generaba errores como listas que mostraban fotogramas de espacio vacío y saltos visuales en la interfaz debido a la representación de estados intermedios.

Finalmente, dado que la arquitectura anterior mantenía una única copia de la interfaz usando la jerarquía nativa y mutaba esa copia in situ, el diseño solo podía calcularse en un único hilo. Esto imposibilitaba procesar actualizaciones urgentes como entradas del usuario, y no se podía leer el diseño de forma síncrona, como por ejemplo leer en un efecto de diseño para actualizar la posición de un tooltip.

Todos estos problemas implicaban que no era posible admitir correctamente las funciones concurrentes de React. Para resolver estos desafíos, la Nueva Arquitectura incluye cuatro componentes principales:

  • El nuevo sistema de módulos nativos

  • El nuevo renderizador

  • El bucle de eventos

  • Eliminación del puente

El nuevo sistema de módulos permite que el Renderizador de React Native tenga acceso síncrono a la capa nativa, lo que le permite manejar eventos, programar actualizaciones y leer el diseño tanto de forma asíncrona como síncrona. Los nuevos módulos nativos también se cargan de forma diferida por defecto, otorgando a las aplicaciones una mejora significativa de rendimiento.

El nuevo Renderizador puede manejar múltiples árboles en progreso en varios hilos, lo que permite a React procesar múltiples prioridades de actualización concurrente, ya sea en el hilo principal o en segundo plano. También admite leer el diseño desde múltiples hilos de forma síncrona o asíncrona, para permitir interfaces más responsivas sin tirones.

El nuevo bucle de eventos puede procesar tareas en el hilo de JavaScript en un orden bien definido. Esto permite a React interrumpir el renderizado para procesar eventos, dando prioridad a eventos urgentes del usuario sobre transiciones de UI de menor prioridad. El bucle de eventos también se alinea con las especificaciones web, permitiendo admitir características como microtareas, MutationObserver e IntersectionObserver.

Finalmente, eliminar el puente permite un inicio más rápido y comunicación directa entre JavaScript y el entorno de ejecución nativo, minimizando el costo de cambiar entre tareas. Esto también posibilita mejores reportes de errores, depuración y reducción de fallos por comportamientos no definidos.

La Nueva Arquitectura ya está lista para usarse en producción. Meta ya la utiliza a escala en la aplicación de Facebook y otros productos. Implementamos exitosamente React Native y la Nueva Arquitectura en las aplicaciones de Facebook e Instagram que desarrollamos para nuestros dispositivos Quest.

Nuestros socios ya llevan meses usando la Nueva Arquitectura en producción: revisa estas historias de éxito de Expensify y Kraken, y prueba Bluesky con su nueva versión.

Nuevos módulos nativos

El nuevo sistema de módulos nativos es una reescritura fundamental de cómo se comunican JavaScript y la plataforma nativa. Está completamente escrito en C++, lo que desbloquea nuevas capacidades:

  • Acceso síncrono hacia y desde el entorno de ejecución nativo

  • Seguridad de tipos entre JavaScript y código nativo

  • Compartición de código entre plataformas

  • Carga diferida de módulos por defecto

En el nuevo sistema de módulos nativos, JavaScript y la capa nativa ahora pueden comunicarse síncronamente a través de la JavaScript Interface (JSI), sin necesidad de un puente asíncrono. Esto significa que tus módulos nativos personalizados pueden llamar síncronamente a una función, devolver un valor y pasar ese valor a otra función de módulo nativo.

En la arquitectura anterior, para manejar una respuesta de llamadas a funciones nativas, debías proporcionar un callback, y el valor devuelto necesitaba ser serializable:

// ❌ Sync callback from Native Module
nativeModule.getValue(value => {
// ❌ value cannot reference a native object
nativeModule.doSomething(value);
});

En la Nueva Arquitectura, puedes realizar llamadas síncronas a funciones nativas:

// ✅ Sync response from Native Module
const value = nativeModule.getValue();

// ✅ value can be a reference to a native object
nativeModule.doSomething(value);

Con la Nueva Arquitectura, finalmente puedes aprovechar todo el poder de una implementación nativa en C++ mientras accedes a ella desde APIs de JavaScript/TypeScript. El Nuevo Sistema de Módulos admite módulos escritos en C++, permitiéndote escribir tu módulo una vez para que funcione en todas las plataformas, incluyendo Android, iOS, Windows y macOS. Implementar módulos en C++ permite un manejo de memoria más granular y optimizaciones de rendimiento.

Además, con Codegen, tus módulos pueden definir un contrato fuertemente tipado entre la capa JavaScript y la nativa. Según nuestra experiencia, los errores de tipos en límites cruzados son una de las causas más comunes de fallos en aplicaciones multiplataforma. Codegen te ayuda a superar estos problemas mientras genera código repetitivo automáticamente.

Finalmente, los módulos ahora se cargan bajo demanda: se cargan en memoria solo cuando son realmente necesarios, en lugar de hacerlo durante el inicio. Esto reduce el tiempo de inicio de la aplicación y lo mantiene bajo a medida que la aplicación crece en complejidad.

Bibliotecas populares como react-native-mmkv ya han obtenido beneficios al migrar a los nuevos Módulos Nativos:

"Los nuevos Módulos Nativos simplificaron enormemente la configuración, el enlace automático y la inicialización para react-native-mmkv. Gracias a la Nueva Arquitectura, react-native-mmkv es ahora un Módulo Nativo puro en C++, lo que le permite funcionar en cualquier plataforma. El nuevo Codegen permite que MMKV sea completamente seguro en tipos, solucionando un problema persistente de NullPointerReference mediante la aplicación de seguridad nula. Poder llamar funciones de Módulos Nativos de forma síncrona nos permitió reemplazar el acceso personalizado con JSI por la nueva API de Módulos Nativos."

Marc Rousavy, creador de react-native-mmkv

Nuevo Renderizador

También hemos reescrito completamente el Renderizador Nativo, agregando varias ventajas:

  • Las actualizaciones pueden renderizarse en diferentes hilos con distintas prioridades.

  • El diseño puede leerse de forma síncrona y entre diferentes hilos.

  • El renderizador está escrito en C++ y es compartido en todas las plataformas.

El Renderizador Nativo actualizado ahora almacena la jerarquía de vistas en una estructura de árbol inmutable. Esto significa que la UI se almacena de forma que no puede modificarse directamente, permitiendo procesar actualizaciones de manera segura para hilos. Esto le permite manejar múltiples árboles en progreso, cada uno representando una versión diferente de la interfaz. Como resultado, las actualizaciones pueden renderizarse en segundo plano sin bloquear la UI (como durante transiciones) o en el hilo principal (en respuesta a la interacción del usuario).

Al soportar múltiples hilos, React puede interrumpir una actualización de baja prioridad para renderizar una urgente, como las generadas por entradas de usuario, y luego reanudar la actualización de baja prioridad según sea necesario. El nuevo renderizador también puede leer información de diseño de forma síncrona y entre diferentes hilos. Esto permite cálculo en segundo plano para actualizaciones de baja prioridad y lecturas síncronas cuando se necesitan, como para reposicionar un tooltip.

Finalmente, reescribir el renderizador en C++ permite compartirlo en todas las plataformas. Esto garantiza que el mismo código se ejecute en iOS, Android, Windows, macOS y cualquier otra plataforma compatible con React Native, ofreciendo capacidades de renderizado consistentes sin necesidad de reimplementaciones por plataforma.

Este es un paso significativo hacia nuestra Visión de Múltiples Plataformas. Por ejemplo, el Aplanamiento de Vistas era una optimización exclusiva de Android para evitar árboles de diseño profundos. El nuevo renderizador, con núcleo compartido en C++, lleva esta función a iOS. Esta optimización es automática y no requiere configuración: viene incluida con el renderizador compartido.

Con estos cambios, React Native ahora admite completamente las funciones de React Concurrente como Suspense y Transitions, facilitando la creación de interfaces de usuario complejas que responden rápidamente a la interacción del usuario sin tartamudeos, retrasos o saltos visuales. En el futuro, aprovecharemos estas nuevas capacidades para mejorar componentes integrados como FlatList y TextInput.

Bibliotecas populares como Reanimated ya están aprovechando el Nuevo Renderizador:

"Reanimated 4, actualmente en desarrollo, presenta un nuevo motor de animaciones que funciona directamente con el Nuevo Renderizador, permitiéndole manejar animaciones y gestionar el diseño entre diferentes hilos. El diseño del Nuevo Renderizador es lo que realmente permite construir estas características sin depender de múltiples soluciones alternativas. Además, al estar implementado en C++ y compartido entre plataformas, grandes porciones de Reanimated pueden escribirse una sola vez, reduciendo problemas específicos de plataforma, minimizando la base de código y simplificando la adopción para plataformas fuera del árbol principal."

Krzysztof Magiera, creador de Reanimated

El bucle de eventos

La Nueva Arquitectura nos permitió implementar un modelo de procesamiento de bucle de eventos bien definido, como se describe en esta RFC. Esta RFC sigue las especificaciones descritas en el Estándar HTML, y describe cómo React Native debe ejecutar tareas en el hilo de JavaScript.

Implementar un bucle de eventos bien definido cierra brechas entre React DOM y React Native: el comportamiento de una aplicación React Native ahora se asemeja más al de una aplicación React DOM, facilitando aprender una vez y escribir en cualquier lugar.

El bucle de eventos aporta muchos beneficios a React Native:

  • Capacidad de interrumpir el renderizado para procesar eventos y tareas

  • Mayor alineación con las especificaciones web

  • Base para más características de navegador

Con el bucle de eventos, React puede ordenar actualizaciones y eventos de manera predecible. Esto permite a React interrumpir una actualización de baja prioridad con un evento de usuario urgente, y el Nuevo Renderizador nos permite renderizar esas actualizaciones de forma independiente.

El bucle de eventos también alinea el comportamiento de eventos y tareas como temporizadores con las especificaciones web, lo que significa que React Native funciona más como lo que los usuarios conocen en la Web, y permite un mejor intercambio de código entre React DOM y React Native.

También permite implementar características de navegador más compatibles como microtareas, MutationObserver e IntersectionObserver. Estas características aún no están listas para usar en React Native, pero estamos trabajando para incorporarlas en el futuro.

Finalmente, el bucle de eventos y los cambios del Nuevo Renderizador para leer el diseño de forma síncrona permiten a React Native agregar soporte adecuado para useLayoutEffect, leyendo información de diseño de forma síncrona y actualizando la UI en el mismo fotograma. Esto permite posicionar elementos correctamente antes de mostrárselos al usuario.

Consulta useLayoutEffect para más detalles.

Eliminando el puente

En la Nueva Arquitectura, también eliminamos completamente la dependencia de React Native en el puente, reemplazándolo con comunicación directa y eficiente entre JavaScript y código nativo usando JSI:

Eliminar el puente mejora el tiempo de inicio al evitar su inicialización. Por ejemplo, en la arquitectura anterior, para proporcionar métodos globales a JavaScript, necesitábamos inicializar un módulo en JavaScript durante el inicio, causando un pequeño retraso:

// ❌ Slow initialization
import {NativeTimingModule} from 'NativeTimingModule';
global.setTimeout = timer => {
NativeTimingModule.setTimeout(timer);
};

// App.js
setTimeout(() => {}, 100);

En la Nueva Arquitectura, podemos vincular métodos directamente desde C++:

// ✅ Initialize directly in C++
runtime.global().setProperty(runtime, "setTimeout", createTimer);
// App.js
setTimeout(() => {}, 100);

La reescritura también mejora el reporte de errores, especialmente para fallos de JavaScript al inicio, y reduce fallos por comportamientos indefinidos. Si ocurren fallos, las nuevas React Native DevTools simplifican la depuración y son compatibles con la Nueva Arquitectura.

El puente permanece por compatibilidad hacia atrás para soportar migraciones graduales a la Nueva Arquitectura. En el futuro, eliminaremos completamente el código del puente.

Migración gradual

Esperamos que la mayoría de las aplicaciones puedan actualizar a la versión 0.76 con el mismo esfuerzo que cualquier otra versión.

Cuando actualizas a la versión 0.76, la Nueva Arquitectura y React 18 están activadas por defecto. Sin embargo, para utilizar funciones concurrentes y aprovechar al máximo la Nueva Arquitectura, tu aplicación y bibliotecas necesitarán una migración gradual para ser completamente compatibles.

Al actualizar inicialmente, tu aplicación funcionará con la Nueva Arquitectura mediante una capa de interoperabilidad automática con la arquitectura anterior. Para la mayoría de aplicaciones, esto funcionará sin cambios, pero existen limitaciones conocidas con esta capa, ya que no admite el acceso a Shadow Nodes personalizados ni funciones concurrentes.

Para usar funciones concurrentes, las aplicaciones también deben actualizarse para admitir React Concurrent siguiendo las Reglas de React. Para migrar tu código JavaScript a React 18 y sus semánticas, sigue la guía de actualización a React 18.

La estrategia general es que tu aplicación funcione con la Nueva Arquitectura sin romper el código existente. Luego puedes migrar gradualmente a tu propio ritmo. Para nuevas superficies que hayan migrado todos sus módulos, podrás usar funciones concurrentes inmediatamente. Para superficies existentes, deberás resolver ciertos problemas y migrar módulos antes de añadir funciones concurrentes.

Hemos colaborado con las bibliotecas más populares de React Native para garantizar su compatibilidad. Más de 850 bibliotecas ya son compatibles, incluyendo todas con más de 200K descargas semanales (~10% de bibliotecas descargadas). Puedes verificar la compatibilidad en el sitio reactnative.directory:

Para más detalles sobre la actualización, consulta Cómo actualizar más abajo.

Nuevas características

La Nueva Arquitectura incluye soporte completo para React 18, funciones concurrentes y useLayoutEffect en React Native. Para la lista completa de características de React 18, consulta la publicación de React 18.

Transiciones

Las transiciones son un concepto nuevo en React 18 para distinguir entre actualizaciones urgentes y no urgentes.

  • Actualizaciones urgentes reflejan interacción directa, como teclear o pulsar.

  • Actualizaciones de transición cambian la UI de una vista a otra.

Las actualizaciones urgentes requieren respuesta inmediata para coincidir con nuestro instinto sobre objetos físicos. Pero las transiciones son diferentes porque el usuario no espera ver valores intermedios. Con la Nueva Arquitectura, React Native puede procesar ambos tipos por separado.

Normalmente, la mejor experiencia ocurre cuando una interacción genera ambos tipos de actualización. Al igual que en ReactDOM, eventos como press o change se manejan como urgentes. Puedes usar startTransition dentro del evento para indicar qué actualizaciones son "transiciones" y pueden diferirse:

import {startTransition} from 'react';

// Urgent: Show the slider value
setCount(input);

// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setNumberOfTiles(input);
});

Separar eventos urgentes de transiciones permite interfaces más receptivas y experiencias más intuitivas.

Esta comparación muestra la arquitectura anterior sin transiciones versus la nueva con transiciones. Imagina que cada tile no es una vista simple sino un componente complejo con imágenes. Después de usar useTransition evitas saturar tu app con actualizaciones innecesarias.

A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000.
Before: rendering tiles without marking it as a transition.
A video demonstrating an app rendering many views (tiles) according to a slider input. The views are rendered in batches as the slider is quickly adjusted from 0 to 1000. There are less batch renders in comparison to the next video.
After: rendering tiles with transitions to interrupt in-progress renders of stale state.

Para más información, consulta Compatibilidad con el Renderizador Concurrente y sus Funcionalidades.

Agrupamiento automático

Al actualizar a la Nueva Arquitectura, obtendrás el agrupamiento automático de React 18.

El agrupamiento automático permite a React combinar más actualizaciones de estado durante el renderizado para evitar estados intermedios. Esto hace que React Native sea más rápido y menos propenso a retrasos, sin que el desarrollador añada código adicional.

A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI slowly catches up to rendering 1000 views.
Before: rendering frequent state updates with legacy renderer.
A video demonstrating an app rendering many views according to a slider input. The slider value is adjusted from 0 to 1000 and the UI resolves to 1000 views faster than the previous example, without as many intermediate states.
After: rendering frequent state updates with automatic batching.

En la arquitectura anterior, se renderizan más estados intermedios y la UI sigue actualizándose incluso cuando el control deslizante deja de moverse. La Nueva Arquitectura renderiza menos estados intermedios y completa el renderizado mucho antes gracias al agrupamiento automático de actualizaciones.

Para más información, consulta Compatibilidad con el Renderizador Concurrente y sus Funcionalidades.

useLayoutEffect

Basándonos en el Event Loop y la capacidad de leer diseños de forma síncrona, en la Nueva Arquitectura añadimos soporte completo para useLayoutEffect en React Native.

En la arquitectura anterior, necesitabas usar el evento asíncrono onLayout para leer información de diseño (que también era asíncrona). Esto causaba al menos un fotograma con diseño incorrecto hasta que se leía y actualizaba, generando problemas como tooltips en posición errónea:

// ❌ async onLayout after commit
const onLayout = React.useCallback(event => {
// ❌ async callback to read layout
ref.current?.measureInWindow((x, y, width, height) => {
setPosition({x, y, width, height});
});
}, []);

// ...
<ViewWithTooltip
onLayout={onLayout}
ref={ref}
position={position}
/>;

La Nueva Arquitectura soluciona esto permitiendo acceso síncrono a la información de diseño en useLayoutEffect:

// ✅ sync layout effect during commit
useLayoutEffect(() => {
// ✅ sync call to read layout
const rect = ref.current?.getBoundingClientRect();
setPosition(rect);
}, []);

// ...
<ViewWithTooltip ref={ref} position={position} />;

Este cambio permite leer información de diseño de forma síncrona y actualizar la UI en el mismo fotograma, posicionando elementos correctamente antes de mostrarlos al usuario:

A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The tooltip is rendered after a short delay after the view moves
In the old architecture, layout was read asynchronously in onLayout, causing the position of the tooltip to be delayed.
A view that is moving to the corners of the viewport and center with a tooltip rendered either above or below it. The view and tooltip move in unison.
In the New Architecture, layout can be read in useLayoutEffect synchronously, updating the tooltip position before displaying.

Para más información, consulta la documentación de Diseño y Efectos Síncronos.

Soporte Completo para Suspense

Suspense te permite declarar estados de carga para partes del árbol de componentes que aún no están listas para mostrarse:

<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>

Introdujimos una versión limitada de Suspense hace años, y React 18 añadió soporte completo. Hasta ahora, React Native no podía soportar renderizado concurrente para Suspense.

La Nueva Arquitectura incluye soporte completo para Suspense introducido en React 18. Esto significa que ahora puedes usar Suspense en React Native para manejar estados de carga, y el contenido suspendido se renderizará en segundo plano mientras se muestra el estado de carga, dando prioridad a la interacción del usuario con contenido visible.

Para más detalles, consulta el RFC de Suspense en React 18.

Cómo Actualizar

Para actualizar a la versión 0.76, sigue los pasos del post de lanzamiento. Como este lanzamiento también actualiza a React 18, necesitarás seguir la guía de actualización a React 18.

Estos pasos bastarán para que la mayoría de apps se actualicen gracias a la capa de interoperabilidad con la arquitectura anterior. Sin embargo, para aprovechar completamente la Nueva Arquitectura y usar funcionalidades concurrentes, deberás migrar tus Native Modules y Native Components personalizados a las nuevas APIs.

Sin migrar tus Native Modules personalizados, no obtendrás los beneficios de C++ compartido, llamadas síncronas o seguridad de tipos con codegen. Sin migrar tus Native Components, no podrás usar funcionalidades concurrentes. Recomendamos migrar todos los Native Components y Native Modules lo antes posible.

nota

En futuras versiones eliminaremos la capa de interoperabilidad y los módulos deberán soportar la Nueva Arquitectura.

Aplicaciones

Si desarrollas aplicaciones, para soportar completamente la Nueva Arquitectura deberás actualizar tus bibliotecas, Native Components personalizados y Native Modules personalizados.

Hemos colaborado con las bibliotecas más populares de React Native para garantizar su compatibilidad. Puedes verificar la compatibilidad en el sitio reactnative.directory.

Si alguna de las bibliotecas que usa tu aplicación aún no es compatible, puedes:

  • Abrir un issue en la biblioteca solicitando al autor que migre a la Nueva Arquitectura.

  • Si la biblioteca no tiene mantenimiento, considera alternativas con las mismas funcionalidades.

  • Excluirte de la Nueva Arquitectura durante la migración de esas bibliotecas.

Si tu aplicación tiene Módulos Nativos personalizados o Componentes Nativos personalizados, esperamos que funcionen correctamente gracias a nuestra capa de interoperabilidad. Sin embargo, recomendamos actualizarlos a las nuevas APIs de Módulo Nativo y Componente Nativo para admitir completamente la Nueva Arquitectura e implementar características concurrentes.

Sigue estas guías para migrar tus módulos y componentes a la Nueva Arquitectura:

Bibliotecas

Si mantienes una biblioteca, primero verifica que funcione con la capa de interoperabilidad. Si no es así, abre un issue en el Grupo de Trabajo de la Nueva Arquitectura.

Para admitir completamente la Nueva Arquitectura, te recomendamos migrar tu biblioteca a las nuevas APIs de Módulo Nativo y Componente Nativo lo antes posible. Esto permitirá que los usuarios aprovechen plenamente la Nueva Arquitectura e implementen características concurrentes.

Puedes seguir estas guías para migrar tus módulos y componentes:

Exclusión

Si por algún motivo la Nueva Arquitectura no funciona correctamente en tu aplicación, siempre puedes excluirte temporalmente hasta que estés listo para reactivarla.

Para excluirte de la Nueva Arquitectura:

  • En Android, modifica el archivo android/gradle.properties y desactiva la bandera newArchEnabled:
-newArchEnabled=true
+newArchEnabled=false
  • En iOS: reinstala las dependencias ejecutando el comando:
RCT_NEW_ARCH_ENABLED=0 bundle exec pod install

Agradecimientos

Llevar la Nueva Arquitectura a la comunidad de código abierto ha requerido un enorme esfuerzo durante varios años de investigación y desarrollo. Queremos agradecer a todos los miembros actuales y anteriores del equipo de React que hicieron posible este logro.

También estamos profundamente agradecidos con nuestros socios colaboradores:

  • Expo, por adoptar tempranamente la Nueva Arquitectura y apoyar la migración de bibliotecas populares.

  • Software Mansion, por mantener bibliotecas cruciales, migrarlas anticipadamente e investigar/solucionar diversos problemas.

  • Callstack, por mantener bibliotecas esenciales, migrarlas pronto y apoyar el desarrollo de la CLI comunitaria.

  • Microsoft, por implementar la Nueva Arquitectura en react-native-windows y react-native-macos, además de otras herramientas.

  • Expensify, Kraken, Bluesky y Brigad por ser pioneros en la adopción y reportar problemas para beneficio de todos.

  • A todos los mantenedores de bibliotecas independientes y desarrolladores que contribuyeron a la Nueva Arquitectura probándola, corrigiendo algunos problemas y planteando preguntas sobre aspectos poco claros para que pudiéramos aclararlos.