Rork で Modal が閉じない・タップが通らない問題 — 詰まりやすい5つの落とし穴

// ❌ よくある不完全な実装（背景タップで閉じない・Android 戻るで閉じない）
import { Modal, View, Text, Pressable } from 'react-native';
 
export function BadModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
  return (
    <Modal visible={visible} animationType="fade">
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>閉じるボタンが効かないことがあります</Text>
        <Pressable onPress={onClose}>
          <Text>閉じる</Text>
        </Pressable>
      </View>
    </Modal>
  );
}

// ✅ 推奨パターン
import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
 
export function GoodModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}        // Android 戻るボタン対応（必須）
      statusBarTranslucent={true}     // Android のステータスバー領域も覆う
    >
      {/* 背景タップで閉じる領域 */}
      <Pressable style={styles.backdrop} onPress={onClose}>
        {/* コンテンツ部分は伝播を止める */}
        <Pressable style={styles.content} onPress={(e) => e.stopPropagation()}>
          <Text>確実に閉じられる Modal です</Text>
          <Pressable onPress={onClose} style={styles.button}>
            <Text>閉じる</Text>
          </Pressable>
        </Pressable>
      </Pressable>
    </Modal>
  );
}
 
const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    backgroundColor: '#fff',
    padding: 24,
    borderRadius: 12,
    minWidth: 280,
  },
  button: { marginTop: 16, padding: 12 },
});

// ❌ 親が再レンダーすると TextInput が再生成されてフォーカスが飛ぶ
function Parent() {
  const [visible, setVisible] = useState(false);
  const [text, setText] = useState('');
  // text が変わるたびに Parent が再レンダー → Modal も再レンダー
  return (
    <Modal visible={visible} transparent onRequestClose={() => setVisible(false)}>
      <TextInput value={text} onChangeText={setText} autoFocus />
    </Modal>
  );
}

// ✅ 中身を子コンポーネントに分離してフォーカス保持
function ModalContent({ onClose }: { onClose: () => void }) {
  const [text, setText] = useState('');
  return (
    <View style={{ padding: 24, backgroundColor: '#fff' }}>
      <TextInput
        value={text}
        onChangeText={setText}
        autoFocus
        style={{ borderWidth: 1, padding: 8 }}
      />
      <Pressable onPress={onClose}><Text>送信</Text></Pressable>
    </View>
  );
}
 
function Parent() {
  const [visible, setVisible] = useState(false);
  return (
    <Modal visible={visible} transparent onRequestClose={() => setVisible(false)}>
      <ModalContent onClose={() => setVisible(false)} />
    </Modal>
  );
}

// ✅ 階層を入れ替えて両立させる
<Modal visible={visible} transparent onRequestClose={onClose}>
  <Pressable style={styles.backdrop} onPress={onClose}>
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ width: '100%', alignItems: 'center' }}
    >
      <Pressable style={styles.content} onPress={(e) => e.stopPropagation()}>
        <TextInput style={styles.input} placeholder="メッセージを入力" />
      </Pressable>
    </KeyboardAvoidingView>
  </Pressable>
</Modal>

// ❌ FlatList の renderItem の中で Modal をレンダーすると、リスト要素ごとに Modal が量産される
<FlatList
  data={items}
  renderItem={({ item }) => (
    <View>
      <Pressable onPress={() => setOpenId(item.id)}><Text>{item.title}</Text></Pressable>
      <Modal visible={openId === item.id} transparent onRequestClose={() => setOpenId(null)}>
        {/* 100アイテムなら100個の Modal がツリーに存在することになる */}
      </Modal>
    </View>
  )}
/>

// ✅ Modal は1つだけ。中身を state で切り替える
function ListWithDetailModal() {
  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
  return (
    <>
      <FlatList
        data={items}
        renderItem={({ item }) => (
          <Pressable onPress={() => setSelectedItem(item)}>
            <Text>{item.title}</Text>
          </Pressable>
        )}
      />
      <Modal
        visible={selectedItem !== null}
        transparent
        onRequestClose={() => setSelectedItem(null)}
      >
        {selectedItem && <DetailContent item={selectedItem} onClose={() => setSelectedItem(null)} />}
      </Modal>
    </>
  );
}

// ✅ Alert で確認 → ユーザーが OK したら親 Modal を閉じる
import { Alert } from 'react-native';
 
function SettingsModal({ visible, onClose }: Props) {
  const handleReset = () => {
    Alert.alert(
      '設定をリセットしますか？',
      'この操作は取り消せません',
      [
        { text: 'キャンセル', style: 'cancel' },
        { text: 'リセット', style: 'destructive', onPress: () => { resetSettings(); onClose(); } },
      ]
    );
  };
  return (
    <Modal visible={visible} transparent onRequestClose={onClose}>
      {/* ... */}
      <Pressable onPress={handleReset}><Text>リセット</Text></Pressable>
    </Modal>
  );
}