Web と React Native

同じ import

パッケージをひとつインストールし、どちらのプラットフォームでもそのルートから import します。必須の 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 では、解析的にサンプリングしたスプリングを Web Animations API で再生するので、読み込むアニメーションライブラリーも、フレームごとの React レンダリングもありません。React Native では、transform と opacity にネイティブドライバーを使う Animated で動き、レイアウト(幅や高さ)が変わるところだけ JS ドライバーを使います。

React Native ならではの点

API は同じです。ここに挙げるのは、デバイス上で気づく違いです。

• 数字とストリーミングテキストは本物の Text のままなので、選択、折り返し、numberOfLines、アクセシビリティはいつもどおりに動きます。
• MotionSheet と MotionZoom は透明な Modal の中に描画され、戻るボタンで閉じます。
• シートの内側の ScrollView は自分のジェスチャーを保ちます。シートはハンドルとスクロールしない部分からドラッグします。
• MotionHold は、アクセシビリティの activate アクションで直接確定します。
• インラインの MotionSwap は新しい中身を 1 行として計測します。折り返す中身には 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>
  );
}

レイアウトはあなたのもの

コンポーネントはプラットフォーム本来のレイアウトを保ちます。文字のメトリクス、折り返し、フォントの拡大、親の制約、そしてあなたのスタイル。モーションのために、文字幅の固定、テキストの高さの固定、クリッピングマスクをテキストに押し付けることはありません。

どこで何を検証しているか

Web での動作は実際のブラウザーで検証しています。React Native での動作は、共有モデルのテストとモックのレンダラーでカバーしているので、リリース前に対象のデバイスでジェスチャーとレイアウトを確認してください。