React Native 0.78 - React 19 e mais

Hoje estamos animados em anunciar o lançamento do React Native 0.78!

Nesta versão, temos a disponibilidade do React 19 no React Native e algumas outras funcionalidades relevantes como suporte nativo para Android Vector drawables e integração melhorada para iOS.

Principais destaques

Principais destaques

React 19

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

Para usar o React 19, é necessário atualizar seu aplicativo, pois introduzimos algumas mudanças em relação ao React 18. Por exemplo, removemos APIs como propTypes, e você precisa ajustar seu app para torná-lo compatível com a nova versão do React.

Siga nossas instruções passo a passo para atualizar seu app para o React 19.

Após a migração, você poderá aproveitar todas as novas funcionalidades do React, incluindo (mas não se limitando a):

• Ações: essas são funções que usam transições assíncronas. As transições assíncronas gerenciam automaticamente a submissão de dados para você: lidam com estados pendentes, atualizações otimistas, tratamento de erros e mais.
• useActionState: um hook utilitário construído em cima das Ações. Ele toma uma função e retorna uma ação embalada para chamar. Quando a ação é chamada, ela retornará o último resultado da ação e seu estado pending.
• useOptimistic: um novo hook que simplifica a exibição do estado final de uma atualização otimista enquanto o pedido assíncrono está em andamento. Se o pedido falhar, o React voltará automaticamente ao valor anterior.
• use: esta é uma nova API que permite acesso a recursos durante renderização. Você pode agora ler uma promessa ou um contexto com use, e o React suspenderá até eles se resolverem.
• ref como prop: você pode agora passar ref como uma prop, assim como faz com qualquer outra prop. Os componentes de função não precisam mais de forwardRef e você pode migrar seus componentes agora.
• E muitos outros

Para uma lista completa das novas funcionalidades disponíveis, consulte o post de blog do React 19.

Compilador React

O Compilador React é uma ferramenta de tempo de compilação projetada para otimizar aplicações React ao aplicar automaticamente a memoização. Enquanto os desenvolvedores podem usar manualmente APIs como useMemo, useCallback e React.memo para prevenir o recálculo desnecessário de partes inalteradas do app, eles também poderiam esquecer ou mal utilizar essas otimizações. O Compilador React resolve isso ao aproveitar seu entendimento sobre JavaScript e das Regras do React para memoizar automaticamente valores ou grupos de valores dentro dos componentes e hooks.

Com esta versão, simplificamos o processo para habilitar o Compilador React em seus aplicativos React Native. Em versões anteriores, você precisava instalar dois pacotes: o compilador e seu runtime. Após a instalação desses pacotes, era necessário configurar um plugin Babel para habilitar o Compilador React através do Metro.

Agora, basta instalar o próprio compilador e configurar o plugin Babel. Para aprender como ativá-lo, você pode seguir nosso guia passo a passo deste link.

Para verificar se o compilador está em execução, abra os React Native DevTools: você deve ver que os componentes memoizados têm a tag Memo ✨ anexada a eles no Component Inspector.

Caso queira saber mais sobre o Compilador React, essas são fontes úteis:

Para versões menores e mais rápidas

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

Será mais fácil para você atualizar a versão do React Native porque reduziremos o número de mudanças quebradoras que enviaremos. Lançamentos mais rápidos também significa que todos os corretivos de bugs que enviamos internamente chegarão a você mais cedo, e você poderá aproveitar as últimas funcionalidades que desenvolvemos dentro do React Native.

Acreditamos que esse novo modelo beneficiará cada desenvolvedor na ecossistema React Native, pois menos mudanças quebradoras significa um quadro de trabalho mais estável sobre o qual todos podem contar.

Ativar logs JavaScript no Metro

Adicionamos uma opção de ativação para restaurar a transmissão de logs JavaScript via o servidor dev do Metro, anteriormente removida na versão 0.77 para usuários da Community CLI. Isso é uma resposta ao feedback dos usuários, bem como à revisão de onde estamos com nossas ofertas alternativas atualmente.

Para ativar essa opção, use a nova flag --client-logs. Essa também pode ser aliasada via um script npm para conveniência.

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

A transmissão de logs no Metro ainda será removida em versões futuras e permanecerá desativada por padrão. No entanto, pretendemos dar aos desenvolvedores um período mais longo para se adaptar a essa mudança.

Esta atualização também estará disponível na próxima versão menor 0.77.1.

Suporte adicionado para XML drawables 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 shape drawables para desenhar adornos mais básicos. Tudo isso é suportado pelo mesmo componente Image que você já conhece e ama. Para usar essa funcionalidade hoje, você pode importar recursos XML como qualquer outro recurso estático, referenciando-os na propriedade source. Além disso, o uso de recursos XML em vez de bitmaps também ajudará a reduzir o tamanho do seu aplicativo e resultará em um renderização melhor em telas com diferentes DPI.

<Image

  source={require('./img/my_icon.xml')}

  style={{width: 40, height: 40}}

/>;

import MyIcon from './img/my_icon.xml';"}

Performance & Qualidade

Assim como outros tipos de imagens, os recursos XML do Android são carregados e inflados fora da thread principal para que você não perca quadros. Isso significa que o recurso pode não ser exibido imediatamente, mas também não impede a entrada do usuário enquanto o recurso está sendo carregado. A decodificação fora da thread é especialmente importante quando você precisa renderizar muitos ícones ao mesmo tempo. Aplicativos internos obtiveram melhorias significativas de desempenho ao usar os drawables vetoriais do Android.

A utilização de tipos de recursos como drawables vetoriais é a maneira perfeita de exibir imagens sem perder 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 uma vez que eles são carregados, então se você renderizar o mesmo ícone mais de uma vez, todos serão exibidos ao mesmo tempo.

Pontos a Considerar

É importante notar que os recursos XML drawables não são perfeitos e existem restrições para usá-los:

• Eles devem ser referenciados no momento da construção do seu aplicativo Android. Esses recursos são passados para uma etapa de build com a Android Asset Packaging Tool (AAPT) para converter XML bruto em XML binário. O Android não suporta o carregamento de arquivos XML brutos, isso é uma limitação conhecida.
• Eles não podem ser carregados pela rede pelo Metro. Se você alterar o diretório ou nome de um recurso XML, será necessário recompilar seu aplicativo Android a cada vez.
• Eles não têm dimensões. Por padrão, eles serão exibidos com tamanho 0x0 e é necessário fornecer largura e altura para que apareçam.
• Eles não são totalmente personalizáveis em tempo de execução; você pode controlar apenas as dimensões ou a cor geralmente tinta, mas não pode customizar atributos individuais dentro do recurso como largura da linha, raio de borda ou cores. Esses tipos de personalizações exigem variantes diferentes dos seus recursos XML.