How to change the TouchableOpacity image on press - react-native

Question

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import check from './assets/icons/covid.png'
import pill from './assets/icons/pill.png'
export default function App() {
return (
<View style={styles.container}>
<View style={styles.containerone}>
<TouchableOpacity style={{borderRadius: 100, height: 150, width: 150, backgroundColor: '#fff', marginTop: 80}}>
<Image source={pill} style={styles.pillButton}/>
<Image source={check} style={styles.checkButton}/>
</TouchableOpacity>
</View>
<View style={styles.containertwo}>
<Text style={{color:'#982fc2', fontWeight:'bold', fontSize:20}}>Text b</Text>
<Text style={{color:'#982fc2', fontWeight:'bold', fontSize:20}}>Text a</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#982fc2'
},
containerone: {
flex: 1,
alignItems: 'center'
},
containertwo: {
flex: 1,
backgroundColor: '#fff',
borderTopRightRadius: 60,
borderTopLeftRadius: 60,
padding: 40
},
button: {
backgroundColor: '#fff',
borderRadius: 100,
height: 150,
width: 150,
marginTop: 100,
alignItems:'center',
justifyContent: 'center'
},
checkButton: {
height: 130,
width: 130,
display:'none'
},
pillButton: {
height: 130,
width: 130,
display: 'flex',
marginTop: 10
}
});
I have a simple question, how can I change the style of two buttons in press the first:
I created one style for each button, the first button is visible, and the second is hidden, so, I want to, when I press the first button, I change it style to display: 'none', and in the second, to display:'flex', can you guys help me?

Answer 1

Ciao, you colud use state to alternate Image visibility avoding to use css. Something like:
export default function App() {
const[alternateImage, setAlternateImage] = useState(true);
const changeImage = () => {
setAlternateImage(alternateImage => !alternateImage);
}
return (
<View style={styles.container}>
<View style={styles.containerone}>
<TouchableOpacity style={{borderRadius: 100, height: 150, width: 150, backgroundColor: '#fff', marginTop: 80}} onPress={changeImage}>
{alternateImage && <Image source={pill} style={styles.pillButton}/>}
{!alternateImage && <Image source={check} style={styles.checkButton}/>}
</TouchableOpacity>
</View>
<View style={styles.containertwo}>
<Text style={{color:'#982fc2', fontWeight:'bold', fontSize:20}}>Text b</Text>
<Text style={{color:'#982fc2', fontWeight:'bold', fontSize:20}}>Text a</Text>
</View>
</View>
);
}
and you could remove display: 'none' from Image css.