Web e React Native

O mesmo import

Instale um pacote e importe da raiz dele nas duas plataformas. React é a única dependência peer obrigatória; React Native é uma dependência peer opcional para apps nativos. Nenhuma plataforma precisa de provider, wrapper ou chamada de configuração.

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

Como o movimento é reproduzido

Na web, os componentes rodam na Web Animations API com molas amostradas analiticamente, então não há biblioteca de animação para carregar nem render do React por quadro. No React Native, os componentes usam Animated com o driver nativo para transforms e opacidade, e o driver JS só onde o layout (largura ou altura) muda.

Particularidades do React Native

A API é a mesma; estas são as diferenças que você vai notar no dispositivo.

• Números e texto em streaming continuam sendo um Text de verdade, então seleção, quebra de linha, numberOfLines e acessibilidade funcionam como sempre.
• MotionSheet e MotionZoom são renderizados em um Modal transparente, e o botão voltar os fecha.
• As ScrollViews dentro de um sheet mantêm os próprios gestos; o sheet é arrastado pela alça e pelas áreas fixas.
• MotionHold confirma direto pela ação de ativar da acessibilidade.
• O MotionSwap inline mede o conteúdo novo em uma linha; use inline=— para conteúdo que quebra linha.

import { Text, View } from 'react-native';
import { MotionNumber, MotionSheet } from '@kkwaenggwari/animated-chorus';

export function Wallet({ balance, open, setOpen }) {
  return (
    <View>
      <MotionNumber
        value={balance}
        intl
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      />
      <MotionSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]}>
        <Text>Recent activity</Text>
      </MotionSheet>
    </View>
  );
}

Seu layout continua seu

Os componentes mantêm o layout próprio da plataforma: métricas do texto, quebra de linha, escala da fonte, restrições do pai e seus estilos. O movimento nunca impõe ao seu texto uma largura de caractere, uma altura fixa ou uma máscara de recorte.

O que é verificado e onde

O comportamento na web é verificado em navegadores reais. O do React Native é coberto por testes dos modelos compartilhados e por um renderizador simulado, então confira gestos e layout nos seus dispositivos-alvo antes de publicar.