Rorkアプリでスワイプやタップが反応しない：よくある5つの原因と対処法

// ❌ よくある状態：ルートがラップされていない
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import RootNavigator from './navigation/RootNavigator';
 
export default function App() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
}
 
// ✅ 修正後：GestureHandlerRootViewでラップする
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import RootNavigator from './navigation/RootNavigator';
 
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

// ❌ 問題のある状態：全画面の透明Viewがタッチを奪っている
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
  {/* 背景グラデーションなど */}
</View>
<TouchableOpacity onPress={handlePress}>
  <Text>押してもなぜか反応しない</Text>
</TouchableOpacity>
 
// ✅ 修正：pointerEventsを設定してタッチを透過させる
<View
  style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
  pointerEvents="none"
>
  {/* 背景だけのView — タッチは下のコンポーネントへ */}
</View>
<TouchableOpacity onPress={handlePress}>
  <Text>正常に反応するようになった</Text>
</TouchableOpacity>

// ✅ iOS向け：directionalLockEnabledで一方向にロック
<ScrollView directionalLockEnabled={true}>
  <SwipeableCard />
</ScrollView>
 
// ✅ GestureHandlerのPanGestureで方向を明示する方法
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
 
export function SwipeCard() {
  const translateX = useSharedValue(0);
 
  const swipeGesture = Gesture.Pan()
    .activeOffsetX([-10, 10])   // 横10px以上動いたら認識
    .failOffsetY([-5, 5])       // 縦に5px動いたらスクロールに譲る
    .onUpdate((event) => {
      translateX.value = event.translationX;
    })
    .onEnd(() => {
      translateX.value = withSpring(0);
    });
 
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));
 
  return (
    <GestureDetector gesture={swipeGesture}>
      <Animated.View style={[styles.card, animatedStyle]}>
        {/* カードの中身 */}
      </Animated.View>
    </GestureDetector>
  );
}

// ✅ Pressableでタッチ遅延を最小化する
<Pressable
  onPress={handlePress}
  android_ripple={{ color: 'rgba(0,0,0,0.1)' }}
  unstable_pressDelay={0}  // タッチ認識の遅延をゼロに
  style={({ pressed }) => [
    styles.card,
    { opacity: pressed ? 0.85 : 1 },
  ]}
>
  <Text>レスポンスの良いボタン</Text>
</Pressable>

<Pressable
  onPress={handlePress}
  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
  <Text>タッチしやすいボタン</Text>
</Pressable>

// ❌ Modal内のスワイプが効かない状態
import { Modal } from 'react-native';
 
<Modal visible={isVisible} transparent animationType="slide">
  <SwipeableBottomSheet />  {/* ← ジェスチャーが認識されない */}
</Modal>
 
// ✅ Modal内でも個別にGestureHandlerRootViewをラップする
import { Modal } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
<Modal visible={isVisible} transparent animationType="slide">
  <GestureHandlerRootView style={{ flex: 1 }}>
    <SwipeableBottomSheet />  {/* ← 正常に動作する */}
  </GestureHandlerRootView>
</Modal>