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

1 min読了の目安(約1300字TECH技術記事

やりたいこと

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

  • 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>

参考