React Nativeで複数ボタン同時押しに対応する

やりたいこと

ピアノやゲームの操作ボタンのような、同時に複数のボタンを押したいケース。
以下のような実装方法だと、一度に１つのボタンしか押せない。

• React Native標準のTouchableXXでの実装

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
// ...snip...
<TouchableOpacity style={styles.button} onPressIn={handlePress}>
    <Text>Press Here</Text>
</TouchableOpacity>

• ViewのonTouchStartでの実装

import { StyleSheet, Text, View } from 'react-native';
// ...snip...
<View
    style={styles.button}
    onTouchStart={handleTouchStart}
    onTouchEnd={handleTouchEnd}
    onTouchCancel={handleTouchCancel}
    onTouchMove={handleTouchMove}>
    <Text>Press Here</Text>
</View>

やり方

react-native-gesture-handlerを利用する。

• react-native-gesture-handlerのインストール

expo install react-native-gesture-handler
# または
yarn add react-native-gesture-handler

• react-native-gesture-handlerのTouchableXXでの実装

import { StyleSheet, Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
// ...snip...
<TouchableOpacity style={styles.button} onPressIn={handlePress}>
    <Text>Press Here</Text>
</TouchableOpacity>

参考

• How do I enable touch on multiple buttons simultaneously in react native?