【React Native】 「React Native Gesture Handler」を使ってスライド/スワイプでアクションする

はじめに

昔のiPhoneのように、右にスライドしてロック画面を解除したり、ボタンなどをスライドすることで何かアクションを起こしたいなと思って調べた時のメモ。

内容

「react-native-gesture-responder」を使って、スライドを実現。
※https://www.npmjs.com/package/react-native-gesture-responder

以下の例は、左から右にスライドさせたときに動作させる例です。
吟じる人とは逆の方向です。

吟じる人と同じ方向がいい人は、参考ページより調べてみてください。

// 「react-native-gesture-handler」を読み込む
import Swipeable from 'react-native-gesture-handler/Swipeable';

// スワイプした後に裏で表示する領域
const LeftSwipeActions = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
    </View>
  );
};

// スワイプで処理を行う
const swipeFromLeftOpen = () => {
  // somethingAction();
};

// スワイプ領域をレンダリングする部分
const RenderItem = () => (
  // スワイプ領域
  <Swipeable
    renderLeftActions={LeftSwipeActions}
    onSwipeableLeftOpen={swipeFromLeftOpen}
  >
    <View
      style={{
        paddingHorizontal: 30,
        paddingVertical: 20,
        backgroundColor: 'white',
      }}
    >
      <Text>
        hogehoge
      </Text>
    </View>
  </Swipeable>
);

参考

• https://blog.logrocket.com/react-native-gesture-handler-swipe-long-press-and-more/
• https://blog.bitsrc.io/using-the-gesture-handler-in-react-native-c07f84ddfa49