onclick change img opacity - react native? - css

Question

I'm really new to react native, and Im working on a simple app with 4 images and four button, each button should change the opacity on an image, but I'm lost om how to do that....can someonne point me into the right direccion on how to do this.
<View style={styles.card}>
<Image source={require('./assets/1.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 1</Text>
</View>
<View style={styles.card}>
<Image source={require('./assets/2.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 2</Text>
</View>
const styles = StyleSheet.create({
cardImgStyle: {
width : "100%",
height : 140,
borderTopLeftRadius : 10,
borderTopRightRadius: 10,
marginBottom : 3,
opacity: .2
},
});

Answer 1

maybe you can useState for this case, in my opinion you can handle the id on object to selected the image, and you can use the condtional rendering when user selected, set the style.selectImage and use the opacity 0.4. you can check my code example on bottom . hope this my explanation can help you.
const data = [
{
id: 1,
image : require('../../yourpath'),
id: 2,
image: require('../../yourpath')
}
]
const = [ selected, setSelected ] = useState(0)
<FlatList
horizontal
pagingEnabled={true}
data={data}
style={{height:130 }}
renderItem={({item})=>{
const content =
selected === item.id
? style.selectImage
: style.unSelectImage;
return(
<View style={style.wrapper}>
<TouchableOpacity style={content} onPress={()=>setSelectedId(item.id)}}>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image source={item.image} style={{height: 65, width: 60}}/>
</View>
<Text style={{color: 'black', textAlign: 'center', marginTop: 10}}>{item.title}</Text>
</TouchableOpacity>
</View>
)
}}/>