React Nativeで長押し機能を実装！onLongPressの活用例と代替手段

2025-06-06

Text#onLongPress は React Native の Text コンポーネントに設定できるプロパティ（prop）の一つで、ユーザーがテキスト要素を長押ししたときに実行される関数を指定するために使用されます。

より詳しく説明すると、以下のようになります。

Text コンポーネント: React Native において、画面にテキストを表示するために最も基本的なコンポーネントです。<Text>Hello World!</Text> のように使用します。
onLongPress プロパティ:
- これはイベントハンドラの一種です。特定のユーザーインタラクション（この場合は「長押し」）が発生したときに呼び出される関数を指します。
- ユーザーが Text コンポーネントを指でタップし、そのまましばらく押し続けた場合に onLongPress に指定された関数が実行されます。
- これは通常のタップ（onPress）とは異なり、指を離すまでの時間に一定のしきい値が設定されています。そのしきい値を超えて押し続けた場合に「長押し」と認識されます。

使用例（React Native のコードスニペット）:

import React from 'react';
import { View, Text, Alert, StyleSheet } from 'react-native';

const App = () => {
  const handleLongPress = () => {
    Alert.alert('長押し検出！', 'テキストが長押しされました。');
  };

  return (
    <View style={styles.container}>
      <Text
        style={styles.text}
        onLongPress={handleLongPress}
      >
        このテキストを長押ししてください
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
  },
});

export default App;

上記の例では、ユーザーが「このテキストを長押ししてください」と書かれたテキストを長押しすると、「長押し検出！」というアラートが表示されます。

なぜ onLongPress が必要なのか？

UXの向上: 限られた画面スペースの中で、多くの機能をユーザーに提供するための直感的な方法となります。

onLongPressが全く発火しない/期待通りに動作しない

これは最もよくある問題です。いくつかの原因が考えられます。

スタイルによる問題（オーバーラップ、pointerEvents）
- 他の要素がTextコンポーネントの上に重なっていて、タッチイベントをブロックしている可能性があります。z-indexやレイアウト（position: 'absolute'など）を確認してください。
- pointerEventsスタイルプロパティが'none'などに設定されていると、その要素はタッチイベントに応答しなくなります。親要素でpointerEventsが設定されていないか確認してください。
- 解決策
  開発者ツール（React Native Debuggerなど）で要素のレイアウトと重なりを確認する。
delayLongPressプロパティの誤用
delayLongPressプロパティは、onLongPressが発火するまでの長押しの最小時間をミリ秒単位で設定します。この値が非常に大きい、または意図しない値になっている可能性があります。
- 解決策
  delayLongPressの値を適切に設定し、テストしてみる。デフォルト値は500ミリ秒です。
デバッガの影響
Chrome DevToolsなどのリモートデバッガを有効にしていると、onLongPressの検出が遅れたり、全く発火しなかったりするバグが報告されています。これはデバッグ環境特有の問題で、実機ビルドやデバッガをオフにした状態では正常に動作することがあります。
- 解決策
  デバッガをオフにして動作確認を行う。
ネストされたTextコンポーネント内でのonLongPress
<Text><Text onLongPress={() => {}}>内部テキスト</Text></Text> のようにTextの中にさらにTextをネストしてonLongPressを設定すると、意図通りに動作しないことがあります。これはReact Nativeのレイアウトやタッチイベントの伝播の特性によるものです。
- 解決策
  前述のPressableを使用し、TextをPressableで囲むようにします。もしテキストの一部だけをインタラクティブにしたい場合は、その部分だけを別のPressableで囲みます。

onPressも設定している場合
TextコンポーネントにonPressとonLongPressの両方を設定している場合、onPressが先に発火してしまい、onLongPressが発火しないことがあります。特に、素早いタップではonPressが、少し長めに押すとonLongPressが発火するのが通常ですが、この区別がうまくいかないことがあります。

解決策

React Nativeのタッチシステムは、onPressが発火する前に一定のしきい値（通常500ミリ秒）を超えて長押しされた場合にonLongPressをトリガーします。このデフォルトの遅延が環境によっては適切に機能しない場合があります。
Textコンポーネントは本来タッチイベントを直接処理するためのものではありません。タッチイベントをより確実に扱いたい場合は、Pressableコンポーネントを使用することを強く推奨します。PressableはonPress、onLongPress、onPressIn、onPressOutなど、より詳細なタッチイベントハンドリングを提供します。

