Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

react-native-reanimated

react-native-reanimated

React Native Reanimatedは、AnimatedライブラリAPIの基盤として、より包括的で低レベルな抽象化を提供します。これにより、特にジェスチャーベースの対話操作に関して柔軟性が大幅に強化されます。

Reanimatedを使用すると、UIスレッド（英語のみ）で動作するスムーズなアニメーションや対話操作を簡単に作成できます。

テクニカルドキュメント

このライブラリとAPIの詳細については、Software Mansionの公式ドキュメントのhttps://docs.swmansion.com/react-native-reanimated/（英語のみ）を参照してください。

インストール

  1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

クリップボードにコピーしました。

    "dependencies": {
         ...
         "@amazon-devices/react-native-reanimated": "~2.0.0"
    }
    ```
   </div>

2. babel.config.jsに「@amazon-devices/react-native-reanimated」プラグインを追加します。
   <p><button id="tYpKuYLt_copy-button" type="button" class="btn btn-default btn-sm copy-button" data-clipboard-action="copy">
    <i class="fa fa-files-o" aria-hidden="true"></i> コードをコピー </button>
    <span id="tYpKuYLt_copy-button_tooltip" class="tooltip-for-copy-button">クリップボードにコピーしました。</span></p><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script src="https://amzndevresources.com/jekyll/js/clipboardcopy.js"></script>

   <div id="tYpKuYLt" markdown="block">


module.exports = {
  presets: [
    ... // ここには追加しないでください
  ],
  plugins: [
    ...
    '@amazon-devices/react-native-reanimated/plugin',
  ],
};    ```

  1. Metroバンドラーのキャッシュをクリアするには、次のコマンドを実行します。

    npm start -- --reset-cache

  2. npm installコマンドを実行して、package-lock.jsonファイルを再インストールします。

詳細およびコンテキストについては、Software MansionのドキュメントのInstallation（英語のみ）を参照してください。

例

次の例は、withTimingメソッドを使用して、単純なアニメーションを無限ループで実行する方法を示しています。

クリップボードにコピーしました。


import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

