Skip to main content

React Native Modals

Image of Madeline Watts
Madeline Watts
Software Engineer
GitHubLinkedIn
Read More
Hello! I'm Madeline, the founder of AppHelion and full time app developer. I have developed and published several apps using a variety of frameworks and I started AppHelion to share what I've learned!

Last updated: June 2025

GitHubView on GitHub

This is a complete guide on modals in React Native. We will cover bottom sheets, center screen modals, and full-screen modals.

@TODO add modal pictures and examples

Bottom Sheets​

Bottom sheets are modals that usually take up the lower part of the screen when visible.

Examples​

  • @TODO Walmart product viewing
  • google docs

Use Cases​

use case here

Implementation​

code will go here

Center Screen Modals​

Center screen modals are pretty self-explanatory, they are modals located in the center of the screen (pop-up).

Examples​

  • @TODO get examples

Use Cases​

use case here

Implementation​

code will go here

Full-Screen Modals​

Full-screen modals take up the entire screen, but they are not a separate screen.

Examples​

  • @TODO get examples

Use Cases​

use case here

Implementation​

code will go here