CODEWITHSUNDEEP
listviewreact-nativereact-native-listview
Hussian Shaik
Hussian Shaik

Reputation: 2669

in listView renderRow is not calling after setting state

In list view when click on listview data in renderRow showing a tick mark, i wrote like this

constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state={
     dataSource: ds.cloneWithRows(['row 1', 'row 2'])
    }
  }
 componentDidMount(){
   //After getting data from service i am setting data to the dataSource
 this.setState({ dataSource: ds.cloneWithRows(responseData.data.listTeamBySportId) })
 }

    onTeam(rowData,rowID){
        if(this.state.opacity == rowID){
          this.setState({opacity:null})
        }else{
          this.setState({opacity:rowID})
        }
      }
    render(){
     <ListView
                       style={{flex:1}}
                      dataSource={this.state.dataSource}
                      renderRow={this.renderData.bind(this)}  
                      renderSeparator={(sectionID, rowID) => <View key=       {`${sectionID}-${rowID}`} style={styles.separator} />}
                      automaticallyAdjustContentInsets={false}/>
    }
    renderData(rowData,sectionID:number,rowID:number){
            return (
              <View style={styles.subBody}>
                <TouchableHighlight onPress={this.onTeam.bind(this,rowData,rowID)}>
                  <View  style={{backgroundColor:rowData.colorCode,height:44,flexDirection:'row'}}>
                     <View style={styles.centersubBody}>
                        <Text style={{color:'white',fontWeight:'bold',fontSize:17,fontFamily:'Roboto-Medium',marginLeft:10}}>{rowData.location}</Text> 
                     </View>
                    <View style={styles.rightsubBody}>
                        {this.state.opacity == parseInt(rowID) ? (
                        <Image style={{marginRight:5,marginTop:5, width:25, height:25, marginBottom:10}} source={require('image!selected')}/>
                        ):<View></View>}
                   </View>
                  </View>
                </TouchableHighlight>
              </View>
        );
       }

My react-native version is:0.51.0 Here the problem is when data is upto 10 records my code working after setState in OnTeam function it again render to the renderRow() and show the tick mark, But the problem is when the data is more than 10 records it is not going to the renderRow data, Please give me suggestions that how to solve it any help much appreciated

Upvotes: 1

Views: 1150

Answers (2)

matan
matan

Reputation: 23

If u want the list to be re rendered you have to change the data spirce in the state On the component constructor define this.ds variable which holds the datasource object, and place in the state a variable you will use for the data of the list. For example the inital is

this.state ={
myDs: this.ds.cloneWithRows([])
}

And wheb you want the rerender with new data write

this.setState({myDs: this.ds.clone...(arrNewData)};

Uope you understood the idea

Upvotes: 1

Stephen Kingsley
Stephen Kingsley

Reputation: 559

as my know, the listView component is special. there is a api for listView.dataSource.

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
  dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};

in my opinions, if you do not use ds.cloneWithRows, the data is not change

Upvotes: 0

Related Questions