Update images of listView item on click in react-native - react-native

Question

This is one item in my ListView
If you saw right side there is one grey circle. Here I want
when I tab on this Image it should became like this :
here I am able to do it seprately but it won't happen in list view here is my code :
constructor(props) {
super();
super(props);
const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.guid != r2.guid});
this.state = {
dataSource: dataSource.cloneWithRows(productArray),
isLoading: true,
item1Check: true,
item2Check: true
}
}
this is my renderFile :
<ListView
style={{paddingBottom: 40}}
dataSource={this.state.dataSource}
enderRow={(item, rowID) => this._renderMenuItem(item, rowID)}/>
this is item of listView
_renderMenuItem(item, rowID) {
var imgSource1 = this.state.item1Check? checkImg : crossImg;
var imgSource2 = this.state.item2Check? checkImg : crossImg;
console.log("sfsd1121212asas",rowID,this.state.item1Check,item.p1id)
return (
<View style={{
flex: 1, borderBottomWidth: 0, flexDirection: 'column', alignItems: 'center',
marginBottom: 25, marginRight: 10, marginLeft: 10
}}>
<Item style={[styles.squareLayout, {marginBottom: 8}]}>
<CachedImage source={{uri: '../orange.jpg'}}
style={{
width: 100, height: 100, borderRadius: 10, overflow: 'hidden',
borderColor: AppColors.grey2, borderWidth: 1
}}/>
<Item style={{
flex: 3,
flexDirection: 'column',
borderBottomWidth: 0,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center'
}}>
<Text style={{
flex: 1, fontFamily: AppStyles.fontFamily, fontSize: 10, color: AppColors.grey1,
justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start',
paddingLeft: 8, paddingTop: 8
}} numberOfLines={1}>Our Apple fruit is Fresh, Delicious and crunchy. It is one of the most
popular fruit, favorite of health conscious, fitness lovers who believe in the concept
“health is wealth. The fresh Himachal apples are exported worldwide directly from farms at
very competitive prices.</Text>
<Text style={{
flex: 4, fontFamily: AppStyles.fontFamilyMedium, fontSize: 16, color: AppColors.black,
justifyContent: 'center', alignItems: 'center', alignSelf: 'flex-start',
paddingLeft: 8, paddingBottom: 8
}} numberOfLines={3}>Apple</Text>
</Item>
<Item style={{
flex: 1,
borderBottomWidth: 0,
justifyContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'center'
}}>
<TouchableHighlight onPress={ () => this.setState({item1Check : !this.state.item1Check})}>
<Image source={this.state.item1Check ? require('../../assets/images/small_check_circle.png') : require('../../assets/images/small_x_circle.png')} />
</TouchableHighlight>
</Item>
</Item>
<Item style={[styles.squareLayout]}>
<CachedImage source={{uri:'../apple.jpg'}}
style={{
width: 100,
height: 100,
borderRadius: 10,
overflow: 'hidden',
borderWidth: 1,
borderColor: AppColors.grey2
}}/>
<Item style={{
flex: 3,
flexDirection: 'column',
borderBottomWidth: 0,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center'
}}>
<Text style={{
flex: 1, fontFamily: AppStyles.fontFamily, fontSize: 10, color: AppColors.grey1,
justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start',
paddingLeft: 8, paddingTop: 8
}} numberOfLines={1}> 20 Carton/Cartons Navel Orange</Text>
<Text style={{
flex: 4, fontFamily: AppStyles.fontFamilyMedium, fontSize: 16, color: AppColors.black,
justifyContent: 'center', alignItems: 'center', alignSelf: 'flex-start',
paddingLeft: 8, paddingBottom: 8
}} numberOfLines={3}>Oranges</Text>
</Item>
<Item style={{
flex: 1,
borderBottomWidth: 0,
justifyContent: 'flex-start',
alignItems: 'flex-start',
alignSelf: 'center'
}}>
<TouchableHighlight onPress={ () => this.setState({item2Check : !this.state.item2Check})}>
<Image source={this.state.item2Check ? require('../../assets/images/small_x_circle.png') : require('../../assets/images/small_x_circle.png')} />
</TouchableHighlight>
</Item>
</Item>
</View>
);
}
}
this is my main code where I am trying to update my Images:
<TouchableHighlight onPress={ () => this.setState({item1Check : !this.state.item1Check})}>
<Image source={this.state.item1Check ? require('../../assets/images/small_check_circle.png') : require('../../assets/images/small_x_circle.png')} />
</TouchableHighlight>

Answer 1

How about adding ref to the image?
import resolveAssetSource from 'resolveAssetSource';
...
<TouchableHighlight onPress={ () => this.setState({item1Check : !this.state.item1Check})}>
<Image ref="list1img" source={this.state.item1Check ? require('../../assets/images/small_check_circle.png') : require('../../assets/images/small_x_circle.png')} />
</TouchableHighlight>
And detect changes to component and then change the image by the ref.
componentDidUpdate(){
this.handleCheck();
}
handleCheck(){
var img = this.state.item1Check ? require('pathforimage') : require('anotherpathforimage');
this.refs['list1img'].setNativeProps({
src: [resolveAssetSource(img)] //use source for ios instead of src
})
}