CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6
ArthurBK
ArthurBK

Reputation: 49

How to use callback ref using ListView - ReactNative

I am having hard times trying to access ref from SectionHeader. I understand that I need to use ref as callback function instead of a string but I don't understand how to implement it.

render(){
    return (
      <ListView
        ref="mylist"
        dataSource={this.state.dataSource}
        renderRow={this.renderCampaign}
        style={styles.listView}
        renderSectionHeader={this.header.bind(this)}
        onChangeVisibleRows={this.updateFocus.bind(this)}/>
  );
 }
}

header(data){
    return(
     <MapView
      ref="mymap"
      style={styles.map}
      region={this.state.region}
      onRegionChange={this.onRegionChange.bind(this)}
      showsUserLocation={true}
     >
{this.state.markers.map(marker => (
   <MapView.Marker
     coordinate={marker.coordinate}
     title={marker.name}
     description={marker.reward_type}
   />
 ))}
   </MapView>
 );
}

Can someone help?

Upvotes: 1

Views: 300

Answers (1)

Ryan W
Ryan W

Reputation: 6173

The ref callback attribute of your listview would look like this

 <ListView
        ref={(comp) => this._mylist = comp}
        dataSource={this.state.dataSource}
        renderRow={this.renderCampaign}
        style={styles.listView}
        renderSectionHeader={this.header.bind(this)}
        onChangeVisibleRows={this.updateFocus.bind(this)}/>

Then you can access this._mylist without any problem.

Upvotes: 2

Related Questions