React Native

Nova Arquitetura está aqui · React Native

A versão 0.76 do React Native, que inclui a nova arquitetura por padrão, está disponível no npm. Esta atualização traz suporte completo para recursos modernos do React e sistemas de módulos nativos e componentes que permitem escrever código tipo seguro com acesso direto às interfaces nativas. A nova arquitetura resolve problemas como atraso na resposta ao usuário e limitações em desempenho, oferecendo uma experiência mais fluida e integrada entre JavaScript e o ambiente nativo.

Compartilhar
New Architecture is here · React Native

React Native 0.76 com a Nova Arquitetura por padrão está disponível no npm!

No post de lançamento do blog 0.76, compartilhamos uma lista das mudanças significativas incluídas nesta versão. Neste post, fornecemos um panorama da Nova Arquitetura e como ela moldará o futuro do React Native.

A Nova Arquitetura adiciona suporte completo para recursos modernos do React, incluindo Suspense, Transições, agrupamento automático e useLayoutEffect. A Nova Arquitetura também inclui novos sistemas de Módulos Nativos e Componentes Nativos que permitem escrever código seguro contra tipos com acesso direto às interfaces nativas sem uma ponte.

Esta versão é o resultado de um reescrita completa do React Native que estamos trabalhando desde 2018, e tomamos cuidado extra para tornar a Nova Arquitetura uma migração gradual para a maioria dos aplicativos. Em 2021, criamos o Grupo de Trabalho da Nova Arquitetura para colaborar com a comunidade na garantia de uma experiência de atualização suave para todo o ecossistema React.

A maioria dos aplicativos será capaz de adotar o React Native 0.76 com o mesmo nível de esforço que qualquer outra versão. As bibliotecas mais populares do React Native já suportam a Nova Arquitetura. A Nova Arquitetura também inclui uma camada de interoperabilidade automática para habilitar compatibilidade em retrocesso com bibliotecas direcionadas à antiga arquitetura.

Em vários anos de desenvolvimento, nossa equipe compartilhou publicamente sua visão sobre a Nova Arquitetura. Se você perdeu alguma dessas apresentações, confira aqui:

O que é a Nova Arquitetura

A Nova Arquitetura é uma reescrita completa dos principais sistemas que sustentam o React Native, incluindo como componentes são renderizados, como abstrações JavaScript se comunicam com abstrações nativas e como trabalho é agendado em diferentes threads. Embora a maioria dos usuários não precise pensar sobre como esses sistemas funcionam, essas mudanças trazem melhorias e novas capacidades.

Na antiga arquitetura, o React Native se comunicava com a plataforma nativa usando uma ponte assíncrona. Para renderizar um componente ou chamar uma função nativa, o React Native precisava serializar e enfileirar chamadas de funções nativas na ponte, que seriam processadas assincronicamente. A vantagem dessa arquitetura é que a thread principal nunca era bloqueada para atualizações de renderização ou manipulação de chamadas de módulos nativos, pois todo o trabalho era feito em uma thread secundária.

No entanto, os usuários esperam feedback imediato às interações para sentir como um aplicativo nativo. Isso significa que algumas atualizações precisam renderizar sincronamente em resposta à entrada do usuário, potencialmente interrompendo qualquer renderização em andamento. Como a antiga arquitetura era apenas assíncrona, precisamos reescrevê-la para permitir tanto atualizações assíncronas quanto síncronas.

Além disso, na antiga arquitetura, serializar chamadas de função sobre a ponte rapidamente se tornou um gargalo, especialmente para atualizações frequentes ou grandes objetos. Isso dificultava para os aplicativos alcançar 60+ FPS consistentemente. Também havia problemas de sincronização: quando o JavaScript e a camada nativa ficavam fora de sincronismo, era impossível reconciliá-los sincronicamente, resultando em bugs como listas mostrando quadros vazios e saltos visuais na interface do usuário devido a estados intermediários renderizados.

Finalmente, como a arquitetura antiga mantinha uma única cópia da IU usando a hierarquia nativa e mutava essa cópia no lugar, o layout poderia ser calculado apenas em um único thread. Isso tornou impossível processar atualizações urgentes como entradas do usuário e o layout não podia ser lido de forma sincrona, por exemplo, ler em um efeito de layout para atualizar a posição de uma dica de ferramenta.

