Show Hide Modal on Button Click in React Native

Hello friends, In today’s tutorial we would learn about visible prop of modal component in react native. The visible prop in Modal is used to display the modal when its value its True and terminate the modal when its value is False. We can control is value using State. Now when user clicks on the button then we would set the State value True so the Modal became visible on screen. Now we have to make a Button or Icon inside the Modal, Which is used to again make the Value of State to false and hide the modal from screen. So in this tutorial we would learn about Show Hide Modal on Button Click in React Native.

Contents in this project Show Hide Modal on Button Click in React Native :-

1. Open your project’s main App.js file and import useState, Button, Modal, SafeAreaView, StyleSheet, Text and View component.

2. Creating our main App component.

3. Creating 1 State named as isVisible with State update method setVisible. This state is used to Show and Hide the modal component in react native.

4. Creating return() block, Here we would make our main Modal component with visible prop and assign isVisible State to visible prop.

5. Creating 1 Button component. On the button onPress event we would change State value to True to show the modal.

6. Creating Style.

7. Complete Source Code for App.js File :-

Screenshots :-

Show Hide Modal on Button Click in React Native

Leave a Reply

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