React Native 0.82 - Uma Nova Era · React Native

Hoje estamos animados em lançar o React Native 0.82: a primeira versão do React Native que roda inteiramente na New Architecture.

Este é um lançamento importante para o React Native e acreditamos que marca o início de uma nova era. Em futuras versões, removeremos o código restante da Legacy Architecture para reduzir o tamanho de instalação e simplificar a base de código.

Ainda mais, a 0.82 também traz um opt-in experimental para uma versão mais recente do Hermes chamada Hermes V1. Também estamos habilitando várias funcionalidades do React ao atualizar a versão do React para 19.1.1 e fornecendo suporte para APIs DOM Node.

Principais pontos​

Apenas a New Architecture​

No React Native 0.76 anunciamos que A New Architecture se tornou a arquitetura padrão do React Native.

Desde então, a New Architecture foi testada e refinada e estamos confiantes em fazer dela a única arquitetura para esta e futuras versões do React Native.

Isto significa que se você tentar definir newArchEnabled=false no Android ou instalar CocoaPods com RCT_NEW_ARCH_ENABLED=0 no iOS, essas configurações serão ignoradas e seu aplicativo ainda rodará usando a New Architecture.

Como migrar​

Se você ainda não migrou seu projeto para a New Architecture, recomendamos primeiro migrar seu projeto para o React Native 0.81 ou Expo SDK 54. Essas são as últimas versões que permitem usar a Legacy Architecture. Elas contêm avisos e melhorias de desempenho especificamente para ajudar na migração para a New Architecture.

Em seguida, ative a New Architecture no 0.81 e verifique se seu aplicativo está funcionando corretamente.
Uma vez que você esteja usando a New Architecture em 0.81, pode atualizar com segurança para o React Native 0.82 que impede de ativar a Legacy Architecture.

Caso uma dependência externa incompatível esteja impedindo sua migração para a New Architecture, recomendamos entrar em contato diretamente com os mantenedores da biblioteca.

Se um bug no React Native core estiver bloqueando sua migração, recomendamos entrar em contato conosco através do nosso rastreador de problemas.

Camadas de interoperação e compatibilidade com bibliotecas 3P​

Vamos manter as camadas de interoperação no código base por um tempo previsível. Todas as classes e funções necessárias pelas camadas de interoperação não serão removidas em breve. Vamos compartilhar atualizações futuras sobre a remoção das Camadas de Interoperação.

Também verificamos que as bibliotecas 3P que oferecem compatibilidade com ambas as arquiteturas continuarão funcionando com o 0.82 onde a New Architecture é a única arquitetura.

Remoção de Classes da Arquitetura Legado​

Para garantir a compatibilidade com versões antigas e reduzir as alterações quebram, não estamos removendo nenhuma API da Arquitetura Legada do núcleo do React Native nesta versão. A remoção da Arquitetura Legado permitirá economizar significativamente no tamanho geral do pacote, portanto a remoção está programada para começar na próxima versão do React Native.

Você pode encontrar mais informações em RFC0929: Remoção da Arquitetura Legado do React Native.

Hermes Experimental V1​

O React Native 0.82 adiciona suporte para optar por entrar no Hermes V1.

Hermes V1 é a próxima evolução do Hermes. Nós temos experimentado com ele internamente em nossas aplicações, e agora é hora da comunidade tentá-lo também. Ele vem com melhorias no compilador e na VM que impulsionam o desempenho do Hermes.

Com testes iniciais e benchmarks, o Hermes V1 supera o atual Hermes em várias situações. Nós vimos melhorias no tempo de carregamento do pacote e TTI. As melhorias dependem fortemente dos detalhes das suas aplicações.

No app Expensify, uma aplicação real e complexa, vimos as seguintes melhorias:

Para Total TTI, medimos o tempo que leva do carregamento do pacote até quando a primeira tela no aplicativo é renderizada e interativa.

Para Conteúdo TTI, medimos o tempo que leva para um componente ser interativo, começando desde a primeira renderização do próprio componente.