Todos esses problemas significavam que era impossível suportar corretamente as características concorrentes do React. Para resolver esses problemas, a Nova Arquitetura inclui quatro partes principais:

  • O Novo Sistema de Módulos Nativos
  • O Novo Renderer
  • O Loop de Eventos
  • Removendo a Ponte

O novo sistema de módulos permite que o React Native Renderer tenha acesso sincrono à camada nativa, o que lhe permite lidar com eventos, agendar atualizações e ler layout tanto assincronamente quanto sincronamente. Os novos Módulos Nativos também são carregados de forma preguiçosa por padrão, dando aos aplicativos um ganho significativo em desempenho.

O Novo Renderer pode lidar com várias árvores em andamento em vários threads, o que permite ao React processar várias atualizações concorrentes de prioridades diferentes, seja na thread principal ou em uma thread de fundo. Ele também suporta a leitura do layout de múltiplos threads de forma sincrona ou assíncrona, para apoiar interfaces mais responsivas sem jank.

O novo Loop de Eventos pode processar tarefas na thread JavaScript em uma ordem bem definida. Isso permite ao React interromper a renderização para processar eventos, dando prioridade a eventos do usuário urgentes sobre transições de IU de menor prioridade. O Loop de Eventos também se alinha com as especificações da web, então podemos suportar recursos do navegador como microtasks, MutationObserver e IntersectionObserver.

Finalmente, remover a ponte permite um início mais rápido e comunicação direta entre JavaScript e o runtime nativo, minimizando o custo de trocar trabalho. Isso também permite uma melhor relatória de erros, depuração e reduzindo crashes de comportamento indefinido.

A Nova Arquitetura está pronta para ser usada em produção agora. Ela já é utilizada em larga escala na Meta no aplicativo Facebook e em outros produtos. Usamos o React Native e a Nova Arquitetura com sucesso nos aplicativos de Facebook e Instagram que desenvolvemos para nossos dispositivos Quest.

Nossos parceiros já estão usando a Nova Arquitetura em produção há meses: dê uma olhada nessas histórias de sucesso da Expensify e da Kraken, e experimente o Bluesky com sua nova versão.

Novos Módulos Nativos

O novo Sistema de Módulos Nativos é uma grande reescrita da forma como JavaScript e a plataforma nativa se comunicam. Ele está escrito inteiramente em C++, o que desbloqueia muitas novas capacidades:

  • Acesso sincrono à e do runtime nativo
  • Segurança de tipo entre JavaScript e código nativo
  • Compartilhamento de código em várias plataformas
  • Carregamento preguiçoso de módulos por padrão

No novo Sistema de Módulos Nativos, JavaScript e a camada nativa podem agora se comunicar de forma sincrona através da Interface JavaScript (JSI), sem a necessidade de usar uma ponte assíncrona. Isso significa que seus módulos nativos personalizados podem agora chamar uma função de forma sincrona, retornar um valor e passar esse valor para outra função do Módulo Nativo.

No antigo sistema, para lidar com a resposta das chamadas de funções nativas, você precisava fornecer um callback e o valor retornado precisava ser serializável:

\

nativeModule

.getValue(value => {

nativeModule.doSomething(value);

});

No Novo Arquitetura, você pode fazer chamadas síncronas para funções nativas:

\

const value = nativeModule.getValue();

nativeModule.doSomething(value);

Com a Nova Arquitetura, você pode finalmente aproveitar todo o poder de uma implementação nativa em C++ enquanto ainda acessa-a por meio de APIs JavaScript/TypeScript. O Novo Sistema de Módulos suporta módulos escritos em C++, permitindo que você escreva seu módulo uma vez e ele funcione em todas as plataformas, incluindo Android, iOS, Windows e macOS. Implementar módulos em C++ permite um gerenciamento de memória mais fino e otimizações de desempenho.

Além disso, com Codegen, seus módulos podem definir um contrato tipado forte entre a camada JavaScript e a camada nativa. De nossa experiência, erros de tipo transfronteiriços são uma das fontes mais comuns de falhas em aplicativos multiplataforma. O Codegen permite superar esses problemas enquanto também gera código de boilerplate para você.

