How to Implement React Native Modal

What is a React Native Modal ?

Let’s get started

import { Modal } from 'react-native'
import { StyleSheet, View, Text, Modal, TouchableOpacity, Button} from 'react-native';export default function Home({ navigation }){return(
<View style={styles.container}>
<Modal visible={false}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>"Modal is showing!"</Text> </View>
</View>
</Modal>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Show Modal</Text>
</TouchableOpacity>
</View> )
}
import { StyleSheet, View, Text, Modal, TouchableOpacity, Button} from 'react-native';
import React, {useState} from 'react';
export default function Home({ navigation }){
const [ modalOpen , setModalOpen ] = useState(false)
return(
<View style={styles.container}>
<Modal visible={modalOpen} animationType='slide'>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>"Modal is showing!" </Text>
</View>
</View>
</Modal>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(true)>
<Text style={styles.buttonText}>Show Modal</Text>
</TouchableOpacity>
</View>);
}
export default function Home({ navigation }){
const [ modalOpen , setModalOpen ] = useState(false)
return(
<View style={styles.container}>
<Modal visible={modalOpen} animationType='slide'>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>"Modal is showing!" </Text>
<TouchableOpacity style={styles.closeButton} onPress={() => setModalOpen(false)}>
<Text style={styles.closeButtonText}>Close Modal</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(true)>
<Text style={styles.buttonText}>Show Modal</Text>
</TouchableOpacity>
</View>);
}

React-Native-Modal Library

import Modal from 'react-native-modal';

Citation

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store