React Native 0.77 — Novos recursos de estilo, suporte a páginas de 16 KB do Android, modelo Swift

21 de janeiro de 2025 · 16 min de leitura

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

Esta versão oferece vários recursos: novos recursos de estilo, como suporte para display: contents, boxSizing, mixBlendMode, e outline- propriedades relacionadas para fornecer opções de layout mais poderosas; suporte a páginas Android de 16 KB para ser compatível com os dispositivos Android mais recentes. Também estamos modernizando o modelo da comunidade migrando-o para o Swift, enquanto continuamos a oferecer suporte e manter a compatibilidade com o Objective-C para desenvolvedores que o preferem.

Destaques

• Novos recursos CSS para melhores layouts, dimensionamento e mesclagem
• Suporte para Android versão 15 e suporte para página de 16 KB
• Atualizações de CLI e modelo da comunidade

Quebrando Mudanças

• Remoção de console.log() streaming no Metro

Destaques

Novos recursos CSS para melhores layouts, dimensionamento e mesclagem

O React Native 0.77 promove nosso objetivo de alinhar o React Native com a web. Adicionamos suporte para novas propriedades CSS para lhe dar mais controle sobre o layout, dimensionamento e mesclagem do seu aplicativo. Essas mudanças podem ajudar a simplificar layouts complexos, adicionar textura e tornar seu aplicativo mais acessível.

Informações: Todos esses novos recursos estão disponíveis apenas para o Nova Arquitetura.

Layouts mais simples com display: contents

O display: contents prop permite que um elemento desapareça da estrutura de layout enquanto seus filhos ainda são renderizados como se fossem filhos diretos do elemento pai. Pode ser útil para fins de estilo, onde você deseja aplicar estilos a elementos filhos sem afetar o layout, ao criar componentes wrapper que devem manipular eventos ou se você precisa interagir com o ShadowTree.

Tecnicamente falando, display: contents renderiza um elemento sem gerar uma caixa de layout, mas preserva as caixas de layout dos filhos do elemento. O elemento com display: contents é efetivamente achatado para fora da hierarquia de visualização.

Vamos dar uma olhada neste exemplo em que queremos exibir um alerta quando um widget é pressionado. Temos um vermelho Widget dentro de uma visualização de contêiner:

Container.jsx

function Container() {
  return (
    <View style={styles.container}>
      <Widget />
    </View>
  );
}

Agora, vamos construir um novo Alerting componente wrapper, com o objetivo de alertar o usuário quando um componente abaixo dele é pressionado, usando eventos experimentais de ponteiro. Para maior clareza, o fundo deste componente é azul. Isso pode ser parecido com o componente abaixo:

Contêiner.jsx