Finalmente, os módulos agora são carregados de forma preguiçosa: eles são carregados na memória apenas quando realmente necessário e não no início. Isso reduz o tempo de inicialização do aplicativo e mantém-o baixo à medida que a complexidade do aplicativo aumenta.

Bibliotecas populares como react-native-mmkv já estão vendo benefícios de migrar para os novos Módulos Nativos:

“As novas Native Modules simplificaram significativamente a configuração, o autolinking e a inicialização para react-native-mmkv. Obrigado à Nova Arquitetura, react-native-mmkv é agora uma módulo nativo puro em C++, permitindo que ele funcione em qualquer plataforma. A nova Codegen permite que o MMKV seja totalmente seguro contra tipos, corrigindo um problema de longa data de NullPointerReference, ao impor a segurança contra nulos e sendo capaz de chamar funções do módulo nativo de forma síncrona permitiu-nos substituir o acesso customizado JSI com a nova API do Módulo Nativo.”

Marc Rousavy, criador de react-native-mmkv

Novo Renderer

Também reescrevemos completamente o Native Renderer, adicionando vários benefícios:

  • Atualizações podem ser renderizadas em diferentes threads com prioridades diferentes.
  • A leitura da layout pode ser feita de forma síncrona e em diferentes threads.
  • O renderer é escrito em C++ e compartilhado entre todas as plataformas.

O novo Native Renderer agora armazena a hierarquia de visualização em uma estrutura de árvore imutável. Isso significa que a UI é armazenada de forma que não pode ser alterada diretamente, permitindo o processamento thread-safe das atualizações. Isso permite que ele lidere com várias árvores em andamento, cada uma representando uma versão diferente da interface do usuário. Como resultado, as atualizações podem ser renderizadas em segundo plano sem bloquear a UI (como durante transições) ou na thread principal (em resposta à entrada do usuário).

Com o suporte a múltiplas threads, o React pode interromper uma atualização de baixa prioridade para renderizar uma urgente, como aquelas geradas por entradas do usuário, e então retomar a atualização de baixa prioridade conforme necessário. O novo renderer também pode ler informações de layout de forma síncrona e em diferentes threads. Isso permite o cálculo em segundo plano para atualizações de baixa prioridade e leituras síncronas quando necessário, como reposicionar uma dica.

Finalmente, a reescrita do renderer em C++ permite que ele seja compartilhado entre todas as plataformas. Isso garante que o mesmo código funcione no iOS, Android, Windows, macOS e qualquer outra plataforma suportada pelo React Native, fornecendo capacidades de renderização consistentes sem necessidade de reimplementação para cada plataforma.

Isso é um passo significativo em direção à nossa Visão Multiplataforma. Por exemplo, a View Flattening era uma otimização para Android apenas para evitar árvores de layout profundas. O novo renderer, com núcleo compartilhado C++, traz essa funcionalidade ao iOS. Essa otimização é automática e não requer configuração, ela vem de graça com o renderer compartilhado.

Com essas mudanças, o React Native agora suporta totalmente recursos do Concurrent React como Suspense e Transitions, tornando mais fácil construir interfaces complexas que respondem rapidamente à entrada do usuário sem jank, atrasos ou saltos visuais. No futuro, usaremos essas novas capacidades para trazer melhorias adicionais aos componentes embutidos como FlatList e TextInput.

Bibliotecas populares como Reanimated já estão aproveitando o Novo Renderer:

“O Reanimated 4, atualmente em desenvolvimento, introduz um novo motor de animação que trabalha diretamente com o Novo Renderer, permitindo-lhe lidar com animações e gerenciar layout em diferentes threads. A arquitetura do Novo Renderer é o que realmente permite a construção dessas funcionalidades sem depender de várias contornações. Além disso, porque ele está implementado em C++ e compartilhado entre plataformas, grandes partes do Reanimated podem ser escritas uma vez, reduzindo problemas específicos da plataforma, minimizando o códigobase e simplificando a adoção para plataformas fora da árvore.”

Krzysztof Magiera, criador de Reanimated

O Loop de Eventos

