Modal and bottom sheet in React Native

Introduction

Modals and bottom sheets help show extra information or options without leaving the current screen. They keep the user focused and make the app easier to use.

To ask the user to confirm an action, like deleting a photo.

To show extra details or settings without navigating away.

To present a list of choices or actions related to the current screen.

To display a temporary message or form that needs user input.

Syntax

React Native

import { Modal, View, Text, Button } from 'react-native';

<Modal
  visible={modalVisible}
  animationType="slide"
  transparent={true}
  onRequestClose={() => setModalVisible(false)}
>
  <View style={styles.centeredView}>
    <View style={styles.modalView}>
      <Text>Modal Content</Text>
      <Button title="Close" onPress={() => setModalVisible(false)} />
    </View>
  </View>
</Modal>

Modal is a component that appears over the current screen.

Use visible prop to show or hide the modal.

Examples

A simple modal that fades in and shows text.

React Native

import { Modal, View, Text } from 'react-native';

<Modal visible={true} animationType="fade">
  <View>
    <Text>Hello Modal</Text>
  </View>
</Modal>

This modal acts like a bottom sheet sliding up from the bottom.

React Native

import { Modal, View, Text, Button } from 'react-native';

<Modal visible={modalVisible} animationType="slide" transparent={true}>
  <View style={{flex:1, justifyContent:'flex-end'}}>
    <View style={{backgroundColor:'white', padding:20, borderTopLeftRadius:20, borderTopRightRadius:20}}>
      <Text>Bottom Sheet Content</Text>
      <Button title="Close" onPress={() => setModalVisible(false)} />
    </View>
  </View>
</Modal>

Sample App

This app shows a button. When pressed, a modal slides up with a message and a close button. The background dims to focus on the modal.

React Native

import React, { useState } from 'react';
import { Modal, View, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />

      <Modal
        visible={modalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello from Modal!</Text>
            <Button title="Close" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' },
  modalView: { backgroundColor: 'white', padding: 20, borderRadius: 10, alignItems: 'center' },
  modalText: { marginBottom: 15, fontSize: 18 }
});

Important Notes

Always provide a way to close the modal, like a button or tapping outside if allowed.

Use transparent prop to make the background see-through for bottom sheets.

Modals block interaction with the rest of the app until closed.

Summary

Modals show content over the current screen to keep user focus.

Bottom sheets are modals that slide up from the bottom for actions or info.

Use visible prop to control showing or hiding modals.

Practice

1. What is the main purpose of a Modal component in React Native?

easy

A. To display content over the current screen and keep user focus

B. To navigate between different screens

C. To create a permanent footer on the screen

D. To handle background tasks silently

Solution

1. Step 1: Understand what a Modal does

   A Modal appears on top of the current screen and blocks interaction with the background.

2. Step 2: Compare options

   Only To display content over the current screen and keep user focus describes this behavior correctly; others describe unrelated features.

3. Final Answer:

   To display content over the current screen and keep user focus -> Option A

4. Quick Check:

   Modal = Overlay content [OK]

Hint: Modals block background, focus user attention [OK]

Common Mistakes:

• Confusing Modal with navigation
• Thinking Modal is a footer or background task
• Assuming Modal is always full screen

2. Which of the following is the correct way to control the visibility of a Modal in React Native?

easy

A. <Modal show={true}>

B. <Modal visible={true}>

C. <Modal isVisible={true}>

D. <Modal display={true}>

Solution

1. Step 1: Recall the correct prop for Modal visibility

   The React Native Modal uses the visible prop to show or hide the modal.

2. Step 2: Check each option

   Only <Modal visible={true}> uses visible correctly; others use incorrect prop names.

3. Final Answer:

   <Modal visible={true}> -> Option B

4. Quick Check:

   Modal visibility prop = visible [OK]

Hint: Use visible prop to toggle Modal display [OK]

Common Mistakes:

