Modal and bottom sheet in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Modal Visibility Toggle Behavior

What will happen when the button inside this React Native modal is pressed?

React Native

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

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <View>
      <Button title="Show Modal" onPress={() => setVisible(true)} />
      <Modal visible={visible} transparent={true} animationType="slide">
        <View>
          <Text>Hello Modal</Text>
          <Button title="Close" onPress={() => setVisible(false)} />
        </View>
      </Modal>
    </View>
  );
}

A The modal appears and closes automatically after 3 seconds without user action.

B The modal never appears because the visible state is never set to true.

C The modal appears when 'Show Modal' is pressed and disappears when 'Close' is pressed.

D The modal appears but cannot be closed because the 'Close' button does not change state.

💡 Hint

Look at how the visible state changes on button presses.

The visible state controls the modal's visibility. Pressing 'Show Modal' sets it to true, showing the modal. Pressing 'Close' sets it to false, hiding the modal.

❓ navigation

intermediate

Bottom Sheet Dismiss Behavior

In React Native, which method is commonly used to dismiss a bottom sheet component when the user taps outside it?

A Disable user interaction outside the bottom sheet so it cannot be dismissed.

B Set the bottom sheet's visible prop to false without any overlay or touch handling.

C Use a timer to automatically close the bottom sheet after a fixed time.

D Use a transparent overlay with a touchable area that calls a function to close the bottom sheet.

💡 Hint

Think about how to detect taps outside the bottom sheet area.

To dismiss a bottom sheet on outside tap, a transparent overlay with a touchable area is used. When tapped, it triggers a function to close the sheet.

❓ lifecycle

advanced

Modal Component Lifecycle Impact

What happens to the child components inside a React Native Modal when the modal is hidden (visible=false)?

A The child components are unmounted and destroyed.

B The child components remain mounted but are not visible on screen.

C The child components continue to render on screen behind the modal.

D The child components throw an error because modal is hidden.

💡 Hint

Consider how React Native handles components inside a modal when visibility changes.

When visible is false, the modal hides its content but keeps child components mounted in memory.

📝 Syntax

advanced

Correct Syntax for Bottom Sheet State Control

Which code snippet correctly toggles a bottom sheet's visibility state in React Native?

React Native

const [isVisible, setIsVisible] = useState(false);

A setIsVisible(!isVisible);

B setIsVisible = !isVisible;

C isVisible = !setIsVisible;

D setIsVisible.toggle();

💡 Hint

Remember how to update state using the setter function from useState.

The setter function returned by useState is called with the new value. Assigning or calling methods on it is incorrect.

🔧 Debug

expert

Modal Not Closing on Button Press Debugging

Given this code, why does the modal not close when pressing the 'Close' button?

React Native

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

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <View>
      <Button title="Show Modal" onPress={() => setVisible(true)} />
      <Modal visible={visible} transparent={true} animationType="slide">
        <View>
          <Text>Hello Modal</Text>
          <Button title="Close" onPress={() => setVisible(false)} />
        </View>
      </Modal>
    </View>
  );
}

A The onPress handler is passing the setter function without calling it, so state never changes.

B The modal's visible prop is misspelled, so it never updates.

C The useState hook is not imported correctly, causing state to be undefined.

D The Button component does not support onPress events inside a Modal.

💡 Hint

Check how the onPress function is written for the 'Close' button.

The onPress handler should call setVisible(false). Writing onPress={() => setVisible} only passes the function without calling it, so the state does not change.