How to access child views in React Native? - react-native

Question

I am new to react native.
I have used a Flat Grid and I want to access a Image component on click event. I want to update its image and I am unable to access that image tag.
On click of gird item I want to update image src.
Scenario :-
I have got list of recipes and on click of these I want show them selected by making the Icon to tick.
below is Flat Grid I have used.
<FlatGrid
itemDimension={130}
items={this.state.recipie_listing}
renderItem={({ item, index }) => (
<TouchableOpacity
onPress={() => this.AddRecipe(index, item.id)}>
<View>
<ImageBackground
style={{
height: 250,
width: "100%"
}}
imageStyle={{ borderRadius: 10 }}
source={{
uri: item.image
}}
>
<Icon
name={this.state.icon_name}
style={{
color: this.state.icon_color,
position: "absolute",
right: 2,
top: 2
}}
/>
<View
style={{
backgroundColor: "rgba(220, 222, 224, 0.8)",
height: 60,
width: "100%",
borderBottomEndRadius: 10,
borderBottomStartRadius: 10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
position: "absolute",
bottom: 0
}}
>
<CustomText
style={{
marginStart: 10,
marginEnd: 5,
color: "white",
fontSize: 15,
fontWeight: "bold"
}}
>
{item.name}
</CustomText>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)}
/>

Answer 1

At first, add a state variable like showImage to false and then
In AddRecipe method call the setState method and toggle the variable value and then where you want to load the image src add conditional rendering
here is a code example
state = { showImage : false}
------
AddRecipe = () =>{
this.setState({
showImage:!this.state.showImage
})
render(){
return(
----------
<ImageBackground
style={{
height: 250,
width: "100%"
}}
imageStyle={{ borderRadius: 10 }}
source={{
uri: this.state.showImage === true ? src1 : src2
}}
>
----------
)
}
I think that will help you as far as I understand your problem.