Web et React Native

Le même import

Installez un paquet et importez depuis sa racine sur les deux plateformes. React est la seule dépendance peer obligatoire ; React Native est une dépendance peer facultative pour les applications natives. Aucune plateforme n’a besoin de provider, d’enveloppe ni d’appel de configuration.

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

Comment le mouvement est joué

Sur le web, les composants sont joués par la Web Animations API avec des ressorts échantillonnés analytiquement : aucune bibliothèque d’animation à charger et aucun rendu React à chaque image. Sur React Native, les composants utilisent Animated avec le driver natif pour les transforms et l’opacité, et le driver JS uniquement là où la mise en page (largeur ou hauteur) change.

Spécificités de React Native

L’API est la même ; voici les différences que vous remarquerez sur un appareil.

• Les nombres et le texte en streaming restent un vrai Text : sélection, retour à la ligne, numberOfLines et accessibilité se comportent comme d’habitude.
• MotionSheet et MotionZoom sont rendus dans un Modal transparent, et le bouton retour les ferme.
• Les ScrollView internes d’un panneau gardent leurs propres gestes ; le panneau se fait glisser par sa poignée et ses zones fixes.
• MotionHold confirme directement depuis l’action d’activation d’accessibilité.
• MotionSwap inline mesure le nouveau contenu sur une seule ligne ; utilisez inline=— pour un contenu qui passe à la ligne.

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

Votre mise en page reste la vôtre

Les composants respectent la mise en page propre à la plateforme : métriques du texte, retour à la ligne, mise à l’échelle de la police, contraintes du parent et vos styles. Le mouvement n’impose jamais à votre texte une largeur de caractère, une hauteur fixe ni un masque de découpe.

Ce qui est vérifié, et où

Le comportement web est vérifié dans de vrais navigateurs. Le comportement React Native est couvert par des tests des modèles partagés et un moteur de rendu simulé : vérifiez les gestes et la mise en page sur vos appareils cibles avant une publication.