A Nova Arquitetura nos permitiu implementar um modelo bem definido para o processamento do loop de eventos, conforme descrito nesta RFC. Esta RFC segue as especificações descritas no HTML Standard, e descreve como o React Native deve executar tarefas na thread JavaScript.

A implementação de um loop de eventos bem definido fecha as lacunas entre React DOM e React Native: o comportamento de uma aplicação React Native agora é mais próximo do comportamento de uma aplicação React DOM, tornando mais fácil aprender uma vez e escrever em qualquer lugar.

O loop de eventos traz muitos benefícios para o React Native:

  • A capacidade de interromper a renderização para processar eventos e tarefas
  • Alinhamento mais próximo com as especificações da web
  • Fundamentação para mais recursos do navegador

Com o Loop de Eventos, o React é capaz de ordenar previsivelmente atualizações e eventos. Isso permite que o React interrompa uma atualização de baixa prioridade com um evento de usuário urgente, e o Novo Renderer nos permite renderizar essas atualizações independentemente.

O Loop de Eventos também alinha o comportamento dos eventos e tarefas como temporizadores com as especificações da web, o que significa que o React Native funciona mais como algo familiar para os usuários na Web, permitindo uma melhor compartilhamento de código entre React DOM e React Native.

Isso também permite a implementação de recursos do navegador mais conformes como microtasks, MutationObserver, e IntersectionObserver. Esses recursos ainda não estão prontos para uso no React Native, mas estamos trabalhando para trazê-los em breve.

Finalmente, o Loop de Eventos e as mudanças do Novo Renderer para suportar a leitura da disposição de forma sincrona permitem que o React Native adicione um suporte adequado ao useLayoutEffect para ler informações de layout de forma sincrona e atualizar a interface do usuário no mesmo quadro. Isso permite que você posicione elementos corretamente antes de serem exibidos ao usuário.

Saiba mais sobre useLayoutEffect.

Removendo a Ponte

No Novo Arquitetura, também removemos completamente a dependência do React Native na ponte, substituindo-a por uma comunicação direta e eficiente entre JavaScript e código nativo usando JSI:

A remoção da ponte melhora o tempo de inicialização ao evitar a inicialização da ponte. Por exemplo, na arquitetura antiga, para fornecer métodos globais ao JavaScript, precisávamos iniciar um módulo em JavaScript durante a inicialização do aplicativo, causando um pequeno atraso no tempo de inicialização do aplicativo:

import {NativeTimingModule} from 'NativeTimingModule';

No Novo Arquitetura, podemos vincular diretamente métodos de C++:

\n  runtime.global().setProperty(runtime, "setTimeout", createTimer);\n
\n  setTimeout(() => {}, 100);\n

A reescrita também melhora a relatoria de erros, especialmente para falhas em JavaScript no início da inicialização e reduz falhas por comportamento indefinido. Se ocorrerem falhas, as novas React Native DevTools simplificam o depuramento e suportam a Novo Arquitetura.

A ponte permanece para compatibilidade com versões antigas para suportar uma migração gradual para a Nova Arquitetura. No futuro, removeremos completamente o código da ponte.

Migração Progressiva

Esperamos que a maioria dos aplicativos possa ser atualizada para a versão 0.76 com o mesmo esforço de qualquer outra atualização.

No momento da atualização para a versão 0.76, a Nova Arquitetura e o React 18 são ativados por padrão. No entanto, para usar as funcionalidades concorrentes e aproveitar ao máximo a Nova Arquitetura, seu aplicativo e bibliotecas precisarão ser gradualmente migradas para um suporte completo à Nova Arquitetura.

No momento da primeira atualização, seu aplicativo será executado na Nova Arquitetura com uma camada de interoperabilidade automática com a arquitetura antiga. Para a maioria dos aplicativos, isso funcionará sem alterações, mas há limitações conhecidas com a camada de interoperabilidade, pois ela não suporta o acesso aos Shadow Nodes personalizados ou às funcionalidades concorrentes.

Para usar as funcionalidades concorrentes, os aplicativos também precisarão ser atualizados para suportar Concurrent React seguindo as Regras do React. Para migrar seu código JavaScript para o React 18 e sua semântica, siga a Guia de atualização do React 18.

