update react-native listview

Question

I have used some examples to get me to this point but I cannot get the view to show the list changes. I have a list of contacts, on select/deSelect I want to change the color of the background. The only what it updates is after making a selection, I make a code change and save it with Hot reloading enabled, it then shows up as it should. I tried doing a forceUpdate() and that did not work either.

    constructor(props) {
    super(props);
    this.selectedContactArray = [];
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });

    this.state = {
      dataSource: ds.cloneWithRows(this.props.contactListState),
      db: this.props.contactListState,
      nameFilter: '',
      selectedContacts: [],
      visibleWidth: Dimensions.get('window').width,
      visibleHeight: Dimensions.get('window').height
    };
  }

select function

      _handleSelectContact(rowData) {
    this.add = true;

    var result = this.state.db.slice();
    _.each(this.selectedContactArray, (item) => {
      if (item === rowData)
        this.add = false;
    });

    if (this.add) {
      this.selectedContactArray.push(rowData);
      result = _.filter(this.state.db, (item) => {
        if (item == rowData)
          item.isSelected = true;
        return item;
      });
    }
    else {
      this.selectedContactArray = _.filter(this.state.selectedContacts, (item) => {
        return item != rowData;
      });
      result = _.filter(this.state.db, (item) => {
        if (item == rowData)
          item.isSelected = false;
        return item;
      });
    }

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(result),
      db: result,
      selectedContacts: this.selectedContactArray
    });
    this.forceUpdate();
  }

_renderRow()

     _renderRow(rowData) {
    return (
      <TouchableOpacity
        onPress={() => this._handleSelectContact(rowData) }
        style={{
          flexDirection: 'row',
          backgroundColor: (rowData.isSelected) ? 'rgba(255,255,255,0.6)' : 'transparent'
        }}>
        <Image source={images.placeholder} style={styles.contactImage} />
        <View style={styles.contactContainer}>
          <Text numberOfLines={2} style={styles.contactName}>
            {rowData.familyName} {rowData.givenName}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

Answer 1

I wrote a simple exemple for selected/deselect item in ListView and here is rnplay link you can test it . I hope this can help

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  Dimensions,
  ListView,
  TouchableOpacity
} = React;
var {
  width,
  height
} = Dimensions.get('window');

var SelectDeselectExample = React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var rows = this._genRows()
    return {
      dataSource: ds.cloneWithRows(rows),
      selected:[]
    };
  },
  _genRows : function(){
     var arr = []
     for(var i = 0;i< 10; i++){ 
        arr.push({title: 'item '+i})
     }
     return arr
 },
 _renderRow:function(row){
   var selected = this.state.selected.indexOf(row) > -1
   return(
     <TouchableOpacity onPress = {(ev)=>{this.onRowPressed(row)}}>
        <View style={{height:50,backgroundColor: selected ? 'red':'white',justifyContent:'center'}}>
          <Text>{row.title}</Text>
        </View>
     </TouchableOpacity>
 )
 },
 onRowPressed:function(row){
    var selected = this.state.selected.slice()
    var rowIndex = selected.indexOf(row)

    if(rowIndex > -1){
      //Remove Item from selected Array
      selected.splice(rowIndex,1)
    }else{
      //Add Item to selected array
      selected.push(row)
    }
   this.setState({selected:selected})
 },
 render: function() {
    return (
      <View style={styles.container}>
        <ListView  style={{flex:1,marginTop:20}}
                   dataSource={this.state.dataSource}
                   renderRow={this._renderRow}>
        </ListView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop:20
  }
});



AppRegistry.registerComponent('SampleApp', () => SelectDeselectExample);