React Native Modal Component
Last Updated :
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 2: Now create a project by the following command.
expo init 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
Share your thoughts in the comments
Please Login to comment...