Creating A Pop Up Modal In React Native

What Is A React Native Modal?

Pop-up modals are essential UI components for displaying focused content that overlays the current screen. Whether you're showing a confirmation dialog, collecting user input through a form, or displaying important notifications, React Native's built-in Modal component provides a flexible foundation for these interactions.

The Modal component presents content above an enclosing view, blocking interaction with the underlying UI until the user dismisses it. This pattern keeps users in their current context while allowing them to complete specific tasks or review important information without navigating to a new screen. For mobile applications requiring seamless user experiences, mastering modal implementation is a fundamental skill that bridges the gap between basic screens and interactive workflows.

Our team of React Native developers specializes in building polished mobile interfaces that prioritize user experience. Learn more about our mobile app development services for projects requiring advanced UI patterns.

What You'll Learn:

• Understanding the Modal component's core props and behavior
• Implementing basic and advanced modal patterns
• Configuring animations and platform-specific behaviors
• Applying accessibility best practices
• When to use built-in Modal versus third-party libraries

Core Modal Props Every Developer Should Know

React Native's Modal component exposes several props that control its behavior and appearance. Understanding these fundamental properties is essential for building effective modal implementations for both iOS and Android platforms.

Visibility Control

The visible prop determines whether your modal is displayed. This prop should be controlled by React state, typically initialized as false and toggled to true when a user triggers the modal:

const [modalVisible, setModalVisible] = useState(false);

<Modal visible={modalVisible} onRequestClose={() => setModalVisible(false)}>
 {/* Modal content */}
</Modal>

Animation Types

The animationType prop controls how the modal animates when appearing and disappearing:

Transparency

The transparent prop determines whether your modal fills the entire view. Setting this to true renders the modal over a transparent background, allowing users to see the underlying content dimmed behind the modal.

Platform-Specific Props

• Android: hardwareAccelerated, statusBarTranslucent, navigationBarTranslucent
• iOS: presentationStyle, supportedOrientations, onDismiss, onOrientationChange

The onRequestClose prop is required on Android for handling the hardware back button and on Apple TV for handling the menu button.

Building Your First Modal: Complete Code Example

Here's a practical implementation demonstrating a reusable modal component with state management, proper styling, and user interaction handling:

import React, { useState } from 'react';
import {
 Modal,
 View,
 Text,
 Pressable,
 StyleSheet,
 Alert,
 SafeAreaView
} from 'react-native';

const App = () => {
 const [modalVisible, setModalVisible] = useState(false);

 return (
 <SafeAreaView style={styles.container}>
 {/* Trigger Button */}
 <Pressable
 style={styles.button}
 onPress={() => setModalVisible(true)}
 >
 <Text style={styles.buttonText}>Show Modal</Text>
 </Pressable>

 {/* Modal Component */}
 <Modal
 animationType="slide"
 transparent={true}
 visible={modalVisible}
 onRequestClose={() => {
 Alert.alert('Modal has been closed.');
 setModalVisible(!modalVisible);
 }}
 >
 <View style={styles.centeredView}>
 <View style={styles.modalView}>
 <Text style={styles.modalText}>Hello World!</Text>
 <Pressable
 style={[styles.button, styles.buttonClose]}
 onPress={() => setModalVisible(!modalVisible)}
 >
 <Text style={styles.textStyle}>Hide Modal</Text>
 </Pressable>
 </View>
 </View>
 </Modal>
 </SafeAreaView>
 );
};

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 },
 centeredView: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 },
 modalView: {
 margin: 20,
 backgroundColor: 'white',
 borderRadius: 20,
 padding: 35,
 alignItems: 'center',
 shadowColor: '#000',
 shadowOffset: { width: 0, height: 2 },
 shadowOpacity: 0.25,
 shadowRadius: 4,
 elevation: 5,
 },
 button: {
 borderRadius: 20,
 padding: 10,
 elevation: 2,
 },
 buttonOpen: {
 backgroundColor: '#F194FF',
 },
 buttonClose: {
 backgroundColor: '#2196F3',
 },
 textStyle: {
 color: 'white',
 fontWeight: 'bold',
 textAlign: 'center',
 },
 modalText: {
 marginBottom: 15,
 textAlign: 'center',
 },
});

This example demonstrates several key patterns:

1. State-driven visibility using useState hook
2. Transparent backdrop for visual hierarchy
3. Slide animation for smooth transitions
4. Pressable buttons for user interaction
5. Shadow and elevation for depth perception
6. Proper Android back button handling via onRequestClose

For teams building React Native applications, partnering with experienced web development professionals ensures your UI components follow platform best practices and deliver exceptional user experiences.

Common Modal Patterns In Production Apps

Confirmation Dialogs

Confirmation modals are critical for preventing accidental destructive actions. They typically present two clear actions: one to confirm and one to cancel.

const ConfirmationModal = ({ visible, onConfirm, onCancel, title, message }) => (
 <Modal transparent={true} visible={visible} onRequestClose={onCancel}>
 <View style={styles.centeredView}>
 <View style={styles.modalCard}>
 <Text style={styles.modalTitle}>{title}</Text>
 <Text style={styles.modalMessage}>{message}</Text>
 <View style={styles.buttonRow}>
 <Pressable style={styles.cancelButton} onPress={onCancel}>
 <Text style={styles.cancelText}>Cancel</Text>
 </Pressable>
 <Pressable style={styles.confirmButton} onPress={onConfirm}>
 <Text style={styles.confirmText}>Confirm</Text>
 </Pressable>
 </View>
 </View>
 </View>
 </Modal>
);

Form Modals

Form modals collect user input without navigation context. When implementing form modals, always consider:

• Using KeyboardAvoidingView to prevent keyboard from covering inputs
• Form validation feedback within the modal
• Clear submit and cancel actions
• Loading states during submission

Alert And Notification Modals

Use alert modals sparingly for truly important information:

• System errors that require user attention
• Important confirmations after critical actions
• Permission requests that block functionality

Best Practice: Avoid overusing modals for non-critical information, as they interrupt user flow and can create friction when overused.

Built-In Modal vs Third-Party Libraries

While React Native's built-in Modal component handles most use cases effectively, the ecosystem offers libraries that extend functionality:

When To Use Built-In Modal

• Standard confirmation dialogs and alerts
• Simple form overlays
• When minimizing dependencies is a priority
• When platform-standard behavior is desired

Third-Party Libraries Worth Considering

Recommendation: Start with the built-in Modal component. It provides excellent cross-platform support and covers the majority of modal use cases. Introduce third-party libraries only when specific features like advanced animations or platform-specific presentation styles are required.

For organizations building complex mobile applications, our web development team can help architect scalable UI component libraries that maintain consistency across your application.

Platform-Specific Presentation Styles (iOS)

For iOS, the presentationStyle prop offers several options:

• fullScreen - covers the screen completely
• pageSheet - centered, narrow width on larger devices (recommended for forms)
• formSheet - even narrower, compact presentation
• overFullScreen - full screen but allows transparency

Note: When using pageSheet or formSheet, the supportedOrientations property will be ignored on iOS.

Sources

• React Native Modal Documentation
• AddJam: React Native Modals in 2025
• AppStudio: How to Create a Pop-Up Modal in React Native