React Native 0.77 - Novos Recursos de Estilo, Suporte ao Android 16KB Page e Modelo Swift

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

Nesta versão, temos vários recursos: novas capacidades de estilo como suporte para display: contents, boxSizing, mixBlendMode e propriedades relacionadas a outline para fornecer opções de layout mais poderosas; suporte ao Android 16KB page para ser compatível com os dispositivos Android mais recentes. Estamos também modernizando o modelo da comunidade migrando-o para Swift, enquanto continuamos a apoiar e manter a compatibilidade com Objective-C para desenvolvedores que preferem essa linguagem.

Highlights

Mudanças Incompatíveis

Destaque

Novos Recursos CSS para layouts melhores, tamanhos e mesclagens

O React Native 0.77 visa alinhar o React Native com a web. Adicionamos suporte para novas propriedades CSS para dar mais controle sobre o layout, tamanho e mesclagem do seu aplicativo. Essas alterações podem ajudar a simplificar layouts complexos, adicionar textura e tornar seu aplicativo mais acessível.

Layouts Simples com display: contents

A propriedade display: contents 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. Isso pode ser útil para fins de estilo onde você deseja aplicar estilos a elementos filhos sem afetar o layout, ao construir componentes wrapper que devem lidar com eventos ou se precisar interagir com o ShadowTree.

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

Vamos dar uma olhada neste exemplo onde queremos exibir um alerta quando um widget é pressionado. Temos um widget vermelho dentro de uma view contêiner:

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

Agora, vamos construir um novo componente wrapper Alerting, com o objetivo de alertar o usuário quando um componente abaixo dele é pressionado, usando eventos ponteiros experimentais. Para clareza, a cor de fundo deste componente é azul. Isso pode parecer algo como o componente abaixo:

Container.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. O Alerting adiciona uma nova caixa de layout, com seus próprios limites, separados da criança Widget. Dependendo do estilo do elemento que está envolvendo, isso pode resultar em mudanças significativas visual e funcionalmente. Neste exemplo, o fundo azul responde a toques com um alerta quando queremos apenas para o quadrado vermelho de