Estamos muito animados em anunciar o lançamento do React Native 0.83!
Esta versão inclui o React 19.2, novas funcionalidades significativas para os DevTools do React Native e suporte às APIs Web Performance e Intersection Observer (Canário). Este é também o primeiro lançamento do React Native sem alterações quebradoras visíveis pelo usuário.
Principais pontos
React 19.2
Este lançamento inclui o React 19.2, trazendo as novas APIs <Activity> e useEffectEvent para o React Native.
No momento do lançamento, react-native@0.83.0 depende de react@19.2.0, e você pode ter visto recentemente o Vulnerabilidade de Segurança Crítica em React Server Components.
Queremos enfatizar que o React Native NÃO é afetado diretamente por esta vulnerabilidade, pois não depende dos pacotes impactados:
react-server-dom-webpackreact-server-dom-parcelreact-server-dom-turbopack
No entanto, se você está usando o React Native como parte de um mônorepositório onde esses pacotes podem estar presentes, verifique e atualize-os imediatamente.
Vamos atualizar todas as dependências do React para 19.2.1 em nossa próxima versão corretiva.
<Activity>
<Activity> permite que você divida seu aplicativo em "atividades" que podem ser controladas e priorizadas. Você pode usar Activity como uma alternativa para renderizar condicionalmente partes do seu aplicativo, e atualmente ele suporta 2 modos: 'visible' e 'hidden'.
hidden: oculta as crianças, desmonta os efeitos e adia todas as atualizações até que o React não tenha mais nada para trabalhar.visible: mostra as crianças, monta os efeitos e permite processar normalmente as atualizações.
Uma característica interessante das árvores ocultas usando <Activity mode='hidden'> é que elas preservam seu estado. Portanto, quando se tornarem visíveis novamente, por exemplo, mantêm o status de pesquisa e a seleção de uma interação anterior do usuário.
| React 19.1.1 | React 19.2.1 |
|---|---|
 |  |