Pressableの使用例

import React from 'react';
import { View, Text, Alert, Pressable, StyleSheet } from 'react-native';

const App = () => {
  const handlePress = () => {
    Alert.alert('タップ検出！', 'テキストがタップされました。');
  };

  const handleLongPress = () => {
    Alert.alert('長押し検出！', 'テキストが長押しされました。');
  };

  return (
    <View style={styles.container}>
      <Pressable
        onPress={handlePress}
        onLongPress={handleLongPress}
        style={({ pressed }) => [
          {
            backgroundColor: pressed ? '#ddd' : '#f0f0f0',
          },
          styles.pressableContainer,
        ]}
      >
        <Text style={styles.text}>
          このテキストをタップまたは長押ししてください
        </Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pressableContainer: {
    padding: 20,
    borderRadius: 10,
  },
  text: {
    fontSize: 20,
  },
});

export default App;

パフォーマンスの問題（反応が遅い、カクつく）

onLongPressに渡す関数内で重い処理を行っている場合、UIの反応が遅くなったり、カクついたりすることがあります。

解決策

onLongPress内で非同期処理や計算量の多い処理を行う場合は、requestAnimationFrameやsetTimeoutを使ってメインスレッドをブロックしないように工夫するか、Web Worker (react-native-webviewなど）を使ってバックグラウンドで処理を行うことを検討する。
useCallbackフックを使用して、onLongPressハンドラ関数が不要に再生成されないようにする。

import React, { useCallback } from 'react';
// ...

const App = () => {
  const handleLongPress = useCallback(() => {
    // ここに重い処理やsetStateなど
    Alert.alert('長押し検出！', '処理が実行されました。');
  }, []); // 依存配列が空なので、コンポーネントのマウント時に一度だけ作成される

  return (
    <View style={styles.container}>
      <Pressable onLongPress={handleLongPress}>
        <Text>長押ししてください</Text>
      </Pressable>
    </View>
  );
};

長押しとタップの区別が難しい

ユーザーが意図した長押しと素早いタップの区別がつきにくいという問題です。

解決策
- delayLongPressの値を調整して、長押しとして認識されるまでの時間を調整する。
- 長押しされた際に、視覚的なフィードバック（例: 背景色の変化、小さなアニメーションなど）を提供することで、ユーザーが「長押しが成功した」と認識しやすくする。Pressableコンポーネントはpressed状態をスタイルに渡せるため、このようなフィードバックを簡単に実装できます。

視覚障碍者や特定の入力方法を使用するユーザーにとって、長押し操作が困難な場合があります。

解決策
- accessibilityLabelやaccessibilityHintプロパティを使用して、スクリーンリーダーに要素の目的を伝える。
- 長押しで提供する機能は、代替手段（例: 通常のタップで開くメニュー内にオプションとして提供する）も用意することが望ましいです。

基本的な onLongPress の使用例

最もシンプルな例として、テキストを長押ししたときにアラートを表示するコードです。

import React from 'react';
import { View, Text, Alert, StyleSheet } from 'react-native';

const BasicLongPressExample = () => {
  const handleLongPress = () => {
    // 長押しが検出されたときに実行される関数
    Alert.alert(
      '長押し検出！', // アラートのタイトル
      'このテキストが長押しされました！' // アラートのメッセージ
    );
    console.log('Textが長押しされました。'); // デバッグ用
  };

  return (
    <View style={styles.container}>
      <Text
        style={styles.text}
        onLongPress={handleLongPress} // ここで長押しイベントハンドラを設定
      >
        このテキストを長押ししてください
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    padding: 20,
    backgroundColor: '#E0F7FA',
    borderRadius: 10,
    overflow: 'hidden', // AndroidでborderRadiusを適用するため
  },
});

export default BasicLongPressExample;

説明

console.logは開発中にイベントが発火したことを確認するために便利です。
ユーザーが画面上のTextを指で長押しすると、handleLongPress関数が呼び出され、アラートが表示されます。
TextコンポーネントにonLongPressプロパティを設定し、handleLongPressという関数を渡しています。

delayLongPress プロパティの活用例

onLongPressが発火するまでの長押しの時間を調整したい場合にdelayLongPressを使用します。デフォルトは500ミリ秒（0.5秒）です。

import React from 'react';
import { View, Text, Alert, StyleSheet } from 'react-native';

