How to add dynamic height to modal react native

Hi guys, In this article, we are going to learn about How to add dynamic height to modal react native. As you all know react native use the default OS alert box to show messages which is very basic & UI is also very old. The developer is not able to customize these default react-native alert box. so developers need to create their own custom alert box with respect to their application look and feel. React native provides a modal component that can show over the rendered UI screen but the most common issue with this modal is to show the proper modal on-screen & use this modal to create a custom alert box.

So In this article, we will create a custom alert with dynamic height. let’s start with an example

1. Create a new project

create a new project using the following command

2. Create a custom alert

react nativeCreate CustomAlert.js using react native modal.

so as you can see, I have added a fullscreen modal with transparent background.

Inside this modal displayed a view as an alert box at the center of the modal.

Also, I have added a margin vertical 60 in style this will render height dynamically with respect to the display message

3. Display dynamic height modal on screen

In 2nd step, we have created a custom alert box using react native modal component. Now will have to render this customAlert on screen for that we have to import this CustomAlert.js on the main screen.

Pass Display Title, Display Message, and two boolean values (one for display alert & another for hide alert) as a props to custom Alert.

here’s the source code for the main screen.

This is how we can add dynamic height to the react-native modal and display a nice alert box. To learn more about custom alert box check this post

4 Output

How to add dynamic height to modal react native

How to add dynamic height to modal react native

Try this code and create your own nice alert box.

Thank you.

Leave a Reply

Your email address will not be published.