【React Native】TouchableOpacityで長押しタップ時の処理を実装する

みなさん、こんにちは！

こんにちは！
今回はReact Nativeにおける、長押しタップ時の処理について、お伝えしたいと思います。

開発環境
・Expo SDK 38(React Native 0.62)

長押しタップの処理はonLongPressを使う

TouchableOpacityコンポーネントにはpropsにonLongPressを持っています。
基本的な書き方はonPressと使い方は同じです。

onPressとの違いについて
onPress：通常のタップ時の処理
onLongPress：長押しタップ時の処理

onLongPressの書き方

例として、長押しタップ時にアラートを表示する処理を実装したいと思います。

<code>export default function chatList() {
  return (
    <View>
      <TouchableOpacity
        onLongPress={() => {
          alert('長押しタップ成功！');
        }}
      >
        <Text style={{color: 'white', backgroundColor: 'blue', height: 30, fontSize: 30}}>
          ここを長押ししてください
        </Text>
      </TouchableOpacity>
    </View>
  );
}

実装したらこんな感じになります。

TouchableOpacityに囲われた部分（背景ブルーの部分）であれば、どこをタップしても大丈夫です。

ButtonコンポーネントではonLongPressは使えない

ちなみにButtonコンポーネントでは長押しタップの機能を持っていません。
例えば、以下のように記述した場合、タップしてもOpacityが変わるだけで、何も起きません。

export default function chatList() {
  return (
    <View>
      <Button
        title='モーダルを開きたい！'
        onLongPress={() => {
          alert('長押しタップ成功！');
        }}
      />
    </View>
  );
}

React Native 0.63ではPressableが追加され、タップ時の処理をより細かく分けられるように

残念ながら、2020年8月6日時点ではExpo SDKに対応していません。
（現時点での最新Expo SDK 38はReact Native 0.62です。）

私も実装したことないので、公式ドキュメントのリンクだけ貼っておきます。もし、ご興味のある方は見てみてください。
URL：https://reactnative.dev/docs/pressable

参考文献

React Native 公式ドキュメント
https://reactnative.dev/docs/touchableopacity