O Hermes V1 ainda não contém a compilação JS-to-native (anteriormente conhecida como “Hermes Estático”) ou a compilação JIT que foi apresentada durante React Native EU 2023. Nós ainda estamos testando essas funcionalidades, e compartilharemos mais à medida que avançarmos.

Como Habilitar o Hermes V1​

Para testar o Hermes V1 no seu próprio projeto, use os seguintes passos:

1. Força a resolução da versão experimental do pacote de compilador Hermes V1 modificando a seção correspondente no seu arquivo package.json (observe que a convenção de versionamento atual é apenas para a fase experimental do Hermes V1):

"resolutions": {
    "hermes-compiler": "250829098.0.1"
}

"overrides": {
    "hermes-compiler": "250829098.0.1"
}

2. Habilita o Hermes V1 para Android adicionando hermesV1Enabled=true dentro do arquivo android/gradle.properties:

Também, configure o React Native para construir a partir da fonte editando android/settings.gradle:

  includeBuild('../node_modules/react-native') {
      dependencySubstitution {
          substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))

substitute(Esta versão do React contém suporte completo para pilhas de proprietários para o React Native. No React Native 0.80, quando lançamos suporte para a versão 19.1.0, mencionamos que as pilhas de proprietários não estavam totalmente suportadas se você estava usando o plugin Babel @babel/plugin-transform-function-name. Esta versão remove essa restrição e habilita as pilhas de proprietários para todos os usuários do React Native.

ANTES	DEPOIS

O React 19.1.1 também melhora a confiabilidade do useDeferredValue e startTransition em um limite Suspense para o React Native. Esses são recursos essenciais do React, projetados para aumentar a resposta da aplicação. Anteriormente, ambos mostravam incorretamente o componente de fallback quando usados junto com um limite Suspense no React Native. Com o React 19.1.1, eles agora desempenham consistentemente como esperado no React Native, alinhando seu comportamento ao da Web.

DOM Node APIs​

A partir do React Native 0.82, os componentes nativos fornecerão nós semelhantes ao DOM via refs.

Anteriormente, os componentes nativos forneciam objetos específicos do React Native com apenas alguns métodos como measure e setNativeProps. Após esta versão, eles fornecerão nós implementando um subconjunto da API DOM para navegar na árvore de UI, medir o layout e mais como no Web. Por exemplo:

\
functionMyComponent(props){\
\
const ref =useRef();\
\
\
\
useEffect(()=>{\
\
const element = ref.current;\

element.parentNode;

element.parentElement;

element.childNodes;

element.children;

const bounds = element.getBoundingClientRect();

const doc = element.ownerDocument;

const maybeElement = doc.getElementById('some-view');

element.measure((x, y, width, height, pageX, pageY) => {

})

])

Ao adicionalmente, isso expõe o acesso a nós folha de texto (criados pelo componente Text) e nós de documento representando nós raiz do React Native.

Esta é uma mudança compatível com versões anteriores, pois os novos nós continuarão implementando os métodos legados (como measure).

Para mais informações, consulte nossa documentação.

Outras mudanças

APIs de Desempenho da Web (Canário)

O React Native agora implementa um subconjunto das APIs de desempenho disponíveis na web:

• Tempo de Alta Resolução: define performance.now() e performance.timeOrigin.
• Linha do Tempo de Desempenho: define PerformanceObserver e métodos para acessar entradas de desempenho no objeto performance (getEntries(), getEntriesByType(), getEntriesByName()).
• Tempo do Usuário: define performance.mark e performance.measure.
• API de Tempo de Eventos: define tipos de entrada event relatados ao PerformanceObserver.
• API de Tarefas Longas: define tipos de entrada longtask relatados ao PerformanceObserver.

Eles permitem rastrear diferentes aspectos do desempenho em seu aplicativo durante a execução (para telemetria) e serão visíveis na seção de desempenho no React Native DevTools (disponível em uma futura versão do React Native).

Eles estão atualmente disponíveis apenas no nível de lançamento canário, e serão lançados como estáveis em uma futura versão do React Native.

Tipo de Construção de Depuração Otimizada para Android

A partir do React Native 0.82, você poderá usar o tipo de construção debugOptimized para acelerar sua experiência de desenvolvimento.

Historicamente, o Android cria duas variantes de construção padrão:

• debug, usado por padrão durante o desenvolvimento e que permite conectar-se às várias ferramentas de depuração, como React Native DevTools, Metro, JVM do Android e C++ debugger.
• release, usado ao enviar seu aplicativo para produção. Está totalmente otimizado, com obfuscation e otimização que dificultam a depuração.

A maioria dos desenvolvedores de React Native não precisará usar o C++ debugger durante o desenvolvimento, então introduzimos o tipo de construção debugOptimized.

Com debugOptimized, suas animações e re-rendering serão mais rápidas porque você está executando uma build do React Native com várias otimizações C++ habilitadas. Ao mesmo tempo, ainda será possível usar o React Native Dev Tools para depurar seu código JavaScript.

Quando usar debugOptimized, não será possível usar os debuggers nativos C++, mas você ainda poderá usá-los se usar o tipo de construção debug.

Para executar a variante debugOptimized do seu aplicativo, você pode invocar:

Você pode ver o debugOptimized em ação nestes exemplos onde estamos renderizando várias animações na tela.

A build rodando debug está funcionando em ~20FPS enquanto a debugOptimized está funcionando em ~60FPS:

debug	debugOptimized

Quebras de compatibilidade

Rejeições de promessa sem tratamento agora geram console.error

Seguindo a melhoria na relação de erros JavaScript sem tratamento na versão anterior, agora estaremos relatando rejeições de promessa através desse mecanismo também:

Devido a um bug, essas foram totalmente engolidas e ignoradas anteriormente, então espere que alguns erros pré-existentes surjam após a atualização para React Native 0.81. Por essa razão, erros pré-existentes também podem surgir em erros JavaScript relatados ao seu backend e criar um aumento nas novas relações.

Outras Alterações que Quebram a Compatibilidade

Geral

• Mova ReactNativeFeatureFlags para src/private
  • No geral, você não deve depender de ReactNativeFeatureFlags, pois é uma API privada.
• O tipo de Appearance.setColorScheme() foi atualizado para deixar de aceitar valores nulos
  • No caso limite que o esquema de cores precisa ser reiniciado, use 'unspecified' em vez de null/undefined.

iOS

• Migrou RCTDisplayLink da API legada RCTModuleData, pois planejamos removê-la no futuro.

Android

• A classe com.facebook.react.bridge.JSONArguments foi removida porque estava acidentalmente marcada como public
• Dépreciosou MessageQueueThreadPerfStats
  • Nós depreciamos essa API e a substituímos por um stub. Você não deve confiar mais em estatísticas dessa API, pois as estatísticas fornecidas eram inconfiáveis.
• Atualizou o Gradle de 8.x para 9.0.0
  • A lista completa das mudanças na próxima versão estável major do Gradle 9.0.0 está disponível aqui, mas esperamos que não haja impacto algum para os usuários.

C++

• Excluiu as cabeçalhos de compatibilidade com versões antigas para CallbackWrapper.h / LongLivedObject.h
  • O include correto para esses cabeçalhos é #include <react/bridging/LongLivedObject.h> e #include <react/bridging/CallbackWrapper.h>.
  • Você não deve usar os includes antigos sob #import <ReactCommon/….h>

Consulte a lista completa de alterações que quebram a compatibilidade no CHANGELOG para 0.82.

Agradecimentos

O React Native 0.82 contém mais de 868 commits de 93 contribuidores. Obrigado pelo trabalho duro!

Queremos enviar um agradecimento especial aos membros da comunidade que enviaram contribuições significativas nesta versão:

Atualizar para 0.82

Use o React Native Upgrade Helper para visualizar as alterações de código entre versões do React Native em projetos existentes, além da documentação sobre atualização para novas versões.

Para criar um novo projeto:

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

Se você usa Expo, o React Native 0.82 estará disponível como parte das releases expo@canary.

O próximo SDK, SDK 55, será enviado com a próxima release estável do React Native: 0.83.