A custom modal in React Native allows developers to design fully customized dialog boxes instead of relying only on the default Modal component behavior.
React Native modals are typically controlled using a boolean state. Custom modals are created using views layered above the screen with absolute positioning and optional animations.
// Custom modal component using React Native
import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
export default function App() {
const [visible, setVisible] = useState(false);
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => setVisible(true)}>
<Text style={styles.openBtn}>Open Modal</Text>
</TouchableOpacity>
{visible && (
<View style={styles.overlay}>
<View style={styles.modalBox}>
<Text style={styles.title}>Custom Modal</Text>
<TouchableOpacity onPress={() => setVisible(false)}>
<Text style={styles.closeBtn}>Close</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container:{ flex:1, justifyContent:"center", alignItems:"center" },
overlay:{ position:"absolute", top:0, left:0, right:0, bottom:0, backgroundColor:"rgba(0,0,0,0.5)", justifyContent:"center", alignItems:"center" },
modalBox:{ width:250, padding:20, backgroundColor:"#fff", borderRadius:10 },
openBtn:{ color:"blue" },
closeBtn:{ color:"red", marginTop:10 },
title:{ fontSize:18, fontWeight:"bold" }
});
When the button is pressed, the modal overlay appears centered on the screen. Closing the modal updates the state and hides the overlay.
Click the button inside the phone simulator below to see how the logic works in real-time.