React Native Create Custom Alert Dialog Box in Android iOS App Tutorial

React Native gives us pre build Alert dialog box to show alert messages on application screen but that Alert is old fashioned and dose not come with any modifications like adding images and customized layout. We can make our own Alert Dialog Box using Modal component, So in this tutorial we would going to Create Material Style Custom Alert Dialog Box in Android iOS React Native App with OK and CANCEL button Example Tutorial. The Alert Dialog Box is a small View windows that shows on the application screen on a specific task to going further or need additional information from application user.

Contents in this project Create Custom Alert Dialog Box in Android iOS React Native App Example Tutorial:

1. Import Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity and Alert component in your project.

2. Create a State named as Alert_Visibility, which is used to Show and Hide the Modal(Alert Dialog).

3. Create a function named as Show_Custom_Alert(), This function is used to Show and Hide the Alert Dialog Box.

4. Crate a function named as ok_Button(), which would call on OK button onPress event.

5. Create a Root View in render’s return block, This view would be our Main Root View.

6. Create a Modal component inside Root View, This would be our Custom Alert Dialog Box.

visible : This prop is used to show and hide the Modal using State.

transparent : Makes the Modal background transparent.

  • True : The modal background is Transparent.
  • False : Modal background is not Transparent.

animationType : User can decide whether he wants to show modal with some special effects, below is its properties.

  • Slide : Modal slides from bottom to top with animation.
  • fade : Modal shows with fade in out effect.
  • none : Without any screen effect.

onRequestClose : It will override the back button in Android and hide Alert Dialog Box on back button press.

7. Create Custom Alert Dialog View inside Modal component.

8. Creating A button component After closing the modal component, This button would show the Alert dialog at first time on screen.

9. Creating Style.

10. Complete source code for App.js File :

Screenshots in Android device :

Create Custom Alert Dialog Box

Screenshots in iOS device :

8 Comments

  1. Thanks bro, can you leave the source of the project?

  2. Thanks a lot for “modal” usage

  3. Parth Shrivastav

    I want to display this custom dialog box on top of my previous screen, making the previous screen transparent on the background of the dialog box

    • Parth please be more specific about your requirement, You want to open activity over activity or screen view over screen view ?

  4. how to hide the modal on click on the transparent area like android’s default popup ?

  5. sir, how to open model on same screen not forward to another new screen..

Leave a Reply

Your email address will not be published.