Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

react-native-reanimated

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

React Native ReanimatedライブラリはAnimatedライブラリAPIを拡張し、ジェスチャーベースのインタラクションを使用する際の柔軟性を高めます。

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

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

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
"dependencies": {
      ...
      "@amazon-devices/react-native-reanimated": "~2.0.0"
}
```
babel.config.jsに@amazon-devices/react-native-reanimatedプラグインを追加します。
クリップボードにコピーしました。
```
 module.exports = {
   plugins: [
     ...
     '@amazon-devices/react-native-reanimated/plugin',
   ],
 };
```
Metroバンドラーのキャッシュをクリアするには、次のコマンドを実行します。
クリップボードにコピーしました。
```
npm start -- --reset-cache
```
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ライブラリは、以下の方法のほとんどをサポートするターボモジュールを提供します。

アニメーション

メソッド	説明
`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スレッドでは実行できない非workletized関数を非同期で実行します。
`runOnUI`	UIスレッドでワークレット化された関数を非同期的に実行します。
`createWorkletRuntime`	新しいJSランタイムを作成して、おそらくJSまたはUIスレッドとは異なるスレッドでワークレットを実行します。

ワークレット化

JavaScript関数を、UIスレッドでコピーして実行できるシリアル化可能なオブジェクトに変換すること。関数には「ワークレット」というマークが付いています。ディレクティブはReanimatedBabelプラグインによって自動的に選択され、ワークレット化されます。

ユーティリティ

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

高度なAPI

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

既知の問題と制限事項

VegaのReanimatedライブラリには、APIサポートに関していくつかの例外があります。

Vegaは以下のフックとメソッドをサポートしていません。

useAnimatedSensor
useReducedMotion
ファブリックのレイアウトアニメーション
SET（共有エレメントトランジション）
高速リフレッシュが使用された後、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	システム分散ライブラリとしてリリースされました。初期リリースでは下位互換性のチェックは必要ありません。

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

Credits

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

Last updated: 2025年10月13日