Change List item Background OnSelection in ReactNative

Question

I am a newbie in React-Native. I want to select one item using ListView. How to change listview item background to show selection. I am trying like this.Please Help. Let me know What I am doing wrong here. It is working for first time selection but not again.

getRowSelectionStyle(isSelect){
      if(isSelect){
        return(
          {flex: 1, backgroundColor: '#dedede'}
        )
      }
      else{
        return(
          {flex: 1,backgroundColor: '#ffffff'}
        )
      }
 }

_onPressRow(rowID, rowData) {
      // Resetting all Row value of the list
      var dataClone = this.state.listData;
      for (var i = 0; i < dataClone.length; i++) {
        var cloneData = dataClone[i];
        if(i == rowID){
          cloneData.isSelect = !cloneData.isSelect;
          selectedFormIndex = cloneData.isSelect?i:(-1);
        }
        else{
          cloneData.isSelect = false;
        }
        dataClone[i] = cloneData;
      }

      this.setState({ listData: dataClone });
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(dataClone)
      });
  }

_renderRow(rowData: string, sectionID: number, rowID: number) {
      var formTitle = rowData.row+'('+rowData.formNo+')';
      return (
        <TouchableHighlight onPress={this._onPressRow.bind(this, rowID, rowData)} >
          <View style={this.getRowSelectionStyle(rowData.isSelect)}>
            <View style={styles.listItemContainer}>
                <View style={styles.listItemTextContainer}>
                <Text style={styles.listItemText}>
                    {formTitle}
                </Text>
                <Text style={this.getRowFrequencyStyle(rowData.frequency)}>
                    {rowData.frequency}
                </Text>
                </View>
                <View style={this.getStatusColorStyle(rowData.status)}>
                <TouchableHighlight>
                    <Text style={{color:(rowData.isSelect === false)? '#ffffff':'#222d4a', fontSize: 11}}>
                    {rowData.status}
                    </Text>
                </TouchableHighlight>
                </View>
            </View>

            <View>
                <Text style={styles.listItemDate}>
                    {'Schedule Start Date: '+rowData.startDate}
                </Text>
                <Text style={styles.listItemDate}>
                    {'Schedule End Date:   '+rowData.endDate}
                </Text>
            </View>
          </View>
        </TouchableHighlight>
      );
    }


_renderList() {
      if(this.state.listData.length == 0){
          return (
            <View style={{height: 150, justifyContent:'center', alignItems:'center'}}>
                <Text style={{fontSize: 16, color:"gray", width:250}}>
                  No form available for this site. Please select a site.
                </Text>
            </View>
        );
      }
      else{
        return (
          <ListView
            dataSource={this.state.dataSource}
            renderSeparator={this._renderSeparator}
            renderRow={this._renderRow.bind(this)}
            enableEmptySections={true}
          />
        );
      }
 }


render(){
    return(
        <View style={styles.listContainer}>
                 {this._renderList()}
        </View>
    );
}

Answer 1

You can make use of underlayColor as mentioned in react-native docs

underlayColor?: color

The color of the underlay that will show through when the touch is active.

So in your render method you can write as

<TouchableHighlight onPress={this._onPressRow.bind(this, rowID, rowData)} underlayColor={"green"} >        
        ...         
</TouchableHighlight>

Hope this helps..