Like functionality like Facebook react native

Question

I am using a list of image.Below every image,there is a like button. When i click on the Like button, likes should be increases which is working fine. But it should work on the image I click. Currently it is increasing like count of all the images.I am new to react native.Any help would be appreciated. Here, this is my code

export default class Art extends Component {

  constructor(props) {
    super(props)
    this.state = {
        value: null,
        liked:false
    }
  }
_increaseValue(){
console.log(this.state.liked)
    if (this.state.liked==false)
        {
            this.setState({liked: !this.state.liked})
            newvalue =this.state.value +1;
            this.setState({value:newvalue})
        }
      else 
        {    
        this.setState({liked: !this.state.liked})
        newvalue =this.state.value -1;
        this.setState({value:newvalue}       
     }                       
}
  render() {
    const datas = [
      {
        img: images[0]
      },
      {
        img: images[1]
      },
      {
        img: images[2]
      },
      {
        img: images[3]
      },
    ];
    const { navigate } = this.props.navigation;

    // eslint-disable-line
    return (
      <Content padder style={{ marginTop: 0, backgroundColor: '#3b5998' }}>
        <List
          style={{ marginLeft: -19, marginRight: -19 }}
          dataArray={datas}
          renderRow={data =>
            <ListItem  >
              <Card

                wrapperStyle={{ marginLeft: -10, marginTop: -10, marginRight: -10, }} containerStyle={{ marginLeft: 2, marginTop: -5, }}>
                <TouchableOpacity activeOpacity={.5} onPress={() => navigate('ImageDisplay',{item:data})}>                  
                  <Image source={{ uri: data.img }} style={[styles.imageContainer, styles.image]}/>
                    </TouchableOpacity>
                     <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginTop: 20 }}>
                     <View style={{flexDirection:'row'}}>
                     <TouchableOpacity activeOpacity={.5} onPress={() => {this._increaseValue()}}>
                       <View>
                       {this.state.liked ? <Icon active name="favorite" style={styles.iconCountContainer} color='red' size={14}/>
                       : <Icon name="favorite" style={styles.iconCountContainer} size={14}/>}
                </View></TouchableOpacity>
                <Text style={{color:'#000000',fontSize:15, marginLeft:12, marginTop:5}}>{this.state.value} Likes </Text>
                   </View>

                  <View style={styles.iconCountContainer}>
                    <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
                  </View>


                </View>

              </Card>
            </ListItem>
          }
        />
      </Content>
    );
  }
}

Answer 1

You need to convert your Cards into separate components or store the like counts separately in state. You can approach this problem several ways. I'll give you an example of how you can achieve this behavior and you can implement it the way you like.

Example

export default class CutomListItem extends React.Component {
  constructor(props) {
    this.state = {
      likes: 0
    };
  }
  _increaseValue = () => {
    this.setState((prevState) => {
      return {
        likes: prevState.likes++
      };
    });
  }
  render() {
    const { data, navigate, share } = this.props; // send data with props
    <ListItem  >
      <Card
        wrapperStyle={{ marginLeft: -10, marginTop: -10, marginRight: -10, }} containerStyle={{ marginLeft: 2, marginTop: -5, }}>
        <TouchableOpacity activeOpacity={.5} onPress={() => navigate('ImageDisplay',{item:data})}>                  
          <Image source={{ uri: data.img }} style={[styles.imageContainer, styles.image]}/>
        </TouchableOpacity>
        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginTop: 20 }}>
          <View style={{flexDirection:'row'}}>
            <TouchableOpacity activeOpacity={.5} onPress={() => {this._increaseValue()}}>
              <View>
                {this.state.liked ? <Icon active name="favorite" style={styles.iconCountContainer} color='red' size={14}/>
                : <Icon name="favorite" style={styles.iconCountContainer} size={14}/>}
              </View></TouchableOpacity>
              <Text style={{color:'#000000',fontSize:15, marginLeft:12, marginTop:5}}>{this.state.likes} Likes </Text>
            </View>

            <View style={styles.iconCountContainer}>
              <Icon active name="share" size={14} style={styles.share} onPress={() => Share.open(shareOptions).catch((err) => { err && console.log(err); })} />
            </View>
          </View>          
      </Card>
    </ListItem>
  }
}

---

return (
 <Content padder style={{ marginTop: 0, backgroundColor: '#3b5998' }}>
   <List
     style={{ marginLeft: -19, marginRight: -19 }}
     dataArray={datas}
     renderRow={data => (<CutomListItem data={data} navigate={navigate} share={Share} />}
   />
 </Content>
 );
}