A estratégia geral é fazer com que seu aplicativo funcione na Nova Arquitetura sem quebrar o código existente. Você pode então migrar gradualmente seu aplicativo no próprio ritmo. Para novas interfaces que já migraram todos os módulos para a Nova Arquitetura, você pode começar a usar as funcionalidades concorrentes imediatamente. Para interfaces existentes, talvez seja necessário resolver alguns problemas e migrar módulos antes de adicionar funcionalidades concorrentes.

Colaboramos com as bibliotecas React Native mais populares para garantir o suporte à Nova Arquitetura. Mais de 850 bibliotecas já são compatíveis, incluindo todas as bibliotecas com mais de 200K downloads semanais (~10% das bibliotecas baixadas). Você pode verificar a compatibilidade da biblioteca com a Nova Arquitetura no site reactnative.directory:

Para mais detalhes sobre a atualização, consulte Como Atualizar abaixo.

Novas Funcionalidades

A Nova Arquitetura inclui suporte completo ao React 18, funcionalidades concorrentes e useLayoutEffect no React Native. Para uma lista completa das funcionalidades do React 18, consulte o post de blog sobre o React 18.

Transições

As transições são um novo conceito no React 18 para distinguir entre atualizações urgentes e não urgentes.

  • Atualizações urgentes refletem interações diretas, como digitar e pressionar botões.
  • Atualizações de transição transitam a interface do usuário de uma visualização para outra.

As atualizações urgentes precisam de resposta imediata para corresponder às nossas intuições sobre como os objetos físicos se comportam. No entanto, as transições são diferentes porque o usuário não espera ver cada valor intermediário na tela. Na Nova Arquitetura, o React Native é capaz de suportar a renderização de atualizações urgentes e de transição separadamente.

Geralmente, para a melhor experiência do usuário, uma única entrada do usuário deve resultar em tanto uma atualização urgente quanto uma não urgente. Assim como no ReactDOM, eventos como press ou change são tratados como urgentes e renderizados imediatamente. Você pode usar a API startTransition dentro de um evento de entrada para informar o React quais atualizações são “transições” e podem ser adiadas:

import{startTransition}from'react';
setCount(input);
startTransition(() => {
setNumberOfTiles(input);
});

A separação de eventos urgentes das transições permite uma interface do usuário mais responsiva e uma experiência do usuário mais intuitiva.

Aqui está uma comparação da arquitetura antiga sem transições e da nova arquitetura com transições. Imagine que cada bloco não é uma simples visualização com cor de fundo, mas um componente rico contendo imagens e outros componentes caros para renderizar. Depois de usar useTransition, você evita sobrecarregar seu aplicativo com atualizações e cair atrás.

Um vídeo demonstrando um aplicativo renderizando muitas visualizações (blocos) de acordo com uma entrada de controle deslizante. As visualizações são renderizadas em lotes à medida que o controle é ajustado rapidamente de 0 a 1000.

Antes: renderizando blocos sem marcar como transição.

Um vídeo demonstrando um aplicativo renderizando muitas visualizações (blocos) de acordo com uma entrada de controle deslizante. As visualizações são renderizadas em lotes à medida que o controle é ajustado rapidamente de 0 a 1000. Há menos lotes de renderização em comparação ao vídeo anterior.

Depois: renderizando blocos com transições para interromper renders em andamento de estado obsoleto.

Para mais informações, consulte Suporte ao Renderizador Concurrente e Recursos.

Batchamento Automático

Quando você atualizar para a Nova Arquitetura, desfrutará do batchamento automático do React 18.

O batchamento automático permite que o React agrupe mais atualizações de estado durante a renderização para evitar a renderização dos estados intermediários. Isso torna o React Native mais rápido e menos suscetível a travamentos, sem nenhum código adicional do desenvolvedor.

Um vídeo demonstrando um aplicativo renderizando muitas visualizações de acordo com uma entrada de controle deslizante. O valor do controle é ajustado de 0 a 1000 e a IU lentamente se atualiza para renderizar 1000 visualizações.

Antes: renderizando atualizações frequentes de estado com o renderizador legado.

