Pressableとは何か、React Nativeでのプレス処理

Pressableとは？

Pressableは、あらゆる種類のタッチを処理するための統一インターフェースを提供するReact Nativeコンポーネントです。3つの異なるTouchableコンポーネント（TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback）とは異なり、Pressableは1つの柔軟な状態とスタイリングシステムでそれらすべてを置き換えます。

このコンポーネントはReact Native 0.63（2020年9月）で導入されました。Meta（2026年）によると、React Nativeの新規プロジェクトの70%がTouchableコンポーネントの代わりにPressableを使用しています。PressableはTouchableの主要な問題 — 断片化されたAPIと異なるエフェクトごとにコンポーネントを切り替える必要性 — を解決します。

Pressableの哲学

プレスエフェクトが固定されている（不透明度の変更）TouchableOpacityとは異なり、Pressableは現在の状態を受け取る関数を提供します。開発者はプレスに対して視覚的にどのように反応するか（色、スケール、影、またはエフェクトの組み合わせの変更）を決定できます。これにより、UXを完全に制御できます。

Pressableの状態: pressed、hovered、focused

Pressableは3つのインタラクション状態を定義します: pressed（画面に指）、hovered（Web/TVで要素にカーソル）、focused（キーボードフォーカス中の要素）。各状態は対応するコールバックをトリガーし、スタイル関数と子レンダリング関数に渡されます。

重要: hoveredとfocusedはポインター対応プラットフォーム（Web、Android TV、Apple TV）でのみ機能します。モバイルデバイスではpressedのみが利用可能です。クロスプラットフォームアプリケーションでは、この制限を考慮して視覚的な反応を設計してください。

<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
  onPress={handlePress}>
  {({ pressed }) => (
    <Text style={pressed ? styles.textPressed : styles.text}>
      {pressed ? 'Release' : 'Press'}
    </Text>
  )}
</Pressable>

PressableのAPIとコールバック

Pressable APIには4つの主要なコールバックがあります: onPress（離すまでの完全なプレス）、onLongPress（長押し）、onPressIn（タッチ開始）、onPressOut（タッチ終了）。onPressInとonPressOutの組み合わせにより、カスタムアニメーションを作成できます。

追加のプロパティ: delayLongPress（長押しの遅延、デフォルト500 ms）、pressRetentionOffset（プレスがキャンセルされる領域）、android_ripple（Androidでのリップル効果）。注: RippleはAndroid 5+でのみ機能します。

<Pressable
  onPress={() => console.log('押下')}
  onLongPress={() => console.log('長押し')}
  onPressIn={() => console.log('指を下に')}
  onPressOut={() => console.log('指を上に')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPressは、コンポーネント領域内（pressRetentionOffsetを考慮）で指が離された場合にのみ呼び出されます。ユーザーが指を境界外に移動すると、onPressはトリガーされず、誤ったプレスを防ぎます。onPressOutは離されたときに常に呼び出されます。

hitSlop: タッチ領域の拡張

hitSlopは、コンポーネントの表示境界を超えてタッチ領域を拡張するPressableのプロパティです。これはアイコン、チェックボックス、ラジオボタンなどの小さな要素にとって重要です。Apple HIGは最小タッチターゲットサイズ44×44ポイントを推奨しています。hitSlopを使用すると、視覚的なサイズを変更せずにこの要件を満たせます。

hitSlopはオブジェクト{ top, bottom, left, right }またはすべての辺に単一の数値を受け入れます。値は論理ピクセル（dp/pt）で指定します。24×24のアイコンの場合、44×44のタッチターゲットを達成するには、各辺に少なくとも10–12のhitSlopを推奨します。

<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handleIconPress}
  style={styles.iconButton}>
  <Icon name="star" size={24} />
</Pressable>

pressRetentionOffset — hitSlopの逆: プレスをキャンセルせずにユーザーがコンポーネント境界外に出られる領域を定義します。デフォルトはhitSlopと同じです。境界外に出てもプレスを維持する必要がある場合は、pressRetentionOffsetを増やしてください。

Pressable vs Touchable: 移行のタイミング

Pressable vs Touchable — タッチ処理コンポーネントを選択する際の重要な問題です。TouchableOpacity、TouchableHighlight、TouchableWithoutFeedbackはレガシーコンポーネントで、削除はされませんが新しい機能は追加されません。Metaは新規プロジェクトにPressableを推奨しています。

Pressableの主な利点: すべてのエフェクトタイプに対応する統一API、カスタムスタイリングのためのpressed状態へのアクセス、hovered/focused状態のサポート、hitSlopとpressRetentionOffset、追加設定なしのonLongPressコールバック。TouchableOpacityは単純な不透明度変更にのみ適しています。

Pressableの使用例

Pressableを使用すると、最小限のコードで複雑なインタラクティブ要素を作成できます。以下は、プレス時のスケール変更とAndroidでのリップル効果を備えたアニメーションボタンの例です。このようなボタンはTouchableOpacity + Animatedの組み合わせを置き換えます。

const AnimatedButton = ({ title, onPress }) => {
  const scale = React.useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.96,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
      style={styles.button}>
      <AnimatedView style={[styles.inner, { transform: [{ scale }] }]}>
        <Text style={styles.text}>{title}</Text>
      </AnimatedView>
    </Pressable>
  );
};

重要: PressableのアニメーションにはuseNativeDriver: trueを使用してください。これによりアニメーションがネイティブスレッドにオフロードされ、高速なプレス時のフレームドロップを防ぎます。transformとopacityのネイティブドライバーはすべてのプラットフォームでサポートされています。