React Native 0.76 — Nova arquitetura por padrão, React Native DevTools e muito mais

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

Este é um marco importante para o React Native, pois estamos habilitando a Nova Arquitetura por padrão e introduzindo o React Native DevTools. Este foi o ápice de 6 anos de trabalho duro da nossa equipe, juntamente com o apoio da nossa incrível comunidade de desenvolvedores.

Destaques

• Nova arquitetura React Native por padrão
• Ferramentas de desenvolvimento nativas do React
• Resolução mais rápida do metrô
• Adereços estilo Box Shadow e Filter

Quebrando Mudanças

• Removida a dependência do react-native-community/cli
• Os aplicativos Android são ~3,8 Mb menores graças à fusão da Native Library
• Atualizações para requisitos mínimos de SDK para iOS e Android

Destaques

Nova arquitetura React Native por padrão

A partir do React Native 0.76, a Nova Arquitetura é habilitada por padrão em seus projetos. A Nova Arquitetura é uma reescrita dos componentes internos do React Native para permitir que desenvolvedores de aplicativos desenvolvam aplicativos nativos de alta qualidade usando o React.

Hoje, temos o prazer de declarar a Nova Arquitetura pronta para uso em produção.

Essa mudança é um marco na evolução do React Native, e convidamos você a ler a postagem dedicada do 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.

Ferramentas de desenvolvimento nativas do React

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

Queremos que as ferramentas que você usa para depurar o React em todas as plataformas sejam confiáveis, familiares, simples e coesas. O React Native DevTools oferece esses princípios — ferramentas de desenvolvedor alinhadas ao navegador que são profundamente integradas ao React Native. Os principais recursos incluem:

• Ferramentas familiares alinhadas à web — Um depurador completo baseado no Chrome DevTools com pontos de interrupção confiáveis, valores de observação, depuração passo a passo, inspeção de pilha e um rico console JavaScript. Esses recursos principais agora funcionam de forma confiável e em todas as recargas.
• React DevTools aprimorado e integrado — O React Components Inspector e o Profiler integrados funcionam perfeitamente, com destaque de componentes mais rápido e confiável.
• UX aprimorado — Veja um novo Pausado no depurador sobreposição, deixando claro quando seu aplicativo é pausado em um ponto de interrupção. Os avisos no LogBox agora são exibidos como um resumo e ocultados quando o DevTools é anexado.
• Comportamento de reconexão fixo — Os pontos de interrupção do JavaScript agora funcionam de forma confiável em recargas e quando o DevTools é desconectado e reconectado. O DevTools pode até se reconectar ao mesmo aplicativo após uma reconstrução nativa.
• Lançamento instantâneo — O React Native DevTools está pronto por padrão com configuração zero. Abra-o no menu Dev do aplicativo ou via j para depurar no servidor CLI, que agora suporta vários emuladores e dispositivos.

O React Native DevTools é fundamentalmente diferente de nossas opções de depuração anteriores, inclusive sendo diferente da experiência do Experimental Debugger lançada pela primeira vez na versão 0.73. Ele muda para uma nova pilha de depuração de backend que reconstruímos no ano passado. Isso significa que a compatibilidade com ferramentas anteriores mudou, e você também deve esperar uma experiência muito mais confiável de ponta a ponta. Pretendemos desenvolver esta nova pilha para nos permitir implementar de forma confiável mais recursos no futuro, como os painéis Desempenho e Rede.

Eliminação gradual de registros no metrô

Em nossa próxima versão, removeremos logs encaminhados no Metro para alinhá-los às ferramentas modernas do navegador e removeremos integrações de depuração antigas. Em vez disso, use o painel de console completo do React Native DevTools para fazer login. Veja mais em nosso Perguntas frequentes.

Links

• Documentos de depuração atualizados
• Palestra de anúncio na React Universe Conf
• Tópico de feedback e perguntas frequentes

Resolução mais rápida do metrô

Enviamos várias melhorias de desempenho para o resolver do Metro, o componente responsável por encontrar um módulo a partir de um caminho de importação, fazendo-o ao redor 15x mais rápido. Isso melhora o desempenho geral do Metro, especialmente para construções quentes, que vimos cerca de 4x mais rápido.

Adereços estilo Box Shadow e Filter

Adicionamos dois adereços de estilo somente Nova Arquitetura em 0,76 — boxShadow e filter. Ambos os adereços existem na web, e a equipe segue as especificações quando possível para que sejam previsíveis, familiares e, em última análise, mais fáceis de adotar (veja as seções de limitações e desvios de especificações para as exceções). Como resultado, você pode consultar a documentação da web para entender completamente como elas funcionam, mas há algumas diferenças importantes que são observadas abaixo.

boxShadow

boxShadow adiciona uma sombra a um elemento, com a capacidade de controlar a posição, a cor, o tamanho e o desfoque da sombra. Confira o Documentação MDN para uma visão geral completa de cada um desses argumentos, juntamente com um violino para experimentá-los por si mesmo. Abaixo estão alguns exemplos de sombras que você pode fazer.

boxShadow pode receber uma string, que imita a sintaxe CSS, ou objetos JS que podem incorporar variáveis. Por exemplo a corda ‘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)’} produziria a mesma sombra de caixa.

O funcionalidade de sombra anterior teve algumas deficiências abordadas agora abordadas por boxShadow:

• Não funciona no Android
• Não pode ser inserir
• Não tem espalhar
• Não funciona em Views se não houver cor de fundo
• É um suporte separado, portanto não pode compartilhar a mesma sintaxe da web

