React Native 0.76 - Nova Arquitetura por padrão, React Native DevTools e mais

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

Este é um marco importante para o React Native, pois estamos habilitando a Nova Arquitetura por padrão e introduzindo os React Native DevTools. Isso representa o culminar de seis anos de trabalho árduo da nossa equipe, juntamente com o apoio incrível da nossa comunidade de desenvolvedores.

Principais Recursos​

Quebras de Compatibilidade​

Principais Recursos​

Nova Arquitetura do React Native por padrão​

A partir do React Native 0.76, a Nova Arquitetura está habilitada por padrão nos seus projetos. A Nova Arquitetura é uma reescrita dos internos do React Native para permitir que os desenvolvedores de aplicativos criem aplicações nativas de alta qualidade usando o React.

Hoje, estamos animados em declarar a Nova Arquitetura pronta para uso em produção.

Esta mudança é um marco na evolução do React Native e convidamos você a ler o post dedicado no blog para entender o que está incluído na Nova Arquitetura e como ela moldará o futuro do React Native: A Nova Arquitetura Está Aqui.

Estamos lançando a primeira versão estável dos React Native DevTools, nossa nova experiência de depuração padrão.

Desejamos que as ferramentas que você usa para depurar o React em todas as plataformas sejam confiáveis, familiares, simples e coerentes. Os React Native DevTools atendem a esses princípios - ferramentas de desenvolvedor alinhadas com o navegador que são profundamente integradas ao React Native. As principais características incluem:

• Ferramentas familiares e alinhadas com o web — Um depurador totalmente funcional baseado em Chrome DevTools com pontos de interrupção confiáveis, valores observados, depuração passo a passo, inspeção da pilha e uma rica console JavaScript. Essas características essenciais agora funcionam confiavelmente e entre recarregamentos.
• Melhorias e integrações no React DevTools — Os componentes de Inspect built-in do React Component Inspector e Profiler funcionam perfeitamente, com maior velocidade e confiabilidade na destaque dos componentes.
• Melhoria da experiência do usuário (UX) — Veja um novo overlay Pausado no Debugger, tornando claro quando seu aplicativo está pausado em um ponto de interrupção. Avisos no LogBox agora são exibidos como uma resumo e escondidos quando os DevTools estão conectados.
• Comportamento de reconexão corrigido — Os pontos de interrupção do JavaScript agora funcionam confiavelmente entre recarregamentos e quando os DevTools são desconectados e reconectados. Os DevTools podem até se reconectar ao mesmo aplicativo após uma rebuild nativa.
• Lançamento instantâneo — React Native DevTools está pronto por padrão com zero configuração. Abra-o a partir do menu de desenvolvimento no app ou via j para depurar no servidor CLI, que agora suporta múltiplos emuladores e dispositivos.

O React Native DevTools é fundamentalmente diferente das nossas opções de depuração anteriores, incluindo a experiência do Experimental Debugger primeiro lançada na versão 0.73. Ele muda para uma nova pilha de backend de depuração que reconstruímos nos últimos anos. Isso significa que a compatibilidade com ferramentas anteriores mudou, e você pode esperar uma experiência muito mais confiável do início ao fim. Temos a intenção de construir sobre essa nova pilha para permitir que implementemos mais recursos no futuro, como os painéis de desempenho e rede.

Faseamento dos logs no Metro​

No nosso próximo lançamento, estamos removendo os logs encaminhados no Metro para se alinhar com as ferramentas modernas de navegador e remover integrações antigas de depuração. Em vez disso, use o painel Console totalmente funcional do React Native DevTools para registrar logs. Veja mais em nossos FAQs.

Links

Resolução mais rápida do Metro​

Entregamos várias melhorias de desempenho para o resolver do Metro, o componente responsável por encontrar um módulo a partir de uma rota de importação, tornando-o cerca de 15 vezes mais rápido. Isso melhora o desempenho geral do Metro, especialmente para builds quentes, que vimos cerca de 4 vezes mais rápidos.

Propriedades de estilo Box Shadow e Filter​

Adicionamos duas propriedades de estilo apenas para a nova arquitetura em 0.76 - boxShadow e filter. Ambas essas propriedades existem na web, e a equipe segue os padrões quando possível para que essas propriedades sejam previsíveis, familiares e, no final das contas, mais fáceis de adotar (veja as seções de limitações e desvios do padrão para as exceções). Como resultado, você pode consultar a documentação da web para entender completamente como essas propriedades funcionam, mas existem algumas diferenças importantes que são mencionadas abaixo.

boxShadow​

boxShadow adiciona uma sombra a um elemento, com a capacidade de controlar a posição, cor, tamanho e desfoque da sombra. Consulte a documentação MDN para uma visão geral completa desses argumentos, além de um fiddle para experimentar por conta própria. Abaixo estão alguns exemplos das sombras que você pode criar.

boxShadow pode aceitar uma string, que imita a sintaxe CSS, ou objetos JS que podem incorporar variáveis. Por exemplo, a string '5 5 5 0 rgba(255, 0, 0, 0.5)' e o objeto {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: 'rgba(255, 0, 0, 0.5)'} resultariam na mesma sombra de caixa.

A funcionalidade anterior da sombra tinha algumas limitações que agora são abordadas por boxShadow:

• Não funciona no Android
• Não pode ser inserido
• Não tem difusão
• Não funciona em Views se não houver cor de fundo
• É uma propriedade separada, então não pode compartilhar a mesma sintaxe web

Limitações & Divergências do Específico​

