Tutorial React Native | Custom Modal

Learn how to build a beautiful custom modal in React Native using only the native Modal component from React Native, no external libraries required. You’ll see how to add smooth animations for opening and closing the modal, and how to handle dark mode styling so your modal looks great in both light and dark themes.

I demonstrate setting up the project with React Native CLI, managing modal state with React hooks, and organizing your modal component inside a dedicated folder. This tutorial is perfect if you want a simple, customizable modal without adding dependencies or complexity.

What's inside

• Introduction and project setup with React Native CLI
• Using React Native's built-in Modal component
• Managing modal open/close state with React useState
• Adding animations for modal appearance and dismissal
• Supporting dark mode with conditional styling
• Organizing modal code in a separate components folder
• Running and testing the app on iOS and Android simulators
• Tips on customizing modal styles and text appearance

Introduction and project setup with React Native CLI

I start by creating a new React Native project using React Native CLI (npx react-native init modalBiak). I explain why I prefer CLI over Expo for this demo, mainly because it gives you more control and is closer to real production apps. The project setup takes a couple of minutes to install dependencies and build.

Once the project is ready, I open it in Visual Studio Code and run the app on a simulator. The default app screen is cleaned up to prepare for the modal implementation.

Using React Native's built-in Modal component

Instead of installing any external modal library, I use the Modal component that comes with React Native. This component handles showing and hiding content in a modal overlay. I create a new folder called components inside src and add a file named ModalMay.js (avoiding the name Modal to prevent conflicts).

Inside this file, I import React Native’s Modal and Text components and start with a simple modal that just displays some text. This approach keeps dependencies minimal and leverages React Native’s native modal support.

Managing modal open/close state with React useState

To control when the modal is visible, I use React’s useState hook. I declare a state variable modalOpen initialized to false. A button labeled "Open" toggles this state to true, which triggers the modal to appear.

This state-driven approach makes it easy to open and close the modal from anywhere in your app by updating the modalOpen boolean.

Adding animations for modal appearance and dismissal

The modal animates smoothly when opening and closing. I show how to animate the modal sliding up from the bottom when it opens, and sliding down when it closes. These animations are done using React Native’s built-in animation APIs combined with the modal’s visibility state.

This creates a polished user experience without needing third-party animation libraries.

Supporting dark mode with conditional styling

I demonstrate how to detect the device’s color scheme (light or dark mode) using React Native’s useColorScheme hook. Based on the current mode, I conditionally apply styles to the modal background and text colors.

For example, in dark mode, the modal background is dark and text is white, while in light mode the colors invert. This ensures your modal looks great and is readable regardless of the user’s theme preference.

Organizing modal code in a separate components folder

To keep the project clean, I create a components folder inside src and place the modal component there. This separation helps maintainable code and makes it easier to reuse or extend the modal later.

I also show how to import and use this modal component inside the main App.js file.

Running and testing the app on iOS and Android simulators

I cover running the app on both iOS and Android simulators using React Native CLI commands. You see the modal open and close with animations, and how the dark mode styles update when switching device themes.

This testing ensures your modal works consistently across platforms.

Tips on customizing modal styles and text appearance

Finally, I add some style tweaks like centering content, adjusting font size and weight, and setting background opacity behind the modal. These small details improve the modal’s look and feel.

I also mention how you can expand this modal with buttons, inputs, or other UI elements as needed for your app.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.