How to change icons onPress in React Native - reactjs

Question

Im new to React Native so excuse the question if this is simple.
Im trying to toggle icons in a ListView. I'm logging out the correct response but Im unable to see the screen refresh onPress with that icon using "this.state". How should I go about this? Your help is much appreciated.
Here's a piece of code i'm working with.
getInitialState: function() {
return {liked:false};
},
pressedLike: function(){
this.setState({liked: !this.state.liked})
},
renderRow: function (data) {
return (
<View>
<TouchableHighlight
onPress={()=>{this.pressedLike}}>
<View>
{this.state.liked ? <Icon name="ios-heart" size={25} color="red" /> : <Icon name="ios-heart-outline" size={25} color="#555" />}
</View>
</TouchableHighlight>
</View>
);
},
render: function() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh= {this.onRefresh}/>
}
/>
);
}

Answer 1

It's pretty simple, here is an example of how to change an Awesome icon on press... using the node_module react-native-vector-icon available on GitHub.
First in getInitialState, declare a variable with the icon you want and a check var to know which logo to display:
return {logo: "star-o", check: false}
Then on the concerned button / clickable zone , add this method:
onPress={() => this.stateChange()}
And declare a stateChange method and add this:
this.state.check === false ? this.setState({logo:'star', check:true}) : this.setState({logo:'star-o', check:false})
This looks for the check var and changes the logo depending on its value. It is ternary syntax.

Answer 2

There's really a lot that needs to happen here. You're going to probably need some sort of data structure that has a liked boolean in it, something like this (just an example):
data = [{name: 'Dog', liked: false}, {name: 'Turtle', liked: false}, {name: 'Cat', liked: false}]
Then in your likeItem method, you will need to get the index of the item you are looping over and update the liked boolean, and reset the state of the dataSource:
likeItem (index) {
const { data } = this.state
data[index].liked = !data[index].liked
this.setState({ dataSource: ds.cloneWithRows(data), data })
}
And you can show the icon based on the liked value:
{rowData.liked && <LikedIcon />}
{!rowData.liked && <NotLikedIcon />}
I wipped up a quick example of the functionality you may need here.
https://rnplay.org/apps/H2hsSg