React Native Modal Component - GeeksforGeeks

10 May, 2021
The following approach covers how to create Modal in react-native. For this, we are going to use the Modal component. It is a basic way to present content above an enclosing view.
Syntax:
<Modal
  animationType=""
  transparent={}
  visible={}
  onRequestClose={}
>
Props in Modal:
animationType: This prop controls how the modal animates.
animated: This prop is deprecated now use animationType instead.
hardwareAccelerated: This prop controls whether to force hardware acceleration for the underlying window. It is only for android devices.
onDismiss: This prop allows passing a function that will be called once the modal has been dismissed. It is only for ios devices.
onOrientationChange: It is called when the orientation changes while the modal is being displayed. It is only for ios devices.
onRequestClose: It is called when the user taps the hardware back button on Android.
onShow: This  prop allows passing a function that will be called once the modal has been shown.
presentationStyle: This prop controls how the modal appears. It is only for ios devices.
statusBarTranslucent: This prop determines whether your modal should go under the system statusbar.
supportedOrientations: This prop allows the modal to be rotated to any of the specified orientations. It is only for ios devices.
transparent: This prop determines whether your modal will fill the entire view.
visible: This prop determines whether your modal is visible or not.
Now let’s start with the implementation:
Step 1: Open your terminal and install expo-cli by the following command.npm install -g expo-cli
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.expo init myapp
Step 2: Now create a project by the following command.
expo init myapp
Step 3: Now go into your project folder i.e. myappcd myapp
Step 3: Now go into your project folder i.e. myapp
cd myapp
Project Structure: It will look like this.
Example: Now let’s implement the Modal. Here we created a Modal that comes up when we click on the button.
App.js
App.js
import React , {useState} from 'react';import { StyleSheet, View , Text , Modal , Button } from 'react-native';export default function App() {  const [active , setactive] = useState(false);  return (    <View style={styles.container}>        <Modal        animationType="slide"        transparent={true}        visible={active}        onRequestClose={() => {          console.warn("closed");        }}        >          <View style={styles.container}>            <View style={styles.View}>            <Text style={styles.text}>GeeksforGeeks</Text>            <Button title="close"                     onPress={()=>{setactive(!active)}}/>            </View>          </View>        </Modal>        <Button           title={"click"}          onPress={()=>{setactive(!active)}}        />    </View>  );}  const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor : "black",    alignItems: 'center',    justifyContent: 'center',  },  View : {    backgroundColor : "white" ,    height : 140 ,    width : 250,    borderRadius : 15,    alignItems : "center",    justifyContent : "center",    borderColor : "black",    borderWidth:2,  },  text : {    fontSize : 20,    color : "green",    marginBottom:20  },  button : {    margin : 20,    width:200,  }});
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
Reference: https://reactnative.dev/docs/modal
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Angular Libraries For Web Developers
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Insert Form Data into Database using PHP ?
How to redirect to another page in ReactJS ?
How to execute PHP code using command line ?
How to pass data from child component to its parent in ReactJS ?