React Native Windows 0.85: novidades e como atualizar

Apenas a nova arquitetura

A mudança mais importante do React Native Windows 0.85 está na arquitetura. A equipe removeu a arquitetura legada, e agora todo aplicativo precisa rodar sobre o Fabric, o novo renderizador do React Native.

Vale lembrar que o renderizador antigo, conhecido como Paper, já tinha saído do projeto na versão 0.82. Agora, a versão 0.85 conclui o processo ao ativar a flag RCT_REMOVE_LEGACY_ARCH, que elimina o código legado restante.

Portanto, aplicativos que ainda usam a arquitetura antiga precisam migrar para o Fabric antes de atualizar. Projetos novos não sentem essa mudança, porque o template padrão já cria aplicações na nova arquitetura.

Essa decisão simplifica a manutenção do próprio framework. Com apenas um caminho de renderização, a equipe consegue concentrar esforços em desempenho, acessibilidade e paridade de propriedades com as outras plataformas.

Nova cadeia de ferramentas do React Native Windows

O segundo ponto de atenção está no ambiente de build. O React Native Windows 0.85 passa a exigir três componentes atualizados na máquina de desenvolvimento e no pipeline de integração contínua.

Além disso, a release atualiza dependências internas, como o boost 1.84, o hermes-windows e o PowerShell 7. Por isso, a recomendação oficial é atualizar o ambiente de build antes de trocar a versão do pacote.

Na prática, quem mantém agentes de build próprios precisa revisar as imagens antes da migração. Caso contrário, a compilação falha logo nos primeiros passos, mesmo que o código JavaScript continue correto.

Modal sem barra de título e sem borda

O componente Modal ganhou as propriedades hideTitleBar e hideBorder. Com elas, o aplicativo apresenta diálogos sem a barra de título nativa ou sem a borda padrão da janela.

Esse controle ajuda quando o design pede um diálogo totalmente customizado. Por exemplo, uma janela de confirmação com cabeçalho próprio não precisa mais conviver com a barra do sistema.

import React, { useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';

export function ConfirmDialog() {
  const [visible, setVisible] = useState(false);

  // hideTitleBar e hideBorder escondem a barra de título e a borda nativas no Windows
  return (
    <View>
      <Pressable onPress={() => setVisible(true)}>
        <Text>Open dialog</Text>
      </Pressable>

      <Modal
        visible={visible}
        transparent
        hideTitleBar
        hideBorder
        onRequestClose={() => setVisible(false)}
      >
        <View style={styles.dialog}>
          <Text style={styles.title}>Delete file?</Text>
          <Pressable onPress={() => setVisible(false)}>
            <Text>Cancel</Text>
          </Pressable>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  dialog: { padding: 24, backgroundColor: '#ffffff' },
  title: { fontSize: 18, marginBottom: 16 },
});

Nesse exemplo, o componente ConfirmDialog abre um diálogo com cabeçalho e ações próprios. Assim, todo o visual fica sob controle do estilo dialog, sem elementos nativos sobrepostos.

Estilos de outline na View

A View agora implementa as propriedades de estilo de outline. Com isso, mais uma parte da API de estilos do React Native passa a funcionar no Windows da mesma forma que nas outras plataformas.

O contorno desenha uma linha ao redor do elemento sem alterar o seu tamanho no layout. Por isso, ele funciona bem para indicar foco, seleção ou destaque sem empurrar os elementos vizinhos.

import { StyleSheet } from 'react-native';

// o outline não altera o tamanho do card no layout
export const styles = StyleSheet.create({
  selectedCard: {
    outlineWidth: 2,
    outlineStyle: 'solid',
    outlineColor: '#2563eb',
    outlineOffset: 4,
  },
});

Inicialização antecipada de TurboModules

Os TurboModules são os módulos nativos da nova arquitetura. Normalmente, o React Native inicializa cada um deles apenas quando o JavaScript faz o primeiro acesso.

A versão 0.85 permite inicializar um TurboModule de forma antecipada, antes da primeira chamada. Esse comportamento é opcional e atende aplicativos que precisam do módulo nativo pronto logo na abertura.

Segundo o pull request da funcionalidade, existem dois caminhos. O primeiro usa o novo atributo REACT_EAGER_TURBO_MODULE em módulos declarados com atributos; o segundo troca AddTurboModule por AddEagerInitTurboModule no registro manual do pacote.

Use esse recurso com moderação, porque cada módulo antecipado consome tempo durante a inicialização do aplicativo. Ou seja, ele faz sentido para serviços realmente críticos, como configuração ou telemetria inicial.

Tooltips, eventos e acesso à janela Win32

As tooltips agora aparecem também quando o elemento recebe foco pelo teclado. Além disso, apenas uma tooltip fica visível por vez, o que segue o comportamento esperado de teclado e acessibilidade no Windows.

A release no GitHub também cita o suporte ao evento onAuxClick. Esse evento permite reagir a cliques com botões auxiliares do mouse, como o botão do meio.

Para aplicativos Win32, o ReactNativeWin32App agora expõe o ReactNativeWindow. Dessa forma, o código nativo acessa diretamente a janela que hospeda o conteúdo React, sem soluções paralelas.

Texto e entrada

O TextInput agora escala corretamente em telas com fatores de escala diferentes. Antes, o campo podia aparecer desproporcional em monitores com configurações de escala distintas.

A versão também corrige o cálculo do tamanho de textos com Unicode. Isso afeta diretamente contadores de caracteres, limites de entrada e textos com emojis ou acentos combinados.

Outra correção relevante elimina um travamento no TextInput multilinha. O problema vinha de uma reentrada no TxDrawD2D, a rotina de desenho de texto, e derrubava o aplicativo em cenários específicos.

Por fim, a equipe corrigiu um assert em builds x86 que aparecia ao usar alinhamento customizado.

Toque e ScrollView

O tratamento de eventos de toque ficou mais confiável e mais rápido. Entre os problemas resolvidos estão toques presos ou toques mortos em elementos Pressable dentro de ScrollView em telas de alta densidade.

A rolagem por teclado também deixou de deslizar além do esperado quando o usuário segura uma tecla. Além disso, toques que permaneciam ativos depois da perda de captura do ponteiro agora são cancelados corretamente.

Duas mudanças internas completam o pacote. O campo isPrimary passa a usar o método IsPrimary() do Windows, e os identificadores de ponteiro de toque viram números pequenos e seguros para o JavaScript.

Renderização, acessibilidade e runtime

Na renderização, a versão corrige problemas com bordas arredondadas e com a Image que nem sempre redesenhava ao trocar a origem. Também melhora o contraste da barra de título do Modal quando a janela nativa fica inativa.

Na acessibilidade, o React Native Windows agora dispara eventos de seleção do UI Automation sempre que accessibilityState.selected muda. Assim, leitores de tela percebem a seleção de itens sem atrasos.

No runtime, três correções merecem destaque:

• um travamento ao obter o runtime durante o encerramento da instância;
• uma condição de corrida que podia entregar um runtime nulo ao call invoker;
• o tratamento de binaryType em mensagens binárias de WebSocket.

A equipe também removeu as implementações legadas WinRTWebSocketResource e JSBigStringResourceDll. Embora sejam internas, forks nativos que tocavam esses tipos podem precisar de ajustes.