react-native-gesture-handler

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

@amazon-devices/react-native-gesture-handlerライブラリは、プラットフォームのネイティブなタッチおよびジェスチャーシステムをReact Nativeに公開する宣言型APIです。

React Native Gesture Handlerは、React Nativeで最適なタッチベースのエクスペリエンスを構築するための、ネイティブ駆動のジェスチャー管理APIを提供します。

このライブラリを使用すると、ジェスチャーはJavaScriptレスポンダーシステムによって制御されるのではなく、UIスレッドで認識されて追跡されるようになります。このライブラリにより、タッチ操作とジェスチャートラッキングがスムーズになるのに加えて、信頼性と確度が向上します。

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは自動リンクライブラリとして構成され、アプリの実行時にリンクされます。このライブラリは、ライブラリがターゲットとしているVega向けReact Nativeのバージョンとのみ互換性が保証されます。

アプリのVega向けReact Nativeのバージョンをアップレベルするときは、ライブラリの依存関係をアップレベルするベストプラクティスを検討してください。

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

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。
- React Native 0.72
- React Native 0.83
クリップボードにコピーしました。
"dependencies": { ... "@amazon-devices/react-native-gesture-handler": "~2.0.0+2.13.0" }
クリップボードにコピーしました。
"dependencies": { ... "@amazon-devices/react-native-gesture-handler": "~4.0.0+2.29.0" }
npm installコマンドを使用して、package-lock.jsonファイルを再インストールします。

例

以下は、シングルタップとダブルタップを検出する例です。

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

import { Gesture, GestureDetector, GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const App: React.FC = () => {
  const [message, setMessage] = useState("");
  const ref = useRef<View>(null);

  useEffect(() => {
    ref.current?.focus();
  }, [])

  const singleTap = Gesture.Tap().onStart(() => {
    setMessage("シングルタップ");
  });

  const doubleTap = Gesture.Tap().numberOfTaps(2).onStart(() => {
    setMessage("ダブルタップ")
  });

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <View style={styles.container}>
        <Text>ボックスを1回または2回タップしてください</Text>
        <GestureDetector gesture={Gesture.Exclusive(doubleTap, singleTap)}>
          <View style={styles.box} focusable ref={ref} />
        </GestureDetector>
        <Text>{message}</Text>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'plum',
    margin: 20,
  }
});

以下は、Panジェスチャーハンドラーでボックスを移動する例です。

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

import { Gesture, GestureDetector, GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const App: React.FC = () => {
  const [posX, setPosX] = useState(0);
  const [posY, setPosY] = useState(0);
  const ref = useRef<View>(null);

  useEffect(() => {
    ref.current?.focus();
  }, [])

  const pan = Gesture.Pan().onChange((e) => {
    setPosX((x) => x + e.changeX);
    setPosY((y) => y + e.changeY);
  })

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text>ボックスを画面上でドラッグしてください</Text>
        <GestureDetector gesture={pan}>
          <View style={[styles.box, { top: posY, left: posX }]} focusable ref={ref} />
        </GestureDetector>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'plum',
    margin: 20,
  }
});

サポートされるAPI

VegaのGesture-Handlerライブラリは、公式ドキュメント（英語のみ）に記載されているすべてのジェスチャータイプ（英語のみ）とネイティブコンポーネント（英語のみ）に対するサポートを追加します。

ジェスチャータイプ

ジェスチャータイプ	説明
パン	パン（ドラッグ）ジェスチャーを認識し、その動きを追跡できる連続的なジェスチャーハンドラー。
タップ	1回または複数回のタップを認識する非連続的なジェスチャーハンドラー。
長押し	対応するビューを長押ししたときにアクティブ化される非連続的なジェスチャーハンドラー。
回転	回転ジェスチャーを認識し、その動きを追跡できる連続的なジェスチャーハンドラー。
ピンチ	ピンチジェスチャーを認識する連続的なジェスチャーハンドラー。このハンドラーは2本の指の間の距離を追跡し、その情報を使用してコンテンツを拡大または縮小できます。
フリング	動きに十分な長さと速度があるときにアクティブ化される非連続的なジェスチャーハンドラー。
手動	特定のアクティブ化基準もイベントデータも設定されていないプレーンなジェスチャー。アプリ開発者は、ジェスチャー状態マネージャー（英語のみ）を使用して、アプリロジックで状態をプログラム的に処理する必要があります。

ネイティブコンポーネント

ネイティブコンポーネント	説明
RNGestureHandlerButton	ジェスチャーハンドラーライブラリには、ボタンとして機能するネイティブコンポーネントが用意されています。これらは、RNコアの`TouchableHighlight`または`TouchableOpacity`を置き換えるものとして使用できます。

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

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
~2.0.x+2.13.0	0.23以前	`OS 1.1（1401010009820）`以前	0.72
~4.0.0+2.29.0	0.24	`OS 1.2（2101020054720）`	0.72、0.83