Web e React Native

Lo stesso import

Installa un pacchetto e importa dalla sua radice su entrambe le piattaforme. React è l’unica peer dependency obbligatoria; React Native è una peer facoltativa per le app native. Nessuna delle due piattaforme richiede provider, wrapper o chiamate di configurazione.

// 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} />
    </>
  );
}

Come viene riprodotto il movimento

Sul web i componenti vengono riprodotti dalla Web Animations API con molle campionate in modo analitico, quindi non c’è nessuna libreria di animazione da caricare né render di React a ogni frame. Su React Native i componenti usano Animated con il driver nativo per transform e opacity, e il driver JS solo dove cambia il layout (larghezza o altezza).

Particolarità di React Native

L’API è la stessa; queste sono le differenze che noterai su un dispositivo.

• Numeri e testo in streaming restano un vero Text, quindi selezione, a capo, numberOfLines e accessibilità si comportano come sempre.
• MotionSheet e MotionZoom vengono renderizzati in un Modal trasparente, e il tasto Indietro li chiude.
• Gli ScrollView interni a uno sheet mantengono i propri gesti; lo sheet si trascina dalla maniglia e dalle aree fisse.
• MotionHold conferma direttamente dall’azione di attivazione dell’accessibilità.
• Un MotionSwap inline misura il nuovo contenuto su una sola riga; usa inline=— per contenuti che vanno a capo.

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>
  );
}

Il tuo layout resta tuo

I componenti mantengono il layout proprio della piattaforma: metriche del testo, a capo, scala dei font, vincoli del genitore e i tuoi stili. Il movimento non impone mai al tuo testo una larghezza dei caratteri, un’altezza fissa o una maschera di ritaglio.

Che cosa è verificato e dove

Il comportamento sul web è verificato in browser reali. Quello su React Native è coperto da test dei modelli condivisi e da un renderer simulato, quindi controlla gesti e layout sui tuoi dispositivi di destinazione prima di una release.