Custom Dialog Box Component in React Native

Hi Guys, In this article, we are going to learn about Custom Dialog Box Component in React Native. Developers sometimes need to show an alert box to display the success or error message. A React Native has its own alert message but this will display the default operating system alert box and it’s very simple.

Check this article which I wrote before for React Native simple Alert dialog but if you want to display nice & awesome dialog in React native then either you have to use any third-party dependency or you have to create a custom component but it takes some time. so In this article, we will create a Nice custom dialog box component in React Native. so let’s start with an example

Custom Dialog Box Component in React NativeCustom Dialog Box Component in React Native

Contents:

  1. Create new project
  2. Create a new CustomAlert.js as a custom dialog component
  3. Import CustomAlert.js in Dashboard screen
  4. Pass props to CustomAlert.js
  5. Create two buttons on Dashboard to display an alert message

1. Create a new project

I am using my old project which I had created before. Install the following dependency to use icons.

2. Create CustomAlert.js

Create a custom component in your component directory and paste the following source code into it.

3. Import CustomAlert.js in Dashboard

Import your custom component in your main screen inside the return method. I am using react native hooks in the functional component.

4. CustomAlert props

There are four main props that need to pass to CustomAlert component

  • DisplayMode: You can display success or error alerts.
  • DisplayMsg: You can pass the String message to display on the Alert box.
  • Visibility: You can set a Boolean value which only use to display the Alert box.
  • DismissAlert: This triggers from Alert box OK button and returns a false value and set Visibility

5. Output

Thank you 🙂 , Hope you like this article

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *