The Modal Component

The Modal Component

Modal presents its children above everything else, headers and tab bars included, while visible is true. animationType is 'none' (default), 'slide' or 'fade'; transparent lets the screen show through; and onRequestClose, documented as required, runs on Android's Back, so set visible to false there.

src/CoverPreview.tsx: a transparent modal with a tap-outside backdropTSX

const [open, setOpen] = useState(false);
const close = (why: string) => { console.log('closing:', why); setOpen(false); };
// ...the banners and a <Button title="Preview cover" onPress={() => setOpen(true)} />
<Modal visible={open} transparent animationType="fade"
  statusBarTranslucent navigationBarTranslucent
  onShow={() => console.log('modal shown')}
  onRequestClose={() => close('back button')}>
  <View style={styles.backdrop}>
    <Pressable style={StyleSheet.absoluteFill} onPress={() => close('backdrop tap')} />
    <View style={styles.card}>
      <Image source={{ uri: coverUrl(1) }} style={styles.cover} />
      <Text>Tap outside or press Back to close</Text>
    </View>
  </View>
</Modal>

The Pressable behind the card fills the translucent backdrop, so only a tap outside the card closes the modal. Tapping the button, then sending adb shell input keyevent KEYCODE_BACK, logged:

Output of 46

 LOG  modal shown
 LOG  closing: back button

The first screen of the figure in Cover Images shows the open modal. On Android, ReactModalHostView renders into an androidx.activity.ComponentDialog, a separate window (on iOS, a presented UIViewController), which is why a modal covers what no position: 'absolute' overlay can reach.

MENU