Using Touchable highlight in a ListView datasource in react native

Question

I am using a ListView with data source which gets its data source from a rest call to a server.

  renderRow(rowData){
    var imageURL = rowData.banner;

    return (
      <View>
        <Text >{rowData.name}</Text>
        <Image
          style={{width: 80, height: 80}}
          source={{uri: imageURL, width: 400, height: 400}}
        />
      </View>
    );
  }

  render() {
    return (
      <View>
            <ListView
            enableEmptySections 
            dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} 
            style={styles.listview}/>

      </View>
)}

Now, I want to add a button press effect to the View rendered in the renderRow function for the data in datasource. And I have changed my code to this.

     renderRow(rowData){
        var imageURL = rowData.banner;

        return (
        <TouchableHighlight style={ this.state.pressStatus ? styles.buttonPress : styles.button }
                            onPress={this._changeStyleAndNavigate.bind(this)}>
          <View>
            <Text >{rowData.name}</Text>
            <Image
              style={{width: 80, height: 80}}
              source={{uri: imageURL, width: 400, height: 400}}
            />
          </View>
 </TouchableHighlight>
        );
      }

  _changeStyleAndNavigate() {
    this.setState({ pressStatus: true });

  }

I have 2 different styles for this TouchableHighlight View with different colours. if the user touches the TouchableHighlight View I change the colour and this way giving a button press feel.

But now my problem is if there is more than one row in the ListView then pressing one row would change the colour of all the rows(TouchableHighlight Views).

So, Is there a way I could give an ID to each row and change the colour based on the ID?

Mila Mila · Accepted Answer · 2017-01-16T17:57:57

Please refer to the RN documentation to solve your issue way more easier: https://facebook.github.io/react-native/docs/touchablehighlight.html

There is a component property called underlayColor. Just give it a value (the colour you want to see when the item is pressed). So your component should look like this:

<TouchableHighlight style={styles.button} underlayColor={'#ff0000'}>

Using Touchable highlight in a ListView datasource in react native

1 Answers