animating-react-native-expo

React Nativeのモーション

使用するドライバーに基づいて選択します。状態の変化にはCSSトランジション、マウントやリフローにはレイアウトアニメーション、ジェスチャー、スクロール、物理演算には共有値とワークレットを使用します。ビジネス状態はReact／アプリケーションの状態に保持し、フレームごとの値はReactの再レンダリングから切り離します。アニメーションがないほうが適切に機能する操作に、アニメーションを無理に適用しないでください。

実際のスタックを確認する

何かをインストールする前に、パッケージファイルとロックファイル、ネイティブアーキテクチャ／設定、関連コンポーネントを確認してください。パッケージマネージャーの依存関係ツリーを表示するコマンドと、最新の互換性ガイドを使用してください。パッケージが宣言されているだけでは、ネイティブバイナリやBabelプラグインとの互換性がある証拠にはなりません。

このスキルはReanimated 4とRNGH 3を対象としています。アプリがこのスタックを使用していない場合は、サポートされているバージョンへのアップグレードを慎重に選ぶか、インストール済みAPIの範囲内で対応してください。異なる世代のAPIを混在させたり、互換性ラッパーを追加したりしないでください。Expoでは、ネイティブパッケージをそれぞれ個別に最新バージョンへアップグレードするのではなく、SDKに対応したインストール解決方法を使用してください。セットアップを参照してください。古い文字列照合によるセットアップチェッカーは削除されています。「OK」という出力ではなく、実際の依存関係やビルドの証拠を確認してください。

インタラクションをひとつ最後まで実装する

初期、アクティブ、完了、キャンセル、中断、無効、モーション低減の各状態を定義してください。レイアウト境界、画面の向きやサイズの変化、複数のタッチ、画面遷移やアンマウントも考慮してください。アニメーション中の値がゼロ以外かどうかで切り替えるのではなく、明確な目標状態を選んでください。

Gesture Handler 3のonDeactivateには、**canceled**を含むイベントが渡されます。以前のように、2番目の引数として成功を示す値が渡されるわけではありません。成功したジェスチャーの後にのみ確定処理を実行し、アクティベーションが一度も発生しなかった場合もクリーンアップしてください。アニメーションが完了しても、バックエンドの変更が成功した証拠にはなりません。処理中は重複送信を防ぎ、実際の失敗や復旧をアプリケーションの状態に反映してください。

ワークレットのクロージャーは小さく保ってください。scheduleOnRNは、ナビゲーションやアプリケーションのコールバックなど、React Nativeランタイムで定義された関数にのみ使用してください。ワークレット内で作成した関数を渡し、それがJSに属すると想定しないでください。UIワークレットもUIスレッドを使用するため、負荷の高い計算は描画を妨げることがあります。

コンポジションと最新のv3の動作についてはジェスチャーの契約を、意図的に選定された開始パターンについてはレシピを参照してください。scripts/references/assets以下のパスは、アプリ内の同名ディレクトリではなく、インストール済みスキルのディレクトリに属します。

アクセシブルなモーションとライフサイクル

タイミング、スプリング、レイアウト、CSSの各経路で、システムのモーション低減設定を尊重してください。ReanimatedのuseReducedMotion()が返すのは起動時の設定であり、ライブサブスクリプションではありません。実行中の設定変更を反映する必要がある場合は、アプリのリアクティブなAccessibilityInfoサブスクリプションを使用し、クリーンアップ時にリスナーを削除してください。ドラッグ／スワイプ操作にはジェスチャー以外の操作手段を用意し、ラベル、フォーカス、無効状態、タッチ対象領域を維持してください。見た目上ビューが移動していても、操作領域とアクセシビリティ上の領域が正しく保たれる必要があります。

装飾的なループやフレームコールバックは、アンマウント時、画面外への移動時、バックグラウンド移行時、モーション低減による無効化時に停止してください。意味のある静的状態にリセットしてください。アクセシビリティを特定のフレームレートや退出エフェクトの完了に依存させないでください。

検証する

ロックされたスタックに対して、実際のコンポーネントを型チェックしてください。成功、キャンセル、中断、繰り返しのアクティベーション、処理中／エラーの結果、モーション低減、スクリーンリーダー向けの代替手段、サポート対象プラットフォームを検証してください。代表的なハードウェアで、リリースに近いビルドのプロファイルを取得してください。UIスレッド上で実行されても、60／120 fpsが保証されるわけではありません。JSCのRemote JS Debuggingではなく、Hermesに対応したデバッグを使用してください。

パッチ、選択したドライバー／API、実際に実行したテスト、残っているデバイスでの確認事項を報告してください。依存関係の文字列やモックアニメーションを、ネイティブランタイムの動作を証明するものとして扱わないでください。

対象別の参照先

• セットアップ：依存関係やネイティブビルドの不一致。
• ジェスチャー：v3 のライフサイクル、合成、または階層。
• Worklets：ランタイムをまたぐコールバック。
• CSS：スタイルの遷移／ループ。
• レイアウト：入場／退場／再配置。
• レシピ：インタラクションの適応。
• パフォーマンス：計測されたフレームの問題。

2026-09-13 に確認した情報源：上流の Reanimated 互換性と モーションの軽減、 RNGH 3 の移行、 および Expo との統合。