React Native

React Native 0.73 - Melhorias no Depurador, Suporte Simbólico Estável e muito mais

A versão 0.73 do React Native foi lançada com melhorias no processo de depuração, suporte estável a links simbólicos e compatibilidade com o Android 14. As mudanças incluem a captura automática de logs em background pelo Hermes e uma nova experiência de debug que substituirá o Flipper.

Compartilhar
React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more · React Native

Hoje estamos lançando o React Native 0.73! Esta versão adiciona melhorias na depuração com Hermes, suporte simbólico estável, suporte ao Android 14 e novas funcionalidades experimentais. Também estamos descontinuando recursos de depuração legados e lançando a próxima coluna da Nova Arquitetura: Modo Sem Ponte!

Principais Recursos

Alterações que Quebram a Compatibilidade

Principais Recursos

Melhorias no Depurador

A equipe do React Native e Hermes está comprometida em melhorar a experiência de depuração no React Native. Na versão 0.73, estamos felizes em compartilhar algum progresso inicial desse investimento contínuo.

Histórico de Console Log no Hermes

console.log() é uma maneira muito popular para desenvolvedores rapidamente depurarem seu código JavaScript. Em versões anteriores, logs de console em aplicativos React Native não eram registrados até que um depurador fosse conectado. Isso tornava difícil observar logs que ocorrem cedo durante o carregamento do aplicativo.

No React Native 0.73, resolvemos esse problema. O Hermes agora captura todas as chamadas console.log() em segundo plano, que serão enviadas para a aba Console quando um depurador for conectado pela primeira vez — correspondendo à experiência de depuração em navegadores web. Esta nova funcionalidade funciona com Flipper, Chrome DevTools conectados ao Hermes e o novo depurador experimental.

Documentação de Depuração Atualizada

Atualizamos a seção Depuração de nossos documentos, que agora inclui informações atualizadas sobre como conectar todos os depuradores suportados, mais detalhes sobre o React DevTools e visualizações atualizadas.

Visão geral da documentação de Depuração a partir do 0.73

Novo Depurador Experimental

A equipe do React Native está trabalhando em uma nova experiência de depuração JavaScript, destinada a substituir o Flipper, com um Preview Técnico disponível a partir do React Native 0.73. O novo depurador é aberto imediatamente e possui uma interface simplificada do Chrome DevTools personalizada para depurar o React Native com Hermes.

O novo depurador é experimental e tem alguns problemas conhecidos que estamos trabalhando para resolver em uma futura versão do React Native. Se você estiver testando, por favor use o mesmo fio de discussão para reportar feedback.

A nova interface do depurador aberta na guia "Bem-vindo"

Saiba mais sobre como habilitar essa experiência na documentação.

O suporte para resolver symlinks no Metro está agora ativado por padrão. O suporte a symlinks permite que o React Native funcione com configurações de monorepo quando os diretórios contendo as pastas são configurados com watchFolders.

Symlinks são representados profundamente nos internos do Metro, o que significa que eles funcionam com recursos como Fast Refresh, e têm pouco impacto de desempenho durante a criação dos pacotes. Symlinks são suportados em todas as plataformas desktop, tanto com quanto sem Watchman.

Soluções de Bypass para Monorepos

Sabemos que ainda existem casos de borda ao usar o React Native em uma configuração monorepo. Temos trabalho planejado para abordar alguns desses problemas, que não entraram na versão 0.73 — mas que pretendemos lançar o mais rápido possível.

Para projetos de template do React Native (npx react-native init), você precisará configurar qualquer watchFolders fora da raiz do projeto para que o Metro os descubra (mais informações). Você também pode precisar atualizar os caminhos dos arquivos se a dependência react-native for instalada em um diretório de nível diferente.

Para aplicativos do Expo, o suporte para Yarn (Classic) workspaces é configurado por padrão. Consulte também a guia Trabalhar com monorepos na documentação do Expo.

Modelo de Kotlin no Android

Anunciamos com entusiasmo que, a partir da versão 0.73, o Kotlin é agora a linguagem recomendada para aplicativos Android construídos com React Native. Isso segue a direção em que a ecossistema do Android tem se movido há vários anos e permite que você escreva seu app usando uma linguagem moderna.

