Hide Show Image Component on Button Click in React Native

Hello friends, In today’s tutorial we would learn about a Style prop named as display to hide show image component on button click in react native. The display style prop supports 2 values flex and none. When we pass flex value to display then it will show the image component and when we pass none value to display then it will hide the image component. We would control both of these values using a State variable. So let’s get started 🙂 .

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

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

2. Creating our main App component.

3. Creating a State named as show_Hide with State update method setShowHide. We would set the default value flex.

4. Create another State named as text with State update method setText. We would use this state to update the Button text according to image show and hide situation.

5. Creating a function named as letToggle(). We would Toggle the state values in this function and show and hide the image component and button text.

6. Creating return() block, Now here first we would make a Image component with display style prop. Here we would pass our show_Hide State as display property. We would also make a Button.

7. Creating Style.

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

Screenshots :-

Hide Show Image Component on Button Click in React Native

Leave a Reply

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