function Alerting({children}) {
  return (
    <View
      style={{backgroundColor: 'blue'}}
      onPointerDown={() => alert('Hello World!')}>
      {children}
    </View>
}

function Container() {
  return (
    <View style={styles.container}>
      <Alerting>
        <Widget />
      </Alerting>
    </View>
  );
}

Isso não faz exatamente o que queremos. Alerting adiciona uma nova caixa de layout, com seus próprios limites, separada da criança Widget. Dependendo do estilo do elemento que está envolvendo, isso pode resultar em mudanças visuais e funcionais significativas. Neste exemplo, o fundo azul responde aos toques com um alerta quando queremos que apenas a caixa vermelha "Olá Mundo" alerte quando tocada.

Se tentarmos isso novamente, ao definir display: contents no View invólucro de Alerting, só vemos alertas quando o usuário pressiona dentro dos limites originais do Widget. Isto é porque Alerting não adiciona mais sua própria caixa, mas ainda pode observar os eventos de ponteiro borbulhados Widget.

Container.jsx

function Alerting({children}) {
  return (
    <View
      style={{display: 'contents'}}
      onPointerDown={() => alert('Hello World!')}>
      {children}
    </View>
  );
}

// ... function Container ...

Tamanho da caixa

O boxSizing prop define como os vários adereços de dimensionamento do elemento (width, height, minWidth, minHeight, etc.) são computados. Se boxSizing é border-box, esses tamanhos se aplicam à caixa de borda do elemento. Se for content-box elas se aplicam à caixa de conteúdo do elemento. O valor padrão é border-box, isso é diferente do valor padrão na web. O documentação da web é uma boa fonte de informação se você deseja saber mais sobre como esse acessório funciona.

Aviso: border-box tem sido o padrão para sempre neste momento e tem sido o único boxSizing valor até adicionarmos content-box. Alterar o padrão seria uma mudança drástica que, de repente, quebraria vários layouts. Decidimos manter border-box como valor padrão para garantir compatibilidade com versões anteriores.

Para entender a diferença entre border-box e content-box, dê uma olhada neste exemplo, onde ambos Views tem padding: 20 e borderWidth: 10. Ao usar border-box, consideramos borda e preenchimento para o dimensionamento; ao usar content-box, consideramos apenas o conteúdo para o dimensionamento.

CSS mixBlendMode

O mixBlendMode prop permite que você controle como um elemento mistura suas cores com os outros elementos em seu contexto de empilhamento. Confira o Documentação MDN para uma visão geral completa de cada função de mesclagem.

Para ajudar a ter um controle mais granular sobre o que está se misturando, também adicionamos o isolation propriedade. Configuração isolation: isolate em um View forçá-lo-á a formar um contexto de empilhamento. Então, você pode definir isso em algum ancestral View para garantir que algum descendente View com mixBlendMode não se mistura além do isolado View.

Valores do mixBlendMode

• normal: O elemento é desenhado sobre seu fundo sem mesclagem.
• multiply: A cor de origem é multiplicada pela cor de destino e substitui o destino.
• screen: Multiplica os complementos dos valores de cor de fundo e de origem e, em seguida, complementa o resultado.
• overlay: Multiplica ou filtra as cores, dependendo do valor da cor de fundo.
• darken: Seleciona as cores mais escuras do fundo e da fonte.
• lighten: Seleciona o mais claro entre as cores de fundo e de origem.
• color-dodge: Ilumina a cor de fundo para refletir a cor de origem. Pintar com preto não produz alterações.
• color-burn: Escurece a cor de fundo para refletir a cor de origem. Pintar com branco não produz nenhuma mudança.
• hard-light: Multiplica ou filtra as cores, dependendo do valor da cor de origem. O efeito é semelhante a lançar um holofote forte sobre o cenário.
• soft-light: Escurece ou clareia as cores, dependendo do valor da cor de origem. O efeito é semelhante a iluminar o cenário com um holofote difuso.
• difference: Subtrai a cor mais escura das duas cores constituintes da cor mais clara.
• exclusion: Produz um efeito semelhante ao do modo Diferença, mas com menor contraste.
• hue: Cria uma cor com a tonalidade da cor de origem e a saturação e luminosidade da cor de fundo.
• saturation: Cria uma cor com a saturação da cor de origem e a tonalidade e luminosidade da cor de fundo.
• color: Cria uma cor com a tonalidade e saturação da cor de origem e a luminosidade da cor de fundo. Isso preserva os níveis de cinza do fundo e é útil para colorir imagens monocromáticas ou tingir imagens coloridas.
• luminosity: Cria uma cor com a luminosidade da cor de origem e a tonalidade e saturação da cor de fundo. Isso produz um efeito inverso ao do modo Cor.

Adereços de contorno

Também introduzimos outlineWidth, outlineStyle, outlineSpread e outlineColor. Esses adereços de contorno funcionam de forma muito semelhante aos respectivos border adereços, mas é renderizado em torno do caixa de borda em oposição a em torno do caixa de enchimento. Esses adereços permitem destacar elementos desenhando seu contorno sem afetar seu layout.

Confira o Documentação MDN para mais detalhes.

Suporte para Android versão 15 e suporte para página de 16 KB

Forçado de ponta a ponta no Android 15

Já fizemos alguns trabalhos para oferecer suporte ao Android 15 na versão anterior. Uma das mudanças perceptíveis no Android 15 é a exibição forçada de ponta a ponta quando você cria aplicativos com targetSdk 35.

Se você ainda não investigou isso, consulte nosso documento anterior recomendação sobre como isso deve ser tratado, pois ignorar isso pode potencialmente quebrar sua interface de usuário no aplicativo.

Nota: Se você estiver usando o react-native-safe-area-context no seu aplicativo, a biblioteca já está lidando com o processo forçado de ponta a ponta para você.

Suporte de tamanho de página de 16 KB para Android

Android 15 introduz suporte para tamanho de página de memória de 16 KB, permitindo melhorias de desempenho para aplicativos e muito mais, mas tornando aplicativos anteriores baseados em 4 KB potencialmente incompatíveis em dispositivos futuros; atualmente, é um recurso opcional para desenvolvedores testarem em dispositivos selecionados para se prepararem para o tamanho de página de 16 KB, que é o padrão do sistema operacional.

Com a versão 0.77, o React Native está pronto para oferecer suporte total a páginas de 16 KB e os desenvolvedores poderão testar e enviar aplicativos para dispositivos de 16 KB usando-o.

Por favor, consulte o site oficial dos desenvolvedores Android para mais informações sobre o suporte de 16 KB.

Atualizações de CLI e modelo da comunidade

CLI da comunidade: depreciação do init do react-native

Esta versão completa totalmente a descontinuação do react-native init comando que foi introduzido no React Native 0.75.

Como lembrete, você não poderá usar o react-native init comando mais, mas você terá que:

• Use uma estrutura como a Expo, com seu próprio comando dedicado para criar um novo projeto: npx create-expo-app
• Invoque a CLI da Comunidade diretamente com npx @react-native-community/cli init

CLI da comunidade: Remoção dos manipuladores de teclas “executar no iOS/Android” do Metro

Nesta versão, removemos os atalhos de teclado ‘a’ e ‘i’ do Metro. Esses atalhos foram usados para invocar o run-android & run-ios comandos CLI da comunidade. Esses atalhos de teclado proporcionaram pior experiência ao desenvolvedor e raramente foram usados. Além disso, acreditamos que as estruturas são mais adequadas para orquestrar as saídas do terminal.

Você pode ler mais sobre essa mudança neste post dedicado.

Modelo de comunidade: Swift como linguagem de programação para aplicativos iOS

Informações: Os projetos que utilizam o Expo não devem ser afetados por esta alteração.

Essa mudança nos permitiu reduzir o modelo da comunidade substituindo três arquivos (main.m, AppDelegate.h e AppDelegate.mm) com um único e novo AppDelegate.swift.

Tecnicamente, essa é uma mudança drástica: você verá a mudança de Objective-C para Swift no auxiliar de atualização assim:

Você não precisa migrar para o Swift: a variante Objective-C++ do modelo da comunidade iOS ainda é suportada (observe que você ainda precisa integrar o RCTAppDependencyProvider). Novos projetos serão gerados usando Swift como linguagem de aplicativo iOS, embora você sempre possa migrar de volta para Objective-C se precisar.

Limitações

Se o seu aplicativo tiver alguns módulos locais escritos em C++, você não poderá registrá-los no Swift, conforme mostrado em este guia.

Se o seu aplicativo se enquadra nesta categoria, pule a migração do AppDelegate para Swift e continue usando Objective-C++ para seu aplicativo.

O núcleo React Native é desenvolvido principalmente usando C++ para incentivar o compartilhamento de código entre iOS e Android e outras plataformas. A interoperabilidade entre Swift e C++ ainda não está madura nem estável. Estamos procurando maneiras de preencher essa lacuna e permitir que você migre para o Swift também.

RCTAppDependencyProvider

O React Native 0.77 altera ligeiramente a forma como o aplicativo carrega dependências de terceiros. Esta é uma nova linha no modelo da comunidade que, se perdida, pode causar alguns problemas de tempo de execução. Certifique-se de adicioná-lo ao seu aplicativo.

As linhas equivalentes do Objective-C são as seguintes:

AppDelegate.mm

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"<Your app Name>";
  self.dependencyProvider = [RCTAppDependencyProvider new];
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
// remaining of the AppDelegate

Quebrando Mudanças

Remoção de console.log() streaming no Metro

Queremos que todos os aspectos da depuração do React Native se comportem de forma confiável e correspondam à funcionalidade das ferramentas modernas do navegador. Para atender a esse padrão de qualidade, o encaminhamento de logs via Metro, originalmente obsoleto na versão 0.76, é removido na versão 0.77.

Essa integração dependia de uma abordagem personalizada para se comunicar com o destino de depuração no dispositivo. Com essa mudança, estamos migrando exclusivamente para o Chrome DevTools Protocol (CDP).

• Para visualizar os logs JS, use Ferramentas de desenvolvimento nativas do React e seu painel de console completo — com suporte para filtragem de log, inspeção avançada de objetos, expressões ao vivo e muito mais.
• Você também pode conectar o VS Code como um depurador CDP, por meio de extensões de terceiros, como Ferramentas Expo e IDE de radônio.
• Observe que essas integrações não são suportadas diretamente pela equipe React. No entanto, estamos trabalhando no suporte inicial ao VS Code em 2025.
• A Expo continua oferecendo streaming de log no Expo CLI.

Para mais informações, consulte Por que os logs JavaScript estão saindo do Metro?

Outras mudanças de última hora

Geral

Animação

• Animações de loop nativas não enviam uma atualização de estado do React toda vez que o loop termina.

Layout

• position de cabeçalhos pegajosos em ScrollView agora será levado em consideração.
• O posicionamento absoluto agora está se comportando de uma forma mais compatível

Módulos JS:

• Remover ReactFabricInternals módulo
• Isso não será mais acessível

Módulos nativos

• NativeModulesobjeto agora pode ser usado para carregar turbomódulos em JS.
• Isso melhora a compatibilidade entre módulos nativos e módulos nativos Turbo

Pacotes

• dev-middleware: As estruturas devem especificar serverBaseUrl relativo ao host de middleware

Alterações na API:

• Tipo removido para useConcurrentRoot de AppRegistry, pois já foi ignorado
• Removido refs propriedade de NativeMethods Definição de TypeScript.

Mudanças na UX:

• Remova “executar no iOS” e “executar no Android” dos comandos da chave do servidor de desenvolvimento

Android

Kotlin

• Esta é a primeira versão do React Native compilada contra Kotlin 2.0.21. Você pode ler mais sobre as mudanças que virão com o Kotlin 2.0 no notas de lançamento de idioma.

Alterações na API:

• Nulabilidade:
• Obtentores não primitivos em ReadableArray agora são digitados corretamente como opcionais
• Fazer ReactHost.createSurface() método não anulável

Renomeado:

• DevSupportManagerBase.getCurrentContext()para DevSupportManagerBase.getCurrentReactContext()

Além disso, várias APIs foram removidas ou tiveram sua visibilidade restrita, de modo que não podem mais ser acessadas. Essas APIs eram internas e não eram necessárias diretamente para os desenvolvedores do React Native. Você pode encontrar a lista completa abaixo:

Lista de APIs Android removidas:

Os seguintes pacotes agora são internos e não podem mais ser acessados:

• com.facebook.react.views.progressbar
• com.facebook.react.views.safeareaview
• com.facebook.react.modules.accessibilityinfo
• com.facebook.react.modules.appstate
• com.facebook.react.modules.clipboard
• com.facebook.react.modules.devmodule
• com.facebook.react.modules.reactdevtoolssettings
• com.facebook.react.views.unimplementedview

As seguintes classes agora são internas ou foram removidas, portanto não podem mais ser acessadas:

• BackHandler.removeEventListener
• BaseViewManagerInterface
• BindingImpl
• CompositeReactPackage
• DebugOverlayTags
• Método create() de DefaultDevSupportManagerFactory
• DevToolsReactPerfLogger
• FabricComponents
• ImageStoreManager
• InteropModuleRegistry
• NativeModulePerfLogger
• NoopPrinter
• NotThreadSafeViewHierarchyUpdateDebugListener
• OkHttpCallUtil
• PrinterHolder
• Printer
• ReactDebugOverlayTags
• ReactNativeFlipper
• ReactViewBackgroundManager
• ReactViewGroup.getBackgroundColor()
• ReactVirtualTextShadowNode
• ReactVirtualTextViewManager
• SimpleSettableFuture
• SwipeRefreshLayoutManager
• TaskCompletionSource
• Parâmetro jsBundleLoader de DefaultReactHost.getDefaultReactHost()

iOS

• Alterações na API

Removido

• RCTConstants.RCTGetMemoryPressureUnloadLevel
• partialBatchDidFlush
• RCTRuntimeExecutor
• UseNativeViewConfigsInBridgelessMode
• Substituído por um sinalizador de recurso adequado
• UseTurboModuleInteropForAllTurboModules
• A camada de interoperabilidade está sempre ativa para TMs

Alterado

• Substituir usos de CGColorRef com UIColor
• RCTAppDelegate agora requer o uso do RCTDependencyProvider para carregar dependências de terceiros
• CocoaPods define a versão C++ para todas as dependências de terceiros para evitar problemas de compilação.

React 19?

React 19 foi lançado em 6 de dezembro de 2024. Na época, já cortamos a ramificação para React Native 0.77 e já lançamos três RCs para React Native 0.77. Era tarde demais no lançamento do React Native 0.77 para introduzir o React 19 nesta versão.

O React 19 será lançado no React Native 0.78, e já cortamos a ramificação para esta versão. Você pode tentar criando um novo aplicativo com o comando:

npx @react-native-community/cli init YourReact19App --version 0.78.0-rc.0

Agradecimentos

React Native 0.77 contém mais de 1061 compromissos de 161 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:

• Jakub Piasecki por contribuir para o display: contents recurso
• Nick Gerleman, Joe Vilches e Jorge Cabiedes Acosta para lançar os novos recursos de estilo
• Alan Lee para o conteúdo de suporte da página Android 16 Kb
• Riccardo Cipolleschi e Oskar Kwaśniewski para apoiar a migração do modelo para Swift
• Nicola Corti para o react-native init conteúdo do ciclo de depreciação
• Alex Caça para o conteúdo sobre a remoção de console.log do metrô

Atualize para 0.77

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 o Expo, o React Native 0.77 será suportado no Expo SDK 52 (instruções sobre como atualizar o React Native dentro do seu projeto Expo para 0.77.0 estarão disponíveis em uma postagem separada no blog do Expo em um futuro próximo).

Informações: 0.77 é agora a versão estável mais recente do React Native e 0.74.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,74 em um futuro próximo.