React Native Simple Modal Component iOS Android Example Tutorial

Modal is a type of View component available in react native that supports both Android and iOS applications. Modal comes with 3 different showing options which decides how the Modal will show inside the react native app. Modal shows above the screen and covers all the application screen. So in this tutorial we would going to create a react naive app with rounded corners Modal Component. So let’s get started .

Contents in this project Simple Modal Component iOS Android Example Tutorial :

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

2. Create a constructor() in your class. Inside the constructor() create a State named as ModalVisibleStatus and set its default value as False. This state is used to Show and Hide the Modal component.

3. Create a function named as ShowModalFunction(). This function is used to change the ModalVisibleStatus State value to visible.

4. Create a Root Main View in render’s return block.

5. Create Modal component inside Root View.

transparent : This prop support Boolean value true or false. If its value is false then it will disable the transparency view in modal, If its value is true then it will enable the transparency.

animationType : This prop supports 3 types of values slide, fade and none.

  1. slide : Modal will smoothly slide from bottom to top with animation of application screen.
  2. fade : Modal will fade in and fade out on showing time.
  3. none : Modal will direct show on application screen without any animation.

visible : Supports Boolean value to show and hide the Modal.

onRequestClose : This prop would call the android mobile device hardware back button and also the Menu button Apple TV. You can call any function here and it will execute on back button press.

6. Create a Main View in Modal. This would be our complete Modal View.

7. Now again create another View component inside the View. We would do this because we want to show Modal in the middle of application screen.

8. Create a Sample Text component and a Button inside the View.  The button is used to again Hide the Modal component, So we would call the ShowModalFunction(!this.state.ModalVisibleStatus)} method on Button onPress event. This would hide the Modal.

9. Create a Button after closing Modal . This button is used to Show the Modal component, This button is also shows on Root Main View.

10. Create CSS Style for All components.

11. Complete source code for App.js File :

Screenshots in Android device :


Simple Modal ComponentScreenshot in iOS device :