Você pode ler mais sobre <Activity> nos documentos do React.
useEffectEvent
Um padrão comum com useEffect é notificar o código do aplicativo sobre algum tipo de "evento" de um sistema externo. O problema com essa abordagem é que uma alteração em qualquer valor usado dentro de tal evento fará com que o efeito circundante seja reexecutado.
Para resolver isso, a maioria dos usuários desativa a regra do linter e exclui a dependência. Mas isso pode levar a bugs, pois o linter não poderá mais ajudar você a manter as dependências atualizadas se precisar atualizar o Efeito posteriormente.
Com useEffectEvent, você pode separar a parte do "evento" dessa lógica fora do Efeito que o emite.
Você pode ler mais sobre useEffectEvent nos documentos do React.
No 0.83, estamos animados em entregar algumas funcionalidades e melhorias na qualidade de vida esperadas há muito tempo para os DevTools do React Native.
Painéis de Rede e Desempenho
A inspeção da rede e o rastreamento de desempenho são duas novas capacidades poderosas nos DevTools do React Native, disponíveis hoje.
Inspeção da rede, agora disponível para todos os aplicativos React Native, permite que você visualize e entenda as solicitações de rede feitas pelo seu aplicativo. As solicitações registradas fornecem detalhes metadados como tempos e cabeçalhos enviados/recebidos, bem como prévias das respostas. E — pela primeira vez — você pode usar a guia Iniciador para ver onde em seu código uma solicitação de rede teve origem.
💡 Cobertura de eventos de rede, suporte ao Expo
Quais eventos de rede são capturados?
Hoje, registramos todas as chamadas de rede através do fetch(), XMLHttpRequest e <Image> — com suporte para bibliotecas personalizadas de rede, como o Expo Fetch, chegando em breve.
Diferenças da Rede do Expo
Por isso, os aplicativos usando o Expo continuarão a ver o painel "Expo Network" — uma implementação separada pelo quadro do Expo que registrará essas fontes de solicitação adicionais mas terá recursos ligeiramente reduzidos.
- Cobertura para eventos de rede específicos ao Expo.
- Sem suporte a iniciador de solicitações.
- Sem integração com o painel de desempenho.
Estamos trabalhando com o Expo para integrar o Expo Fetch e bibliotecas personalizadas de rede com nossa nova linha de montagem de inspeção da rede em futuras versões.
Rastreamento de desempenho permite que você registre uma sessão de desempenho dentro do seu aplicativo para entender como o código JavaScript está sendo executado e quais operações levaram mais tempo. No React Native, mostramos a execução de JavaScript, rastros de desempenho do React, eventos de rede e tempos personalizados User Timings, renderizados em um único cronograma de desempenho.
Junto com o suporte às APIs de Desempenho da Web no 0.83, esta é uma poderosa coleção de recursos fornecendo visibilidade granular sobre o que pode estar tornando seus aplicativos React Native lentos. Encorajamos todos a experimentar o painel de desempenho e incorporá-lo em sua rotina diária.
Saiba mais sobre nossas novas funcionalidades dos DevTools do React Native e rastros de desempenho do React.
Novo aplicativo para desktop
Anteriormente, os DevTools do React Native eram iniciados em uma janela de navegador e exigiam a instalação do Chrome ou Edge. Hoje, estamos introduzindo uma experiência para desktop muito melhorada com nosso novo aplicativo embalado para desktop. Ele inclui:
- A mesma configuração sem instalação como antes, agora com necessidade zero de navegador web.
- Inicialização mais rápida por meio de um binário desktop leve e notarizado. Em casos raros em que isso não pode ser baixado (como uma firewall corporativa), caímos no fluxo anterior de inicialização via navegador.
- Melhor gerenciamento de janelas, com melhor multitarefa no macOS, levantamento automático ao atingir um breakpoint, levantamento automático quando reconectado ao mesmo aplicativo e arranjo de janela salvo na relançagem.
- Melhor confiabilidade executando DevTools separadamente do perfil pessoal do seu navegador. Em particular, isso resolve os relatórios de bugs que recebemos sobre certas extensões pré-instaladas do Chrome causando o colapso dos React Native DevTools.
Observadores de Interseção (Canário)
Como parte do nosso esforço para trazer APIs web para React Native, adicionamos suporte para IntersectionObserver na versão canário para 0.83.
IntersectionObserver permite observar de forma assíncrona a interseção do layout entre um elemento-alvo e seu ancestral. Consulte nossa API e documentação de implementação para mais detalhes. Também incluímos exemplos no RNTester.
Outras mudanças
APIs de Desempenho Web como estáveis
Como introduzido em 0.82, o React Native agora implementa um subconjunto das APIs de Desempenho disponíveis na Web — agora lançadas como estáveis:
- Tempo de Alta Resolução: define
performance.now()eperformance.timeOrigin. - Linha do Tempo de Desempenho: define
PerformanceObservere métodos para acessar entradas de desempenho no objeto performance (getEntries(),getEntriesByType(),getEntriesByName()). - User Timing: define
performance.markeperformance.measure. - API de Tempo de Evento: define tipos de entrada
eventrelatados aPerformanceObserver. - API Long Tasks: define tipos de entrada
longtaskrelatados aPerformanceObserver.
Essas APIs permitem rastrear diferentes aspectos do desempenho em seu aplicativo, visíveis na aba Performance no React Native DevTools, bem como em tempo de execução via PerformanceObserver.
PerformanceObserver também funciona em builds de produção, abrindo novas oportunidades para capturar métricas reais de desempenho nos seus aplicativos.
Experimental - Hermes V1
Hermes V1 é a próxima evolução do Hermes, com melhorias no compilador e na VM que significativamente aumentam o desempenho do JavaScript.
No React Native 0.82, lançamos Hermes V1 como uma opção experimental. E no 0.83, o Hermes V1 inclui melhorias adicionais de desempenho.
💡 Ativando Hermes V1
Aviso: Enquanto o Hermes V1 está em fase experimental, você precisará construir o React Native a partir da fonte para testá-lo.
Para testar o Hermes V1 no seu próprio projeto, use os seguintes passos:
- Force seu gerenciador de pacotes a resolver a versão experimental do pacote compilador Hermes V1 modificando a seção correspondente do seu arquivo package.json (observe que a convenção de versionamento atual é apenas para a fase experimental do Hermes V1):
package.json
{"resolutions":{"hermes-compiler":"250829098.0.4"}
-
Habilite o Hermes V1 para Android adicionando hermesV1Enabled=true dentro de
android/gradle.properties:android/gradle.properties
Também, configure o React Native para construir a partir da fonte editando android/settings.gradle:
android/settings.gradle
includeBuild('../node_modules/react-native') {
dependencySubstitution {
substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
}
}
-
Habilite o Hermes V1 para iOS instalando pods com a variável de ambiente
RCT_HERMES_V1_ENABLED=1.RCT_HERMES_V1_ENABLED=1 bundle exec pod install
Lembre-se de que o Hermes V1 não é compatível com as builds pré-compiladas do React Native, então certifique-se de que você não use a bandeira
RCT_USE_PREBUILT_RNCOREao instalar pods. -
Para confirmar se seu aplicativo está executando o Hermes V1, execute o seguinte código dentro do seu aplicativo ou no console DevTools. Este código retornará a versão do Hermes, que deve corresponder à versão especificada no passo 1 (250829098.0.1):
HermesInternal.getRuntimeProperties()['OSS Release Version'];
Experimental - Compile out the Legacy Architecture on iOS
In this release, we are adding a new flag for iOS that allows you to compile out the Legacy Architecture from the codebase. If your app is already on the New Architecture, you can try to remove the legacy architecture code by installing your pods with:
RCT_REMOVE_LEGACY_ARCH = 1 bundle exec pod installThis should reduce both the build time and the size of your app. The improvements depend on how many third party libraries you are using: in our tests, using a new app without dependencies, the build time was reduced from 73.0 seconds to 58.2 seconds, and the app size went from 51.2 Mb to 48.2 Mb.
RCT_REMOVE_LEGACY_ARCHis not compatible with React Native precompiled binaries. If you are using precompiled binaries, you'll need to reinstall the pods and build the app from source.Experimental - Debug your precompiled binaries on iOS
In this release, we've implemented the ability to debug the React Native code that is shipped with a precompiled binary. This is primarily helpful to library maintainers or if you are developing a native module or a native component.
To debug the binary code shipped with the React Native precompiled binary, follow these steps:
bundle exec pod cache clean --all bundle exec pod deintegrate RCT_USE_RN_DEP=1 RCT_USE_PREBUILT_RNCORE=1 RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS=1 bundle exec pod install open <your-project>.xcworkspaceA magia é feita pela bandeira
RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS, que instrui o CocoaPods a baixar os arquivos dSYM do React Native e expandi-los na pasta correta.Neste ponto, você pode colocar um breakpoint no seu aplicativo, por exemplo em
AppDelegate.swift, e compilar e executar o aplicativo pelo Xcode.Quando a aplicação para de execução, abra o console do Xcode e execute o comando LLDB:
add-dsym <caminho-para-seu-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64_x86_64-simulator/React.framework/dSYMs/React.framework.dSYM add-dsym <caminho-para-seu-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64/React.framework/dSYMs/React.framework.dSYMAgora você pode entrar no código do React Native.
Mudanças que rompeam
Nos estamos trabalhando para tornar as releases do React Native mais previsíveis e fáceis de atualizar. O React Native 0.83 é a primeira release sem alterações quebradoras visíveis para o usuário.
Se você está no React Native 0.82, deve ser capaz de atualizar seu aplicativo para o React Native 0.83 sem fazer alterações no código do seu aplicativo.
Para saber mais sobre o que consideramos uma mudança quebradora, dê uma olhada nesta artigo.
Deprecações
Esta release inclui duas deprecations específicas para Android:
- Networking: O método
sendRequestInternalestá sendo descontinuado e agora é obsoleto. - Animação: os métodos
startOperationBatchefinishOperationBatchestão agora obsoletos.
Agradecimentos
O React Native 0.83 contém mais de 594 commits de 56 contribuidores. Obrigado pelo seu trabalho duro!
Queremos enviar um agradecimento especial para aqueles membros da comunidade que enviaram contribuições significativas nesta release:
Atualizar para o 0.83
Por favor, use o React Native Upgrade Helper para ver as alterações de código entre versões do React Native em projetos existentes, além da documentação sobre atualização.
Para criar um novo projeto:
npx @react-native-community/cli@latest init MyProject --version latestSe você usa o Expo, o React Native 0.83 estará disponível na SDK 55, que será lançada em janeiro de 2026.
Versões suportadas
O 0.83 é agora a versão mais recente e estável do React Native e o 0.80.x passa para não suportada. Para obter mais informações, consulte a política de suporte do React Native.
- Networking: O método