export default function App() {
  const offset = useSharedValue(200);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  React.useEffect(() => {
    offset.value = withRepeat(
      withTiming(-offset.value, { duration: 1500 }),
      -1,
      true
    );
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

次の例は、withSpring関数を使用して、ばねに基づくアニメーションを実行する方法を示しています。

クリップボードにコピーしました。


import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

const initialOffset = 200;

export default function App() {
  const offset = useSharedValue(initialOffset);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  React.useEffect(() => {
    offset.value = withRepeat(withSpring(-offset.value), -1, true);
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

APIサポート

VegaのReanimatedライブラリは、以下の一覧に記載されているメソッドのほとんどをサポートするターボモジュールを提供します。

Animations

メソッド 説明
withTiming 再生時間とイージングに基づくアニメーションを作成します。
withSpring ばねに基づくアニメーションを作成します。
withDecay 摩擦を受けて動くオブジェクトを模倣するアニメーションを作成します。アニメーションは指定された速度で開始され、指定された減速率に従って徐々に減速して停止します。
withSequence 複数のアニメーションを順番に実行するアニメーションモディファイアーです。
withRepeat アニメーションを指定回数または無限に繰り返すアニメーションモディファイアーです。
withDelay アニメーションを遅延して開始するアニメーションモディファイアーです。

コア

メソッド 説明
useSharedValue コンポーネント内に共有値を定義します。
useAnimatedStyle StyleSheetのスタイルに似た、アニメーション化できるスタイルオブジェクトを作成します。
useAnimatedProps 共有値を使用してアニメーション化できる、アニメーション化されたプロパティオブジェクトを作成します。
useAnimatedRef ビューの参照を取得します。measure、scrollTo、useScrollViewOffsetの各関数と共に使用されます。
useDerivedValue 既存の共有値に基づいて新しい共有値を作成します。既存の共有値はリアクティブな状態に保たれます。
createAnimatedComponent 任意のReact Nativeコンポーネントのアニメーション化されたバージョンを作成します。コンポーネントをcreateAnimatedComponentでラップすると、そのコンポーネントに関連付けられているプロパティやスタイルをReanimatedでアニメーション化できます。
cancelAnimation 共有値とペアになっている実行中のアニメーションをキャンセルします。

スクロール

メソッド 説明
scrollTo スクロールビューのアニメーション化された参照を使用して、UIスレッドで指定のオフセットまで同期的にスクロールします。これにより、遅延のないスムーズなスクロールを実行できます。
useScrollViewOffset ScrollViewのオフセットに基づいてアニメーションを作成します。このフックは、ScrollViewが水平方向か垂直方向かを自動的に検出します。
useAnimatedScrollHandler React Nativeのスクロール可能なコンポーネントで使用できるイベントハンドラーの参照を返す便利なフックです。

デバイス

メソッド 説明
useAnimatedKeyboard 現在のキーボードの位置に基づいてアニメーションを作成します。
useAnimatedSensor デバイスのセンサー（加速度計、ジャイロスコープ、重力センサー、磁場センサー、回転センサー）からのデータに基づいてアニメーションを作成します。
useReducedMotion モーション軽減に関するシステム設定を照会します。

スレッド

メソッド 説明
runOnJS ほかの方法ではUIスレッドから実行できない、ワークレット化*されていない関数を非同期に実行します。
runOnUI ワークレット化された関数をUIスレッドで非同期に実行します。
createWorkletRuntime JSスレッドやUIスレッドとは別のスレッドでワークレットを実行するために使用できる、新しいJSランタイムを作成します。
ワークレット化
JavaScript関数を、UIスレッドでコピーして実行できるシリアル化可能なオブジェクトに変換すること。"worklet";ディレクティブでマークされた関数は、Reanimated Babelプラグインによって自動的に検出され、ワークレット化されます。

ユーティリティ

メソッド 説明
interpolate 線形補間を使用して、ある範囲の値を別の範囲にマップします。
clamp 値を指定した範囲に制限します。
interpolateColor 線形補間を使用して、入力範囲を出力カラーにマップします。
getRelativeCoords 指定されたビューを基準として画面上の相対位置を特定します。

高度なAPI

メソッド 説明
measure 画面上のビューのサイズと位置を同期的に取得します。すべての処理はUIスレッドで実行されます。
useAnimatedReaction 共有値が変更されたときに応答できるようにします。
useFrameCallback フレームが更新されるたびに関数を実行します。
useEvent ネイティブイベントで呼び出されるイベントハンドラーを返す低レベルフックです。useAnimatedGestureHandlerやuseAnimatedScrollHandlerなどのカスタムイベントハンドラーフックを作成するには、これを使用する必要があります。
useHandler コンテキストオブジェクトと、ワークレットを再構築する必要があるかどうかを示す値を返す低レベルフックです。useAnimatedGestureHandlerやuseAnimatedScrollHandlerなどのカスタムイベントハンドラーフックを作成するには、これを使用する必要があります。
dispatchCommand UIスレッドから同期的にネイティブコンポーネントのコマンドをディスパッチできます。
setNativeProps コンポーネントのプロパティを命令的に更新します。

VegaのReanimatedライブラリには、APIサポートに関していくつかの例外があります。このセクションでは、これらの例外について説明します。

  1. Vegaプラットフォームでは、useAnimatedSensorはサポートされません。FireTVでは、現在のところセンサーはサポートされていません。
  2. Vegaプラットフォームでは、useReducedMotionはサポートされません。Vegaでは、現在のところモーション軽減機能を有効／無効にする設定はありません。
  3. レイアウトアニメーションはまだFabricに実装されていないため、Vegaプラットフォームではサポートされません。
  4. SET（Shared Element Transition）を使用すると、ある画面上のコンポーネントを別の画面上のコンポーネントにスムーズに変換できます。これは試験的な機能であり、Vegaではまだサポートされていません。

Vegaでの既知の問題

  • 高速リフレッシュが使用された後、withRepeatを使用するアニメーションがリピートを停止します。
  • 高速リフレッシュが使用された後、アニメーションでスタイルが更新されません。

サポートされているバージョン

パッケージ名 Amazon NPMライブラリのバージョン OSS NPMライブラリのバージョン Vega OSのビルド番号 Vega SDKバージョン リリースノート
@amazon-devices/react-native-reanimated 2.0.0+3.5.4 3.5.4 OS 1.1 (201010435950) 0.19 システム分散ライブラリとしてリリースされました。初期リリースでは下位互換性のチェックは必要ありません。

関連リソース

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。

クレジット

このプロジェクトは、Shopify、Expo.io（英語のみ）、Software Mansion（英語のみ）の協力により構築され、維持されています。

Last updated: 2025年9月30日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2025, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