Modal and bottom sheet in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Modal component from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AModal

BView

CButton

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Button instead of Modal

Forgetting to import Modal

The Modal component is imported from react-native to create modal dialogs.

2fill in blank

medium

Complete the code to make the Modal visible when the state variable is true.

React Native

<Modal visible=[1] animationType="slide">

Drag options to blanks, or click blank then click option'

Atrue

BmodalVisible

CsetModalVisible

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or false directly instead of state

Using the setter function instead of the variable

The visible prop controls if the Modal is shown. It should be set to the state variable modalVisible.

3fill in blank

hard

Fix the error in the code to close the Modal when the button is pressed.

React Native

<Button title="Close" onPress={() => [1](false)} />

Drag options to blanks, or click blank then click option'

Avisible

BmodalVisible

CsetModalVisible

DcloseModal

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the variable instead of the setter

Using a non-existent function

The onPress should call the setter function setModalVisible to update the state and close the Modal.

4fill in blank

hard

Fill both blanks to create a bottom sheet using React Native's Modal with transparent background and slide animation.

React Native

<Modal transparent=[1] animationType=[2] visible={modalVisible}>

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

C"slide"

D"fade"

Attempts:

3 left

💡 Hint

Common Mistakes

Setting transparent to false

Using fade animation instead of slide

To create a bottom sheet effect, the Modal should be transparent with value true and use animationType set to "slide".

5fill in blank

hard

Fill all three blanks to define a state hook for modal visibility and a button to open the modal.

React Native

const [modalVisible, [1]] = useState([2]);

<Button title="Open Modal" onPress={() => [3](true)} />

Drag options to blanks, or click blank then click option'

AsetModalVisible

Bfalse

DmodalVisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name instead of setter

Setting initial state to true

Calling wrong function on button press

The state hook returns the variable and setter: modalVisible and setModalVisible. Initial value is false. The button calls setModalVisible(true) to open the modal.