const CustomDelayLongPressExample = () => {
  const handleLongPressFast = () => {
    Alert.alert('速い長押し', '0.2秒以上長押しされました。');
  };

  const handleLongPressSlow = () => {
    Alert.alert('遅い長押し', '2秒以上長押しされました。');
  };

  return (
    <View style={styles.container}>
      <Text
        style={styles.text}
        onLongPress={handleLongPressFast}
        delayLongPress={200} // 長押しまでの時間を200msに設定
      >
        これを0.2秒長押ししてください
      </Text>

      <Text
        style={[styles.text, { marginTop: 30, backgroundColor: '#FFF3E0' }]}
        onLongPress={handleLongPressSlow}
        delayLongPress={2000} // 長押しまでの時間を2000ms (2秒) に設定
      >
        これを2秒長押ししてください
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    padding: 15,
    backgroundColor: '#E0F7FA',
    borderRadius: 8,
    overflow: 'hidden',
    marginBottom: 10,
  },
});

export default CustomDelayLongPressExample;

説明

ユーザー体験に合わせてこの値を調整することで、誤操作を防いだり、意図した操作をよりスムーズに促したりできます。
二つ目のTextはdelayLongPress={2000}が設定されており、2秒の長押しでイベントが発火します。
一つ目のTextはdelayLongPress={200}が設定されており、0.2秒の長押しでイベントが発火します。

onLongPress と onPress の併用と Pressable コンポーネントの使用（推奨）

TextコンポーネントにonPressとonLongPressの両方を設定すると、タッチイベントの挙動が複雑になることがあります。より確実なタッチイベントハンドリングと、視覚的なフィードバックを簡単に実装するために、Pressableコンポーネントを使用することを強く推奨します。

import React, { useState } from 'react';
import { View, Text, Alert, StyleSheet, Pressable } from 'react-native';