Um vídeo demonstrando um aplicativo renderizando muitas visualizações de acordo com uma entrada de controle deslizante. O valor do controle é ajustado de 0 a 1000 e a IU resolve para 1000 visualizações mais rápido que o exemplo anterior, sem tantos estados intermediários.

Depois: renderizando atualizações frequentes de estado com batchamento automático.

No antigo arquitetura, mais estados intermediários são renderizados e a IU continua se atualizando mesmo quando o controle para de se mover. A Nova Arquitetura, renderiza menos estados intermediários e conclui a renderização muito antes graças ao batchamento automático das atualizações.

Para obter mais informações, consulte Suporte para Renderizador Concurrente e Recursos.

useLayoutEffect

A partir do Loop de Eventos e da capacidade de ler a layout sincronamente, na Nova Arquitetura adicionamos suporte adequado para useLayoutEffect no React Native.

No antigo arquitetura, você precisava usar o evento assíncrono onLayout para ler informações de layout de uma visualização (que também era assíncrona). Como resultado, haveria pelo menos um quadro onde o layout estava incorreto até que o layout fosse lido e atualizado, causando problemas como dicas posicionadas em local errado:

const onLayout = React.useCallback(event => {
  ref.current?.measureInWindow((x, y, width, height) => {

A nova arquitetura resolve isso permitindo acesso síncrono às informações de layout em useLayoutEffect:



useLayoutEffect(() => {

Esta alteração permite que você leia informações de layout de forma síncrona e atualize a IU no mesmo quadro, permitindo posicionar elementos corretamente antes de serem exibidos ao usuário:

Uma visualização que está se movendo para os cantos da viewport e no centro com uma dica de ferramenta renderizada acima ou abaixo dela. A dica de ferramenta é renderizada após um curto atraso depois que a visualização move

No antigo arquitetura, o layout era lido assincronamente em onLayout, causando um atraso na posição da dica de ferramenta.

Uma visualização que está se movendo para os cantos da viewport e no centro com uma dica de ferramenta renderizada acima ou abaixo dela. A visualização e a dica de ferramenta se movem em uníssono.

Na Nova Arquitetura, o layout pode ser lido em useLayoutEffect de forma síncrona, atualizando a posição da dica de ferramenta antes de exibi-la.

Para mais informações, consulte a documentação sobre Layout e Efeitos Síncronos.

Suporte Completo para Suspense

Suspense permite especificar de forma declarativa o estado de carregamento para uma parte da árvore de componentes se ainda não estiver pronta para ser exibida:

<Suspensefallback={<Spinner/>}>

<Comments/>

</Suspense>

Introduzimos uma versão limitada de Suspense há alguns anos, e o React 18 adicionou suporte completo. Até agora, o React Native não era capaz de suportar a renderização concorrente para Suspense.

A Nova Arquitetura inclui suporte completo para Suspense introduzido no React 18. Isso significa que você pode usar Suspense no React Native para lidar com estados de carregamento para seus componentes, e o conteúdo suspenso renderizará em segundo plano enquanto o estado de carregamento é exibido, dando prioridade maior à entrada do usuário no conteúdo visível.

Para mais informações, consulte a RFC para Suspense no React 18.

Como Atualizar

Para atualizar para a versão 0.76, siga os passos no post de lançamento. Como esta versão também atualiza o React para a versão 18, você precisará seguir o Guia de Atualização do React 18.

Esses passos devem ser suficientes para a maioria dos aplicativos para atualizar para a Nova Arquitetura, graças à camada de interoperabilidade com a antiga arquitetura. No entanto, para aproveitar ao máximo a Nova Arquitetura e começar a usar recursos concorrentes, você precisará migrar seus módulos nativos personalizados e componentes nativos para suportar as novas APIs de Módulo Nativo e Componente Nativo.

Sem migrar seus módulos nativos personalizados, você não terá os benefícios compartilhados do C++, chamadas de método síncronas ou segurança de tipo do codegen. Sem migrar seus componentes nativos, você não será capaz de usar recursos concorrentes. Recomendamos migrar todos os módulos e componentes nativos para a Nova Arquitetura o mais rápido possível.

Em uma futura versão, removeremos a camada de interoperabilidade e os módulos precisarão suportar a Nova Arquitetura.

Aplicativos

Se você é um desenvolvedor de aplicativo, para suportar completamente a Nova Arquitetura, precisará atualizar suas bibliotecas, componentes nativos personalizados e módulos nativos personalizados para suportá-la completamente.

Nos colaboramos com as bibliotecas React Native mais populares para garantir o suporte à Nova Arquitetura. Você pode verificar a compatibilidade das bibliotecas com a Nova Arquitetura no site reactnative.directory.

Caso alguma das bibliotecas que seu aplicativo depende ainda não seja compatível, você pode:

  • Abra um problema com a biblioteca e peça ao autor para migrar para a Nova Arquitetura.
  • Caso a biblioteca não seja mantida, considere alternativas com as mesmas funcionalidades.
  • Desativar a Nova Arquitetura enquanto essas bibliotecas são migradas.

Caso seu aplicativo tenha módulos nativos personalizados ou componentes nativos, esperamos que eles funcionem bem graças à nossa camada de interoperabilidade. No entanto, recomendamos atualizá-los para as novas APIs de Módulo Nativo e Componente Nativo para suportar completamente a Nova Arquitetura e adotar recursos concorrentes.

Por favor, siga essas guias para migrar seus módulos e componentes para a Nova Arquitetura:

Bibliotecas

Caso você seja um mantenedor de biblioteca, por favor teste que sua biblioteca funciona com a camada de interoperabilidade. Se não funcionar, abra um problema no Grupo de Trabalho da Nova Arquitetura.

Para suportar completamente a Nova Arquitetura, recomendamos migrar sua biblioteca para as novas APIs de Módulo Nativo e Componente Nativo o mais rápido possível. Isso permitirá que os usuários de sua biblioteca aproveitem ao máximo a Nova Arquitetura e suportem recursos concorrentes.

Você pode seguir essas guias para migrar seus módulos e componentes para a Nova Arquitetura:

Desativar

Caso, por qualquer motivo, a Nova Arquitetura não esteja funcionando corretamente em seu aplicativo, sempre há a opção de desativá-la até que você esteja pronto para ativá-la novamente.

Para desativar a Nova Arquitetura:

  • No Android, modifique o arquivo android/gradle.properties e desative a bandeira newArchEnabled:

-newArchEnabled=true

+newArchEnabled=false

  • No iOS, você pode reinstalar as dependências executando o comando:

RCT_NEW_ARCH_ENABLED=0 bundle exec pod install

Agradecimentos

Entregar a Nova Arquitetura à comunidade de código aberto foi um esforço enorme que nos levou vários anos de pesquisa e desenvolvimento. Queremos dedicar um momento para agradecer a todos os membros atuais e antigos da equipe React que ajudaram a alcançar esse resultado.

Também somos extremamente gratos a todos os parceiros que colaboraram conosco para tornar isso possível. Em particular, gostaríamos de destacar:

  • Expo, por adotar a Nova Arquitetura desde cedo e apoiar o trabalho na migração das bibliotecas mais populares.
  • Software Mansion, por manter bibliotecas cruciais no ecossistema, por migrá-las para a Nova Arquitetura desde cedo e por toda a ajuda na investigação e resolução de vários problemas.
  • Callstack, por manter bibliotecas cruciais no ecossistema, por migrá-las para a Nova Arquitetura desde cedo e pelo apoio ao trabalho na CLI da Comunidade.
  • Microsoft, por adicionar a implementação da Nova Arquitetura para react-native-windows e react-native-macos bem como em vários outros ferramentas de desenvolvedor.
  • Expensify, Kraken, Bluesky e Brigad por serem pioneiros na adoção da Nova Arquitetura e relatando vários problemas para que pudéssemos corrigi-los para todos os demais.
  • Todos os mantenedores de bibliotecas independentes e desenvolvedores que contribuíram com a Nova Arquitetura testando-a, corrigindo alguns dos problemas e abrindo questões sobre pontos obscuros para que pudéssemos esclarecê-los.

Fonte original

Conteúdo traduzido e adaptado pela redação do Notícias Mobile. Confira também a matéria na fonte original.

Leia a matéria completa