• Using show or isVisible instead of visible
• Confusing display with visible
• Forgetting to pass boolean value

3. What will happen when the following React Native code runs?

const [modalVisible, setModalVisible] = React.useState(false);

return (
  <>
    <Button title="Show Modal" onPress={() => setModalVisible(true)} />
    <Modal visible={modalVisible} animationType="slide">
      <View>
        <Text>Hello Modal</Text>
        <Button title="Close" onPress={() => setModalVisible(false)} />
      </View>
    </Modal>
  </>
);

medium

A. The modal appears sliding up when 'Show Modal' is pressed and closes when 'Close' is pressed

B. The modal appears instantly without animation

C. The modal never appears because visible is false initially

D. The modal is always visible and cannot be closed

Solution

1. Step 1: Understand state controlling Modal visibility

   The state variable modalVisible starts false, so modal is hidden initially.

2. Step 2: Analyze button actions

   Pressing 'Show Modal' sets modalVisible to true, showing modal with slide animation. 'Close' button sets it back to false, hiding modal.

3. Final Answer:

   The modal appears sliding up when 'Show Modal' is pressed and closes when 'Close' is pressed -> Option A

4. Quick Check:

   State controls visible with animation [OK]

Hint: State true shows modal; false hides it [OK]

Common Mistakes:

• Assuming modal shows without pressing button
• Ignoring animationType effect
• Thinking modal cannot be closed

4. Identify the error in this React Native Modal usage:

const [show, setShow] = React.useState(false);

return (
  <Modal visible={show} animationType="fade" onRequestClose={() => setShow(false)}>
    <View>
      <Text>Modal Content</Text>
    </View>
  </Modal>
  <Button title="Open" onPress={() => setShow(true)} />
);

medium

A. The onRequestClose prop is missing

B. The Button component is outside the Modal and will not render

C. Modal must be wrapped inside a single parent element

D. The visible prop should be a string, not boolean

Solution

1. Step 1: Check JSX structure

   The return statement has two sibling elements: Modal and Button, which is invalid JSX without a wrapper.

2. Step 2: Identify correct fix

   Wrapping Modal and Button inside a fragment or View fixes the error.

3. Final Answer:

   Modal must be wrapped inside a single parent element -> Option C

4. Quick Check:

   JSX requires one parent element [OK]

Hint: Wrap siblings in a fragment or View [OK]

Common Mistakes:

• Ignoring JSX syntax rules
• Thinking onRequestClose is optional on Android
• Confusing visible prop type

5. You want to create a bottom sheet modal that slides up from the bottom and closes when tapping outside it. Which combination of props and components achieves this behavior in React Native?

hard

A. Use Modal visible={false} animationType="slide" transparent={true} with no tap detection

B. Use Modal visible={true} animationType="fade" without transparent prop and no tap detection

C. Use Modal visible={true} animationType="none" transparent={false} with a Button inside

D. Use Modal visible={true} animationType="slide" transparent={true} with a TouchableWithoutFeedback wrapping the background to detect taps

Solution

1. Step 1: Understand bottom sheet modal requirements

   It must slide up (animationType="slide"), be transparent so background is visible, and detect taps outside to close.

2. Step 2: Identify correct props and components

   Using transparent={true} allows background taps. Wrapping background in TouchableWithoutFeedback lets you detect taps to close modal.

3. Step 3: Eliminate wrong options

   Options B, C, and D miss transparency, correct animation, or tap detection.

4. Final Answer:

   Use <Modal visible={true} animationType="slide" transparent={true}> with a TouchableWithoutFeedback wrapping the background to detect taps -> Option D

5. Quick Check:

   Slide + transparent + tap detection = bottom sheet [OK]

Hint: Slide + transparent + tap outside closes modal [OK]

Common Mistakes:

• Forgetting transparent prop for background tap
• Using fade animation instead of slide
• Not handling tap outside to close