react-native-reanimated
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"
}
```
</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',
],
}; ```
-
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ライブラリは、以下の一覧に記載されているメソッドのほとんどをサポートするターボモジュールを提供します。
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サポートに関していくつかの例外があります。このセクションでは、これらの例外について説明します。
- Vegaプラットフォームでは、
useAnimatedSensorはサポートされません。FireTVでは、現在のところセンサーはサポートされていません。 - Vegaプラットフォームでは、
useReducedMotionはサポートされません。Vegaでは、現在のところモーション軽減機能を有効/無効にする設定はありません。 - レイアウトアニメーション
はまだFabricに実装されていないため、Vegaプラットフォームではサポートされません。 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日