Temos atualizado o modelo de React Native no Android para usar Kotlin ao invés de Java. Os novos arquivos MainActivity.kt e MainApplication.kt são 36% menores em tamanho.

O Upgrade Helper também foi atualizado para facilitar a migração de seus arquivos .java para .kt.

Suporte ao Android 14

Nós atualizamos o React Native para oferecer suporte completo ao Android 14. A partir da versão 0.73, os desenvolvedores do React Native podem agora direcionar a última versão do SDK do Android, API Level 34 (Upside Down Cake).

Java 17 e atualização do Android Gradle Plugin

No intuito de suportar o Android 14, atualizamos a versão do Android Gradle Plugin (AGP) usada para construir aplicativos Android da 7.4.x para 8.1.x.

Esta grande atualização do AGP vem com uma série de alterações quebradoras compatíveis disponíveis nos anúncios de lançamento da Google (8.0.0 e 8.1.0).

A mais importante é que o Java 17 agora é uma exigência para construir aplicativos Android. Você pode atualizar sua versão do Java para 17 executando:

brew install --cask zulu@17

e atualizando seu JAVA_HOME conforme documentado no Guia de Início Rápido.

Caso você seja um desenvolvedor de bibliotecas, suas bibliotecas devem funcionar com o React Native 0.73 sem alterações. No início deste ano, publicamos uma nota esclarecendo o que a atualização do AGP significa para você como autor de bibliotecas.

Conceder acesso parcial a fotos e vídeos

O Acesso Seletivo a Fotos permite que os usuários do Android 14 concedam aos aplicativos acesso a itens específicos em sua biblioteca de mídia, em vez de acesso a toda a mídia. Na versão 0.73, os aplicativos React Native agora suportam essa capacidade, usando a permissão READ_MEDIA_VISUAL_USER_SELECTED na API PermissionsAndroid.

Acesso Seletivo a Fotos no Android 14

Atualização do Min SDK

O React Native 0.73 será a última versão que suporta o Android 5.0 (API Level 21). A próxima versão do React Native terá uma versão mínima de SDK de 23 (Android 6.0). Saiba mais sobre as alterações futuras no Min SDK aqui.

Atualizações da Nova Arquitetura

Continuamos a distribuição da Nova Arquitetura do React Native, para torná-la disponível para toda a comunidade de código aberto.

A partir do React Native 0.68, tanto o Novo Renderer (Fabric) quanto o Sistema de Módulos Nativos (TurboModules) estavam disponíveis para os usuários experimentarem e avaliarem. Queremos agradecer à comunidade pelo feedback que recebemos até agora.

Hoje estamos lançando mais uma parte da Nova Arquitetura: Modo Bridgeless. Até agora, quando você habilitava a Nova Arquitetura em seu aplicativo, o Bridge ainda estava disponível para suportar compatibilidade com versões antigas de componentes e módulos. No entanto, nossa visão é descontinuar completamente o bridge. A partir do React Native 0.73, você pode habilitar o Módulo Bridgeless que irá desativar a criação do bridge inteiramente.

Junto com o Módulo Bridgeless, estamos enviando uma Camada de Integração Nativa, que permitirá reutilizar seus módulos antigos quando estiver no modo Bridgeless. A Camada de Integração do Renderer introduzida no React Native 0.72 também foi adaptada para trabalhar com o Módulo Bridgeless.

Ao contrário da Nova Arquitetura, o Modo Bridgeless é inicialmente experimental. Convidamos usuários interessados a habilitá-lo e relatar quaisquer problemas e incompatibilidades que enfrentarem no grupo de trabalho da Nova Arquitetura.

Recursos de Debugging Descontinuados

Flipper ↔ React Native integração

Estamos gradualmente nos afastando do Flipper como a ferramenta padrão para debugar aplicativos React Native. Na versão 0.73, isso começa com a descontinuação da integração nativa do Flipper incluída no React Native (código de inicialização que conecta os plugins principais do Flipper). Vamos remover essa integração e dependência na próxima versão — o que significa que partes do Flipper como o plugin Network deixarão de funcionar.

Continua inalterado: O Flipper como um produto standalone para debugar aplicativos nativos continuará existindo. Mesmo após sua remoção de novos projetos React Native no futuro, os desenvolvedores ainda poderão adicionar manualmente o Flipper ao seu aplicativo se desejarem.

