React Native 0.78 — React 19 e mais

8 min readAug 30, 2025

19 de fevereiro de 2025 · 11 min de leitura

Hoje estamos entusiasmados em lançar o React Native 0.78!

Esta versão traz o React 19 em React Native e alguns outros recursos relevantes, como suporte nativo para drawables Android Vector e melhor integração brownfield para iOS.

Destaques

React 19

O React 19 já está disponível no React Native!

O React 19 requer a atualização do seu aplicativo, pois introduzimos algumas alterações em relação ao React 18. Por exemplo, removemos algumas APIs como propTypes, e você precisa ajustar seu aplicativo para torná-lo compatível com a nova versão do React.

Siga nosso passo a passo instruções para atualizar seu aplicativo para React 19.

Após a migração, você poderá aproveitar todos os novos recursos do React, incluindo (de forma não exaustiva):

Ações: estas são funções que usam transições assíncronas. As transições assíncronas gerenciam automaticamente o envio de dados para você: elas lidam com estados pendentes, atualizações otimistas, tratamento de erros e muito mais.
useActionState: um gancho utilitário construído sobre Ações. Ele pega uma função e retorna uma ação encapsulada para chamar. Quando a ação for chamada, ela retornará o último resultado da Ação e seu pending estado.
useOtimista: um novo gancho que simplifica a exibição otimista do estado final de uma atualização enquanto a solicitação assíncrona está em andamento. Se a solicitação apresentar erros, o React retornará ao valor anterior automaticamente.
use: esta é uma nova API que permite acesso a recursos durante a renderização. Agora você pode ler uma promessa ou um contexto com use e o React suspenderá até que eles sejam resolvidos.
ref como props: agora podes passar ref como um prop como você faz com qualquer outro acessório. Os componentes funcionais não precisarão mais forwardRef e você pode migrar seus componentes agora.
E muitos outros

Para obter uma lista completa dos novos recursos disponíveis, dê uma olhada no Postagem do blog de lançamento do React 19.

Compilador React

O React Compiler é uma ferramenta de tempo de construção projetada para otimizar aplicativos React aplicando memorização automaticamente. Embora os desenvolvedores possam usar manualmente APIs como useMemo, useCallback, e React.memo para evitar a recomputação desnecessária de partes inalteradas de um aplicativo, eles também podem esquecer ou usar indevidamente essas otimizações. O React Compiler aborda isso aproveitando sua compreensão do JavaScript e do Regras de Reagir para memorizar automaticamente valores ou grupos de valores dentro de componentes e ganchos.

Com esta versão, simplificamos o processo para habilitar o React Compiler em seus aplicativos React Native. Em versões anteriores, você tinha que instalar dois pacotes: o compilador e seu tempo de execução. Depois que esses pacotes foram instalados, você teve que configurar um plugin Babel para habilitar o React Compiler através do Metro.

Agora, você só precisa instalar o compilador em si e configurar o plugin Babel. Para saber como habilitá-lo, você pode seguir nosso passo a passo guia.

Para verificar se o compilador está em execução, você pode abrir o React Native DevTools: você deve ver que os componentes que são memorizados têm o Memo ✨ etiqueta anexada a eles no Inspetor de Componentes.

Se você quiser saber mais sobre o React Compiler, estes são recursos úteis:

Compilador React documentos
Mergulho profundo no compilador React

Rumo a lançamentos menores e mais rápidos

Estamos atualizando nosso processo de lançamento para enviar versões estáveis do React Native com mais frequência em 2025.

Será mais fácil para você atualizar a versão do React Native porque reduziremos o número de alterações drásticas que enviamos. Lançamentos mais rápidos também significam que todas as correções de bugs que enviamos internamente chegarão até você mais cedo, e você poderá se beneficiar dos recursos mais recentes que desenvolvemos dentro do React Native.

Acreditamos que esse novo modelo beneficiará todos os desenvolvedores no ecossistema React Native, pois menos mudanças drásticas significam uma estrutura mais estável na qual todos podem confiar.

Opt-in para logs JavaScript no Metro

Adicionamos uma opção para restaurar o streaming de log JavaScript por meio do servidor de desenvolvimento Metro, removido anteriormente em 0,77 para usuários da CLI da Comunidade. Isso é em resposta ao feedback dos usuários, bem como à revisão de onde estamos com nossas ofertas de substituição hoje.

Para optar, use o novo --client-logs bandeira. Isso também pode ser aliasado por meio de um script npm por conveniência.

npx @react-native-community/cli start --client-logs

O streaming de log no Metro continuará desaparecendo no futuro e permanecerá desativado por padrão. No entanto, pretendemos dar aos desenvolvedores um período de migração mais longo para se adaptarem a essa mudança.

Esta atualização também será disponibilizada na próxima versão menor 0.77.1.

Adicionado suporte para drawables XML do Android

No React Native 0.78, estamos lançando uma nova maneira de carregar ícones, ilustrações e outros elementos gráficos no Android como Recursos XML. Isso significa que você pode usar drawables vetoriais para exibir imagens vetoriais em qualquer escala sem perder qualidade, ou desenháveis de forma para desenhar enfeites mais básicos. Tudo isso é apoiado pelo mesmo Image componente que você conhece e ama. Para usar esse recurso hoje, você pode importar recursos XML como qualquer outro recurso estático referenciando-os no source suporte. Além disso, usar recursos XML em vez de bitmaps também ajudará você a reduzir o tamanho do seu aplicativo e resultará em melhor renderização em telas com diferentes DPIs.

// via require
<Image
  source={require('./img/my_icon.xml')}
  style={{width: 40, height: 40}}
/>;