Limitações e desvios de especificações

• A cor de sombra padrão é preta, não a cor do pai
• As sombras normais do Android são suportadas em Android 9+
• As sombras inseridas do Android são suportadas em Android 10+

filter

filter adiciona certos filtros gráficos a um elemento. Há uma mistura de filtros de cores que permitem modificar coisas como brilho, saturação e matiz, bem como filtros não coloridos que permitem adicionar borrões e sombras. Confira o Documentação MDN para uma visão geral completa de cada função de filtro individual, juntamente com um violino para experimentá-las por si mesmo. Abaixo está uma imagem de cachorro-quente com vários filtros aplicados a ela.

Como boxShadow, filter pode receber uma string, que imita a sintaxe CSS, ou uma matriz de objetos JS que podem incorporar variáveis. Por exemplo a corda ‘saturate(0.5) grayscale(0.25)’ e a matriz [{saturate: 0.5}, {grayscale: 0.25}] produziria o mesmo filtro. filter tem um dropShadow valor que varia ligeiramente de boxShadow. A maior diferença é que dropShadow é uma máscara alfa - portanto, a sombra só será projetada por um pixel se tiver um componente alfa diferente de zero. boxShadow, por outro lado, será lançado ao redor da caixa de borda do elemento, mesmo que não haja nada dentro dela. Além disso, dropShadow não tem um parâmetro de distância de propagação e não pode ser inserido (sombra projetada dentro do elemento).

Limitações e desvios de especificações

• iOS filter suporta apenas brilho e opacidade
• iOS filter não se aplicará a sombras, contornos ou quaisquer outros elementos gráficos fora dos limites do elemento
• Android blur e drop-shadow são suportados apenas em Android 12+
• filter implica overflow: hidden, então filhos de um elemento com a filter serão cortados se estiverem posicionados fora dos limites dos pais.

Quebrando Mudanças

Removida a dependência em @react-native-community/cli

Conforme compartilhado anteriormente na versão 0.75, nossa visão é que o React Native seja agnóstico de estrutura. Portanto, concluímos o trabalho para remover @react-native-community/cli como uma dependência direta do React Native.

Desvincular o React Native da CLI nos permite avançar mais rapidamente no lançamento desses projetos de forma independente e separar melhor as responsabilidades de ambos os projetos.

Se você estiver confiando na CLI em seu fluxo de trabalho diário, certifique-se de explicitamente adicione a dependência na CLI em seu 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”,
  },

Os aplicativos Android são ~3,8 Mb menores graças à fusão da Native Library

O React Native 0.76 será fornecido com um número reduzido de bibliotecas nativas, pois mesclamos grande parte do nosso código nativo em uma única biblioteca chamada libreactnative.so.

Essa mudança vem com a redução no tamanho do aplicativo e a melhoria no desempenho de inicialização do aplicativo no Android. A partir de nossos benchmarks, descobrimos que o tamanho do aplicativo será reduzido em ~3,8 MB (20% do total) e o tempo médio de inicialização do aplicativo será reduzido em ~15 ms (~8%) (fonte).

Por outro lado, esta é uma mudança drástica tanto para desenvolvedores de aplicativos quanto de bibliotecas.

Os desenvolvedores de aplicativos terão que atualizar seus aplicativos onCreate como se segue:

+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 alteração é necessária para carregar corretamente libreactnative.so e é incluído no auxiliar de atualização.

Os autores da biblioteca não serão afetados por essa alteração, a menos que você tenha código C++ personalizado.

Para um mergulho técnico profundo nessa mudança e sugestões para autores de bibliotecas, você pode ler mais sobre isso no posto dedicado.

Atualizações para requisitos mínimos de SDK para iOS e Android

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

• iOS — de 13.4 a 15.1
• Android — do SDK 23 para SDK 24 (Andróide 7)

Esta mudança foi anunciada no início do ano, quando 0,75 foi libertado. Para obter mais informações básicas, consulte as postagens dedicadas Android e iOS.

Outras mudanças de última hora

• Animação
• Pare de enviar atualizações de estado para o React em animação em loop. Isso estava causando uma nova renderização desnecessária com animações em loop.
• ferramentas de desenvolvimento:
• Remova as guias perf + rede do Painel do Inspetor em Novo Arco. (RFC)
• motor de texto
• Sempre use AttributedStringBox em vez de AttributedString em TextLayoutManager

Android

• renderização:
• Os fundos de visualização não estão mais diretamente ReactViewBackgroundDrawable ou CSSBackgroundDrawable

iOS

• turbomódulo
• Removido o RCT_EXPORT_CXX_MODULE_EXPERIMENTAL Macro para vinculação automática de módulo Cxx puro.

Agradecimentos

React Native 0.76 contém mais de 1070 compromissos de 156 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:

• Joe Vilches e Nick Gerleman adereços estilo box-shadow e filtro.
• Alex Caça Ferramentas de desenvolvimento React Native.
• Nicola Corti Android sendo enviado como uma única biblioteca.

Atualize para 0.76

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.

Se você usar o Expo, o React Native 0.76 será suportado no Expo SDK 52.

Se precisar criar um novo projeto usando a CLI, você pode executar este comando:

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

Informações: 0.76 é agora a versão estável mais recente do React Native e 0.73.x passa para não suportado. Para mais informações consulte Política de suporte do React Native. Nosso objetivo é publicar uma atualização final de fim de vida útil de 0,73 em um futuro próximo.