Web y React Native

El mismo import

Instala un paquete e importa desde su raíz en ambas plataformas. React es la única dependencia peer obligatoria; React Native es una dependencia peer opcional para apps nativas. Ninguna plataforma necesita provider, envoltorio ni llamada de configuración.

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

Cómo se reproduce el movimiento

En la web, los componentes se reproducen con la Web Animations API y resortes muestreados analíticamente, así que no hay librería de animación que cargar ni renders de React por fotograma. En React Native, los componentes usan Animated con el driver nativo para transforms y opacidad, y el driver de JS solo donde cambia el layout (ancho o alto).

Particularidades de React Native

La API es la misma; estas son las diferencias que notarás en un dispositivo.

• Los números y el texto en streaming siguen siendo un Text real, así que la selección, el ajuste de línea, numberOfLines y la accesibilidad se comportan como siempre.
• MotionSheet y MotionZoom se renderizan en un Modal transparente, y el botón de retroceso los cierra.
• Los ScrollView dentro de una hoja conservan sus propios gestos; la hoja se arrastra por su asa y sus zonas fijas.
• MotionHold confirma directamente desde la acción de activar de accesibilidad.
• MotionSwap inline mide el contenido nuevo en una línea; usa inline=— para contenido que se ajusta en varias.

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

Tu layout sigue siendo tuyo

Los componentes respetan el layout propio de la plataforma: métricas del texto, ajuste de línea, escalado de la fuente, restricciones del padre y tus estilos. La animación nunca impone a tu texto un ancho de carácter, una altura fija ni una máscara de recorte.

Qué se verifica y dónde

El comportamiento web se verifica en navegadores reales. El de React Native está cubierto por pruebas de los modelos compartidos y un renderizador simulado, así que revisa los gestos y el layout en tus dispositivos de destino antes de publicar.