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.
|
1 2 3 |
import React, { useState } from 'react'; import { Text, StyleSheet, Image, Button, SafeAreaView } from 'react-native'; |
2. Creating our main App component.
|
1 2 3 4 |
export default function App() { } |
3. Creating a State named as show_Hide with State update method setShowHide. We would set the default value flex.
|
1 |
const [show_Hide, setShowHide] = useState('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.
|
1 |
const [text, setText] = useState('Hide Image Component'); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
const letToggle = () => { if (show_Hide === 'flex') { setShowHide('none'); setText('Show Image Component') } else { setShowHide('flex'); setText('Hide Image Component') } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return ( <SafeAreaView style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Example of Show and Hide Image on Button Click in React Native </Text> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }} style={{ width: 300, height: 250, resizeMode: 'contain', display: show_Hide }} /> <Button onPress={letToggle} title={text} /> </SafeAreaView> ); |
7. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center' }, text: { fontSize: 24, textAlign: 'center', color: 'black', } }); |
8. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import React, { useState } from 'react'; import { Text, StyleSheet, Image, Button, SafeAreaView } from 'react-native'; export default function App() { const [show_Hide, setShowHide] = useState('flex'); const [text, setText] = useState('Hide Image Component'); const letToggle = () => { if (show_Hide === 'flex') { setShowHide('none'); setText('Show Image Component') } else { setShowHide('flex'); setText('Hide Image Component') } } return ( <SafeAreaView style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Example of Show and Hide Image on Button Click in React Native </Text> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }} style={{ width: 300, height: 250, resizeMode: 'contain', display: show_Hide }} /> <Button onPress={letToggle} title={text} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center' }, text: { fontSize: 24, textAlign: 'center', color: 'black', } }); |
Screenshots :-
