【React Native】長押しタップ時の処理を実装したいなら、ButtonではなくTouchableOpacityを使う

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

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

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

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

onPressとの違いは、
onPress：通常のタップ時の処理
onLongPress：長押しタップ時の処理

onLongPressの書き方

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

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です。

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

参考文献

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