Para mais informações sobre por que estamos nos afastando do Flipper, veja o RFC.

Debugging JavaScript Remoto

O Debugging JavaScript Remoto é um modo de debugagem legado que conecta um navegador web externo (Chrome) ao seu aplicativo e executa o código JavaScript dentro de uma página da web, i.e. http://localhost:8081/debugger-ui. Esse modelo pode levar a comportamentos inconsistentes do aplicativo durante o debug e é incompatível com módulos nativos sob a Nova Arquitetura.

No React Native 0.73, o depuração remota de JavaScript foi descontinuada e removida do menu Dev. A ativação do depurador remoto deve ser feita manualmente via a API NativeDevSettings. Isso é coberto na seção sobre métodos de depuração adicionais.

A depuração remota de JavaScript era anteriormente a experiência padrão para aplicativos usando JavaScriptCore (JSC). Recomendamos o uso do Safari Developer Tools (depuração direta JSC) em vez disso, para aplicativos iOS.

Aconselhamos a utilização do Hermes para uma experiência de depuração consistente em todas as plataformas.

Quebras de Compatibilidade

Renomeações de Pacotes Babel

Movemos dois pacotes relacionados ao Babel do Metro para o repositório e esquema de versão do React Native, permitindo-nos simplificar a manutenção e as atualizações. As novas versões desses pacotes suportam recursos da Nova Arquitetura no 0.73, significando que essas dependências devem ser atualizadas.

Por favor, siga o Upgrade Helper ao fazer a atualização para garantir que você tenha atualizado essas dependências. Alguns pacotes foram renomeados:

Nome antigo do pacoteNovo nome do pacote
metro-react-native-babel-preset@react-native/babel-preset
metro-react-native-babel-transformer@react-native/metro-babel-transformer

O pacote @react-native/babel-preset agora inclui o plugin @react-native/babel-plugin-codegen, que não precisa mais ser especificado separadamente no seu arquivo de configuração do Babel.

Outras Quebras de Compatibilidade

Estas são algumas das principais quebras de compatibilidade no 0.73. Por favor, consulte o changelog completo para a lista completa de quebras de compatibilidade.

  • Levantar a exigência mínima do Node.js para 18.x (#37709) (veja também Node.js 16 EOL).
  • Agora o template usa TypeScript 5.0 (#36862).
    • Os tipos do React Native continuam funcionando no TypeScript 4.8.
  • Android: Java 17 é agora uma exigência para construir aplicativos Android (veja acima).
  • Android: Atualização major da biblioteca Fresco para a versão 3.0 (#38275).
  • iOS: Levantar a exigência mínima da versão iOS para 13.4 (#36795).
  • iOS: Metro não será mais iniciado automaticamente ao executar builds via Xcode (#38242).

Para autores de bibliotecas:

Alterações na CLI do React Native

Mudanças quebradoras destacadas

  • Alterar o prefixo padrão da tarefa no comando build-android. Agora, ao executar build-android, a tarefa bundle será executada em vez de assemble (#1913).
  • Remover fallback para configurações padrão do Metro (#1972).
  • Remover a opção --configuration do comando run-ios (substituído por --mode) (#2028).
  • Remover a opção --variant do comando build-android (substituído por --mode) (#2026).

Consulte o changelog completo para v12.0.0.

@types/react-native Descontinuado

Como mencionado em Suporte Primeiro Classe para TypeScript, estamos enviando tipos do TypeScript com react-native desde a versão 0.71 e agora estamos descontinuando @types/react-native para a versão 0.73.

Não enviaremos patches futuros para versões existentes. A orientação é migrar-se de @types/react-native. Consulte as instruções sobre como migrar.

Agradecimentos

O React Native 0.73 contém mais de 2259 commits de 68 contribuidores. Obrigado pelo seu esforço!

Atualizar para a versão 0.73

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. Você também pode criar um novo projeto com o comando npx react-native@latest init MyProject.

Se você usa Expo, o React Native 0.73 será suportado na versão SDK 50 do Expo.

O 0.73 é agora a última versão estável do React Native e o 0.70.x passa para não suportado. Para mais informações, consulte a política de suporte do React Native.

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