Hello, React Native friends. ? Hope you are coding happily.
Welcome to MageComp’s React Native tutorials.
Today, in this React Native tutorial, we will learn about creating a modal in react native.
What is a Modal in React Native?
In React Native, a modal is a component that is used to present content above an enclosing view. It’s often used for tasks such as displaying additional information, gathering user input, or presenting alerts.
Modals are a great tool for improving user interfaces. Essentially, a modal is a screen that appears above another screen, directing a user’s attention toward critical information or guiding them to the next step in a process. An active modal disables the original screen, which is still visible, prompting the user to interact with the new one.
Example of React Native Modal
import React, { useState } from 'react';
import { View, Text, Modal, Button } from 'react-native';
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!modalVisible);
};
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Open Modal" onPress={toggleModal} />
<Modal
animationType="slide"
transparent={false}
visible={modalVisible}
onRequestClose={toggleModal}
>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View>
<Text>Hello! I am a modal!</Text>
<Button title="Close Modal" onPress={toggleModal} />
</View>
</View>
</Modal>
</View>
);
};
export default App;
Bottom Line
In this example, the Modal component is used to create a modal that becomes visible when the “Show Modal” button is pressed. The isModalVisible state controls the visible prop, and the onRequestClose prop is used to define what happens when the user attempts to close the modal (in this case, calling the toggleModal function).
You can customize the appearance and behavior of modals according to your application’s requirements, and you can include any content within the Modal component to be displayed in the overlay.
If you need any further help regarding the modal in react native, kindly contact us and get the required help from the best React Native Developers.
Happy Coding!!!