• A cor padrão da sombra é preta, não a cor do pai
• Sombras normais do Android são suportadas no Android 9+
• Sombras inseridas do Android são suportadas no Android 10+

filter​

filter adiciona certos filtros gráficos a um elemento. Há uma mistura de filtros de cor que permitem modificar coisas como brilho, saturação e matiz, bem como filtros não coloridos que permitem adicionar borrões e sombras. Consulte a documentação MDN para uma visão geral completa de cada função individual do filtro, além de um fiddle para experimentar por conta própria. Abaixo está uma imagem de cachorro-quente com vários filtros aplicados a ela.

Igual ao boxShadow, o filter pode aceitar uma string que imita a sintaxe CSS ou um array de objetos JS que podem incorporar variáveis. Por exemplo, a string 'saturate(0.5) grayscale(0.25)' e o array [{saturate: 0.5}, {grayscale: 0.25}] resultariam no mesmo filtro. filter tem um valor de dropShadow que varia ligeiramente do boxShadow. A diferença mais significativa é que dropShadow é uma máscara alfa - então a sombra será lançada apenas por um pixel se ele tiver um componente alfa não zero. O boxShadow, por outro lado, lançará ao redor da caixa de borda do elemento, mesmo que nada esteja dentro dele. Além disso, dropShadow não tem um parâmetro de distância de difusão e não pode ser inserido (sombra lançada dentro do elemento).

Limitações e Diferenças do Específico

• iOS filter suporta apenas brilho e opacidade
• O iOS filter não será aplicado a sombras, contornos ou qualquer outro elemento gráfico fora dos limites do elemento
• No Android, blur e drop-shadow são suportados apenas em versões Android 12+
• filter implica overflow: hidden, então os filhos de um elemento com filter serão recortados se estiverem posicionados fora dos limites do pai.

Alterações que Quebram a Compatibilidade

Já compartilhado anteriormente em 0.75, nossa visão é para o React Native ser independente de frameworks. Portanto, concluímos a tarefa de remover @react-native-community/cli como dependência direta do React Native.

A desacoplamento do React Native da CLI nos permite avançar mais rapidamente ao lançar esses projetos independentemente e separar melhor as responsabilidades dos dois projetos.

Se você está usando a CLI em seu fluxo de trabalho diário, certifique-se de adicionar explicitamente a dependência na sua package.json:

//…
 “devDependencies”: {
  // …
+  “@react-native-community/cli”: “15.0.0”,
+  “@react-native-community/cli-platform-android”: “15.0.0”,
+  “@react-native-community/cli-platform-ios”: “15.0.0”,
 }

Aplicativos Android são cerca de 3,8MB menores graças à fusão de bibliotecas nativas

O React Native 0.76 será lançado com um número reduzido de bibliotecas nativas, já que unificamos grande parte do nosso código nativo em uma única biblioteca chamada libreactnative.so.

Esta mudança vem com uma redução no tamanho do aplicativo e melhoria na performance de inicialização do aplicativo em Android. De nossas medições, descobrimos que o tamanho do aplicativo será reduzido em cerca de 3,8MB (20% do total) e o tempo médio de inicialização do aplicativo será reduzido em cerca de 15ms (~8%) (fonte).

Por outro lado, esta é uma mudança quebra-tudo para desenvolvedores de aplicativos e bibliotecas.

Os desenvolvedores de aplicativos terão que atualizar o onCreate da sua Aplicação conforme abaixo:

+import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
class MainApplication : Application(), ReactApplication {
 override fun onCreate() {
   super.onCreate()
+   SoLoader.init(this, OpenSourceMergedSoMapping)
-   SoLoader.init(this, false)
 }
}

Esta mudança é necessária para carregar corretamente o libreactnative.so e está incluída no upgrade-helper.

Autoras de bibliotecas não serão afetadas por esta mudança, a menos que você tenha código C++ personalizado.

Para uma imersão técnica nesta mudança e sugestões para autoras de bibliotecas, você pode ler mais sobre isso no post dedicado.

Atualizações para a versão mínima do iOS e Android SDK​

Atualizamos nossas versões mínimas de plataforma e SDK:

• iOS - de 13.4 para 15.1
• Android - de SDK 23 para SDK 24 (Android 7)

Esta mudança foi anunciada anteriormente no ano quando a versão 0.75 foi lançada. Para mais contexto, consulte as postagens dedicadas para Android e iOS.

Outras Mudanças que Quebram a Compatibilidade

• Animation
  • Cessar envio de atualizações de estado para o React em animações em loop. Isso estava causando re-rendering desnecessário com animações em loop.
• devtools:
  • Remover a aba Inspector Panel perf + network tabs sob Nova Arquitetura. (RFC)
• text engine
  • Sempre usar AttributedStringBox em vez de AttributedString no TextLayoutManager

Android

• rendering:
  • Ambientes de visualização não são mais diretamente ReactViewBackgroundDrawable ou CSSBackgroundDrawable

iOS

• turbomodule
  • Removido o Macro RCT_EXPORT_CXX_MODULE_EXPERIMENTAL para autolink de módulos puramente Cxx.

Agradecimentos

O React Native 0.76 contém mais de 1070 commits de 156 contribuidores. Obrigado pelo seu trabalho duro!

Agradecemos a todos os autores adicionais que trabalharam na documentação das novas funcionalidades nesta postagem.

Atualizar para 0.76

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 de atualização.

Caso você use o Expo, o React Native 0.76 será suportado no SDK 52 do Expo.

Caso precise criar um novo projeto usando a CLI, execute este comando:

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