How to create reusable Modal in react native - react-native

Question

I want to create a pop-up in react-native using Modal. Modal should be a created in such a way that it can be reused. Please let me know how to do this as I am new to react-native.

Answer 1

First you will need one state to control when the modal will show.
const [show, setShow] = useState(false)
And then when the condition was achieved, you will set this state to true and show the modal, I will let one example.
<TouchableOpacity
onPress={setShow(true)} />
//some icon
</TouchableOpacity>
Now you will use show to control your modal, but first let's create the modal component. You will create one js file and create the modal component inside it.
import React from 'react'
import {Modal, View, Text} from 'react-native'
const Modal = ({message, buttonMessage, show, setshow}) => {
return (
<Modal
animationType='slide'
transparent={true}
visible={show}
backgroundColor='white'
>
//What you want to show inside the modal, Views, Text, whatever, you will construct one 'screen' here
<View>
<Text>{message}</Text> //Showing the message
<Button
title={buttonMessage}
onPress={setShow(false)} //To not show the modal for example
/>
</View>
</Modal>
)}
export default Modal
Modal component are receiving at the start message and buttonMessage, so you can pass what you want to the component receive and then use it inside your code, and now when you invoke Modal you will pass message and buttonMessage as props to it use, you will see how. Note that Modal are being exported at the end, so now you can use import it in any screen that you want show it.
Let's suppose that you have one screen and will invoke the Modal component that you create.
import React, {useState} from 'react';
import { View, Text} from 'react-native';
import Modal from 'patch' //Note, patch will be where is the modal file that you create
const ContentCompenent = () => {
const [show, setShow] = useState(false)
return (
<View>
// Your screen content
// Your screen content
//Now you will invoke the Modal
<Modal message={'your message or your variable with the message'} buttomMessage={your message or your variable with the message} show={show} setShow={setShow} />
</View>
//When you setShow here to true, the modal will appears, and as you are passing setShow as prop to Modal, when you setShow(false) in the modal it will disappears.