// or via import
import MyIcon from './img/my_icon.xml';
<Image source={MyIcon} style={{width: 40, height: 40}} />;

Desempenho e Qualidade

Como todos os outros tipos de imagemOs recursos XML do Android são carregados e inflados do thread principal para que você não perca nenhum quadro. Isso significa que não há garantia de que o recurso seja exibido instantaneamente, mas também não impede a entrada do usuário enquanto o recurso está sendo carregado. A decodificação off-thread é especialmente importante quando você precisa renderizar muitos ícones ao mesmo tempo. Aplicativos internos obtiveram algumas melhorias significativas de desempenho ao usar os drawables vetoriais do Android.

Utilizar tipos de recursos como drawables vetoriais é a maneira perfeita de exibir imagens sem perda de qualidade e pode resultar em arquivos APK menores, já que você não precisa incluir um tipo de imagem para cada densidade de tela. Além disso, os drawables vetoriais são copiados da memória depois de carregados, portanto, se você renderizar o mesmo ícone mais de uma vez, todos serão exibidos ao mesmo tempo.

Compensações

É importante observar que os recursos XML desenháveis não são perfeitos e há restrições para usá-los:

Eles devem ser referenciados no momento da compilação do seu aplicativo Android. Esses recursos são passados para uma etapa de construção com o Ferramenta de empacotamento de ativos Android (AAPT) para converter XML bruto em XML binário. O Android não suporta o carregamento de arquivos XML brutos, esta é uma limitação conhecida.
Eles não podem ser carregados pela rede pelo Metro. Se você alterar o diretório ou o nome de um recurso XML, precisará reconstruir seu aplicativo Android todas as vezes.
Eles não têm dimensões. Por padrão, eles serão exibidos com um tamanho 0x0 e você precisa fornecer uma largura e altura para que eles apareçam.
Eles não são totalmente personalizáveis em tempo de execução; você só pode controlar as dimensões ou a cor geral da tonalidade, mas não pode personalizar atributos de elementos individuais dentro o recurso como larguras de traço, raio de borda ou cores. Esses tipos de personalizações exigem diferentes variantes do seu recurso XML.

Informações

Os drawables vetoriais do Android não são um substituto 1:1 para bibliotecas como react-native-svg. Eles são projetados especificamente para Android e não funcionam para iOS. Se você quiser ter os mesmos SVGs em todas as plataformas, terá que continuar usando react-native-svg. Os drawables vetoriais oferecem apenas benefícios de desempenho em detrimento da personalização.

ReactNativeFactory no iOS

Com o React Native 0.78 melhoramos a integração do React Native no iOS.

Esta versão introduz uma nova classe chamada RCTReactNativeFactory isso permite que você crie instâncias do React Native sem a necessidade de um AppDelegate. Isso deve permitir que você crie uma nova versão do React Native em um ViewController, por exemplo. Isso simplifica drasticamente a integração com aplicativos Brownfield.

Imagine que você deseja mostrar uma visualização React Native em um View Controller do seu aplicativo A partir do React Native 0.78, o que você precisa fazer, após instalar todas as dependências conforme mostrado em este guia, é para adicionar este código:

+import React
+import React_RCTAppDelegate

public class ViewController {
+  var reactNativeFactory: RCTReactNativeFactory?
+  var reactNativeDelegate: ReactNativeDelegate?
  public func viewdidLoad() {
    super.viewDidLoad()
    // …
+ reactNativeDelegate = ReactNativeDelegate()
+ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeDelegate!)
+ view = reactNativeFactory.rootViewFactory.view(withModuleName: "<your module name>")
  }
}

+class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    self.bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+    #if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+    #else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+    #endif
+  }
+}

O React Native será carregado no View Controller assim que você navegar até ele.

Este código cria um RCTReactNativeFactory, atribui-lhe um delegado e pede-lhe que crie um rootView para uma visão do React Native.

O delegado é definido abaixo e substitui o sourceURL e o bundleURL propriedades para informar ao React Native onde ele pode encontrar o pacote JS para carregar na visualização.

Outras mudanças de última hora

Geral

Ferramentas de desenvolvimento nativas do React
Domínio CDP FuseboxClient removido
Codegen
Tipos de matriz de componentes separados e tipos de matriz de comandos

Android

Alterações de anulabilidade: migração RootView para Kotlin resultou em alterações nos tipos de parâmetros de anuláveis para não anuláveis.
As seguintes classes foram movidas de públicas para internas ou removidas e não podem mais ser acessadas:
com.facebook.react.bridge.GuardedResultAsyncTask
com.facebook.react.uimanager.ComponentNameResolver
com.facebook.react.uimanager.FabricViewStateManager
com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager

iOS

Alterar as informações do tamanho do evento de carregamento de imagem do tamanho lógico para o pixel (isso afeta apenas a arquitetura antiga)

Agradecimentos

React Native 0.78 contém mais de 509 commits de 87 colaboradores. Obrigado por todo o seu trabalho duro!

Obrigado a todos os autores adicionais que trabalharam na documentação de recursos nesta postagem de lançamento:

Sonho11 equipe para testes completos dos recursos do React 19 no React Native
Nicola Corti para o trabalho em Lançamentos Mais Rápidos
Alex Caça para o trabalho no Metro logs opt-in
Pedro Abbondanzo para o trabalho no Android XML Drawable Support
Oskar Kwaśniewski para o trabalho na ReactNativeFactory

Atualize para 0.78

Por favor, use o Ajudante de atualização do React Native para visualizar alterações de código entre versões do React Native para projetos existentes, além dos documentos de atualização.

Para criar um novo projeto:

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

Se você usar Expo, O React Native 0.78 será suportado em uma versão canária do Expo SDK.