Веб і 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 покрито тестами спільних моделей і імітованим рендерером, тож перед випуском перевірте жести й розкладку на цільових пристроях.