Веб и React Native

Один импорт

Установите один пакет и импортируйте из его корня на обеих платформах. Единственная обязательная peer-зависимость — React; React Native — необязательная peer-зависимость для нативных приложений. Ни одной платформе не нужны provider, обёртка или вызов настройки.

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

Как воспроизводится движение

В вебе компоненты воспроизводятся через Web Animations API с аналитически рассчитанными пружинами, поэтому не нужно загружать библиотеку анимации и нет рендера React на каждый кадр. В React Native компоненты используют Animated с нативным драйвером для transform и opacity, а драйвер JS — только там, где меняется раскладка (ширина или высота).

Особенности React Native

API тот же; вот отличия, которые вы заметите на устройстве.

• Числа и потоковый текст остаются настоящим Text, поэтому выделение, переносы, numberOfLines и доступность работают как обычно.
• MotionSheet и MotionZoom рендерятся в прозрачном Modal и закрываются кнопкой «Назад».
• Внутренние ScrollView в шторке сохраняют свои жесты; шторку тянут за ручку и статичные области.
• MotionHold подтверждает сразу по действию активации доступности.
• Встроенный MotionSwap измеряет новое содержимое в одну строку; для переносимого содержимого используйте inline=—.

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

Ваша раскладка остаётся вашей

Компоненты сохраняют собственную раскладку платформы: метрики текста, переносы, масштаб шрифта, ограничения родителя и ваши стили. Движение никогда не навязывает вашему тексту ширину символов, фиксированную высоту или маску обрезки.

Что и где проверено

Поведение в вебе проверено в настоящих браузерах. Поведение в React Native покрыто тестами общих моделей и имитированным рендерером, поэтому перед выпуском проверьте жесты и раскладку на целевых устройствах.