const PressableLongPressExample = () => {
  const [pressCount, setPressCount] = useState(0);
  const [longPressCount, setLongPressCount] = useState(0);

  const handlePress = () => {
    setPressCount(prev => prev + 1);
    console.log('タップされました！');
  };

  const handleLongPress = () => {
    setLongPressCount(prev => prev + 1);
    Alert.alert('長押し！', '長押しアクションが実行されました！');
    console.log('長押しされました！');
  };

  return (
    <View style={styles.container}>
      <Pressable
        onPress={handlePress} // タップイベント
        onLongPress={handleLongPress} // 長押しイベント
        delayLongPress={500} // 長押しまでの時間（デフォルトは500ms）
        style={({ pressed }) => [
          // pressed は `true` または `false`
          styles.pressableContainer,
          {
            backgroundColor: pressed ? '#BBDEFB' : '#E3F2FD', // 押されている間の色
            borderColor: pressed ? '#2196F3' : '#90CAF9',
          },
        ]}
      >
        <Text style={styles.text}>
          このテキストをタップまたは長押ししてください
        </Text>
        <Text style={styles.counterText}>タップ回数: {pressCount}</Text>
        <Text style={styles.counterText}>長押し回数: {longPressCount}</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  pressableContainer: {
    padding: 25,
    borderRadius: 15,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 5, // Androidの影
    shadowColor: '#000', // iOSの影
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  text: {
    fontSize: 22,
    fontWeight: '600',
    color: '#333',
    textAlign: 'center',
    marginBottom: 10,
  },
  counterText: {
    fontSize: 16,
    color: '#555',
  },
});

export default PressableLongPressExample;

説明

カウンターを設けることで、タップと長押しがそれぞれ正しく認識されていることを確認できます。
styleプロパティに関数を渡すことで、pressedという状態に応じて動的にスタイルを変更できます。これにより、ユーザーが要素をタップ（または長押し）している間に視覚的なフィードバック（ここでは背景色とボーダー色の変化）を提供できます。
PressableはonPressとonLongPressを両方設定しても、内部でタッチイベントの競合を適切に処理してくれます。
ここではTextコンポーネントを直接使用する代わりに、PressableコンポーネントでTextを囲んでいます。

onLongPressを使って、カスタムのコンテキストメニュー（AndroidのToastやiOSのActionSheetに似たもの）を表示する基本的な考え方です。ここでは単純にAlertを表示していますが、実際にはActionSheetIOSや、react-native-menuのようなライブラリと組み合わせて使用します。

import React from 'react';
import { View, Text, Alert, StyleSheet, Pressable, Platform } from 'react-native';

const ContextMenuExample = () => {
  const showContextMenu = (item) => {
    Alert.alert(
      'オプションを選択',
      `${item}に対するアクションを選択してください`,
      [
        {
          text: '編集',
          onPress: () => console.log(`${item}を編集`),
        },
        {
          text: '削除',
          onPress: () => Alert.alert('確認', `${item}を本当に削除しますか？`),
          style: 'destructive', // iOSで赤色表示
        },
        {
          text: 'キャンセル',
          style: 'cancel', // iOSでキャンセルボタンとして表示
        },
      ],
      { cancelable: true } // アラート外タップでキャンセル可能
    );
  };

  return (
    <View style={styles.container}>
      <Pressable
        onLongPress={() => showContextMenu('アイテムA')}
        style={({ pressed }) => [
          styles.itemContainer,
          { backgroundColor: pressed ? '#F0F4C3' : '#F9FBE7' },
        ]}
      >
        <Text style={styles.itemText}>アイテムA</Text>
        <Text style={styles.hintText}>(長押しでオプション)</Text>
      </Pressable>

      <Pressable
        onLongPress={() => showContextMenu('アイテムB')}
        style={({ pressed }) => [
          styles.itemContainer,
          { marginTop: 20, backgroundColor: pressed ? '#E1F5FE' : '#F5F5F5' },
        ]}
      >
        <Text style={styles.itemText}>アイテムB</Text>
        <Text style={styles.hintText}>(長押しでオプション)</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  itemContainer: {
    padding: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#CCC',
    width: '80%',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },
  itemText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
  hintText: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});

export default ContextMenuExample;

Alert.alertの第3引数に配列を渡すことで、複数のボタンとそれに対応するアクションを定義できます。style: 'destructive'やstyle: 'cancel'はiOSで特定の表示形式を適用します。
onLongPressが発火すると、showContextMenu関数が呼び出され、選択されたアイテムに応じたオプションのアラート（またはActionSheet）を表示します。
各Pressableコンポーネントが、特定の「アイテム」を表しています。

Pressable コンポーネントを使用する (推奨)

これは、Text#onLongPressの直接的な代替というよりは、より堅牢で推奨されるタッチイベントハンドリングの方法です。Textコンポーネント自体にonPressやonLongPressを設定できますが、Pressableはより柔軟な機能と、多くのタッチイベントハンドラを提供します。

特徴

ヒットスロップの調整
hitSlopやpressRetentionOffsetを使って、タッチ可能な領域を調整できます。
アクセシビリティの向上
accessibilityRoleやaccessibilityStateなどのアクセシビリティプロパティが充実しています。
視覚的フィードバックの容易な実装
styleプロパティに関数を渡すことで、pressed状態に基づいて要素のスタイルを動的に変更でき、ユーザーに直感的なフィードバックを提供できます。
より詳細なイベントハンドリング
onPressIn, onPressOut, onPress, onLongPressなど、タッチのライフサイクルにおける様々な段階を検出できます。

なぜ代替として挙げるのか？ Textコンポーネントは主にテキスト表示を目的としており、複雑なタッチインタラクションにはPressableの方が適しています。Text要素を長押し可能にしたい場合でも、TextをPressableで囲むことで、より安定した動作と豊かなユーザー体験を提供できます。

Touchable 系コンポーネントを使用する (非推奨になりつつある)

React Nativeには以前からTouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedbackといった「Touchable」系のコンポーネントが存在し、これらにもonLongPressプロパティがあります。

TouchableWithoutFeedback: 視覚的なフィードバックなしでタッチイベントを検出します。
TouchableNativeFeedback: (Androidのみ) ネイティブのインクエフェクト（Ripple効果）を提供します。
TouchableHighlight: 押されたときに要素の背景色を暗くして視覚的なフィードバックを提供します。
TouchableOpacity: 押されたときに要素の透明度を下げて視覚的なフィードバックを提供します。

特徴

delayLongPressプロパティも利用可能です。
これらのコンポーネントもonLongPressをサポートしており、Textを内部に含めることで長押しイベントを検出できます。

なぜ代替として挙げるのか？ これらは長い間使われてきましたが、現在はPressableコンポーネントがより推奨されるタッチイベントハンドリングの方法となっています。Pressableはこれらの「Touchable」コンポーネントの機能をより柔軟にカバーし、パフォーマンスも改善されています。新規プロジェクトや既存プロジェクトでタッチイベントの改善を検討する際は、まずPressableを検討すべきです。

コード例 (TouchableOpacityの場合)

import React from 'react';
import { View, Text, Alert, StyleSheet, TouchableOpacity } from 'react-native';

const TouchableOpacityLongPressExample = () => {
  const handleLongPress = () => {
    Alert.alert('長押し！', 'TouchableOpacity内のテキストが長押しされました！');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onLongPress={handleLongPress}
        style={styles.touchableArea}
        activeOpacity={0.7} // 押されたときの透明度
      >
        <Text style={styles.text}>
          TouchableOpacityで長押しテスト
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  touchableArea: {
    padding: 20,
    backgroundColor: '#FFE0B2',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#FFB74D',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
});

export default TouchableOpacityLongPressExample;

より複雑なジェスチャー認識や、パフォーマンスが重要なシナリオでは、ネイティブスレッドでジェスチャーを処理するreact-native-gesture-handlerライブラリが非常に強力な選択肢となります。長押し（LongPress）もこのライブラリで扱えます。

特徴

Reanimatedとの連携
react-native-reanimatedと組み合わせることで、ジェスチャー駆動のアニメーションを非常に効率的に実装できます。
ジェスチャー間の競合解決
複数のジェスチャーが同時に発生した場合の優先順位付けや競合解決の仕組みを提供します。
豊富なジェスチャータイプ
タップ、ロングプレス、パン（ドラッグ）、ピンチ、ローテーション、フリングなど、多様なジェスチャーをサポートします。
ネイティブスレッドでの処理
JavaScriptスレッドの負荷を軽減し、よりスムーズで反応性の高いジェスチャーを実現します。

なぜ代替として挙げるのか？ 標準のPressableでは実現が難しい、複雑なインタラクションや、複数のジェスチャーを組み合わせた高度なUIを構築する場合に検討します。例えば、長押ししてドラッグを開始する、といった動作です。

簡単なコード例 (Gesture.LongPress の使用)

まず、react-native-gesture-handlerとreact-native-reanimatedをインストールし、設定を行う必要があります。

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

iOSの場合、cd ios && pod installも実行してください。

アプリのルートコンポーネントをGestureHandlerRootViewでラップする必要があります。

// App.js や index.js
import 'react-native-gesture-handler'; // 最初にインポート

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import MyAppComponent from './MyAppComponent'; // あなたのメインコンポーネント

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <MyAppComponent />
    </GestureHandlerRootView>
  );
}

