react native scrollable tab view onchange

Question

Can anyone help me how to use onChange props in react native scrollable tab view? Any sample code? Basically I want to fetch data, when tab is changed.

<View style={styles.container}>
       <ScrollView>
        <ScrollableTabView>
        <OverViewPage tabLabel = "Overview" contentProps = { this.state = {data :  this.state.data , addressDetails :  this.state.addressDetails }} />
         <OverViewPage1 tabLabel = "OverView1"/>
         <OverViewPage2 tabLabel = "OverView2" />
        </ScrollableTabView>
        </ScrollView>
        </View>

When I go to OverView1 scene I want to fetch data from api and rendered the information returned. Basically I want to catch an event, when tab is changed. I found there is an onChange props but couldnt figure it out how to use. Appreciate the help!! Thank you!!

score 1 · Answer 1 · answered Aug 10 '16 at 18:47

ScrollableTabView don't pass state of tab state to children tab screens. Instead, in onChangeTab prop of ScrollTabView you can set state in your parent React class and pass new state to children tab screens about active tab as properties. Something like following:

<ScrollableTabView onChangeTab={(event)=>{this.setStateForTabChange(event.i)}}>
  <Scene1 isActive={this.state.isSceneOneVisible} />
  <Scene2 isActive={this.state.isSceneTwoVisible} />
</ScrollableTabView>

You can define setStateForTabChange which will eventually will set state values for scene active states based on index value sent by onChangeTab.

react native scrollable tab view onchange

1 Answers1