ListView – Change List Background in ReactNative List Backstence

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  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 (
 
 
 
 
 
 {formTitle}
 
 
 {rowData.frequency}
 
 
 
 
 
 {rowData.status}< br /> 
 
 
 

 
 
 {'Schedule Start Date:'+rowData.startDate}
 
 
 {' Schedule End Date:'+rowData.endDate}
 
 
 
 
 );
 }


_renderList() {
 if(this.state.listData.length == 0){
 return (
 
 
 No form available for this site. Please select a site.
 
 
 );
 }
 else{
 return (
  dataSource={this.state.dataSource}
 renderSeparator={this._renderSeparator}
 renderRow={this._renderRow .bind(this)}
 enableEmptySections={true}
 />
 );
 }
 }


render (){
 return(
 
 {this._renderList()}
 
 );
}

I am new to React-Native. I want to use ListView to select an item. How to change the background of the list view item to show the selection. I think so. Please help .Let me know what I am doing wrong here. It is the first 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  var cloneData = dataClone[i ];
 if(i == rowID){
 cloneData.isSelect = !cloneData.isSelect;
 selectedFormIndex = cloneData.isSelect?i:(-1);
 }< br /> 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 (
 
 
 
 < View style={styles.listItemTextContainer}>
 
 {formTitle}
 
 
 {rowData.frequency}
 
 
 
 
 
 {rowData.status}
 
 
 
 

 
 
 {'Schedule Start Date:'+rowData.startDate}
 
 
 {'Schedule End Date:'+rowData.endDate}
 
 
 
 
 );
 }


_renderList() {
 if(this.state.listData.length == 0){
 return (
 
 
 No form available for this site. Please select a site.
 
 
 );
 }
 else {
 return (
  dataSource={this.state.dataSource}
 renderSeparator={this._renderSeparator}
 renderRow={this._renderRow.bind( this)}
 enableEmptySections={true}
 />
 );
 }
 }


render(){ 
 return(
 
 {this._renderList()}
 
 );
} 

You can use the underlayColor mentioned in react-native docs

underlayColor?: color

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

So in your rendering method, you can write as

 
 ... 

Hope this helps. .