React Native Modal Component

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