実際のコンポーネント内での使用例：

import React from 'react';
import { View, Text, Alert, StyleSheet } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler'; // ここからインポート

const GestureHandlerLongPressExample = () => {
  const longPressGesture = Gesture.LongPress()
    .onStart(() => {
      // 長押しが開始されたときに実行
      console.log('長押し開始！');
    })
    .onEnd((event) => {
      // 長押しが終了したとき（指を離したとき）に実行
      Alert.alert(
        'GestureHandler 長押し！',
        `長押し検出 (期間: ${event.duration.toFixed(0)}ms)`
      );
      console.log('長押し終了！');
    })
    .minDuration(500); // 最小長押し時間 (ミリ秒)

  return (
    <View style={styles.container}>
      <GestureDetector gesture={longPressGesture}>
        <View style={styles.box}>
          <Text style={styles.text}>
            GestureHandlerで長押し
          </Text>
        </View>
      </GestureDetector>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 200,
    height: 100,
    backgroundColor: '#D1C4E9',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#9575CD',
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default GestureHandlerLongPressExample;

定義したジェスチャーをGestureDetectorコンポーネントのgestureプロパティに渡します。
.minDuration()で長押しと認識されるまでの最小時間を設定します。
Gesture.LongPress()で長押しジェスチャーを定義します。

複雑なジェスチャーや高性能なインタラクション
react-native-gesture-handlerライブラリが最適です。これは、長押しに加えてドラッグやピンチなど、より高度なジェスチャーを統合して扱う必要がある場合に特に有効です。
レガシーな方法
Touchable系のコンポーネントも利用可能ですが、Pressableへの移行が推奨されます。
簡単な長押し検出と視覚的フィードバック
Pressableコンポーネントを使用するのが最も推奨される方法です。