React-native-tab-view: Jump to tab programmatically

[yogevlahyani]

Hi! I am trying to make a tab change when onPress an inside route component button and I can't manage to pass props and change the state of the index.

HomeScreen (Child) Component:
<Button title="Add new" onPress={() => { pass index number to Parent Component Where TabViewAnimated is }>

Main (Parent) Component:
_renderScene = SceneMap({ '1': AddNew, // Trying to get to here '2': HomeScreen, });

I've been searching all over google and can't manage to pass props and change the state ..

[ixje]

have a call back in your Main Component and pass that to your HomeScreen via props

In Main

_updateRoute(newIdx) {
this.setState({index: newIdx})
}

pass the handler together in the TabViewAnimated:

      <TabViewAnimated
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onRequestChangeTab={this._handleChangeTab}
        changeRoute={this._updateRoute.bind(this)}
      />

In HomeScreen
<Button title="Add new" onPress={this.props.changeRoute(<route number>)}>

[yogevlahyani]

@ixje Thank you!!

[zhukovka]

This doesn't work for the version 0.0.69. I can't find a way to do it.

[ixje]

@zhukovka probably because of the breaking changes. Try renaming the onRequestChangeTab prop to onIndexChange.

[befirst]

SceneMap
Helper function which takes an object with the mapping of route.key to React components and returns a function to use with renderScene prop.

renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
Each scene receives the following props:

route: the current route rendered by the component
jumpTo: method to jump to other tabs, takes a route.key as it's argument

so just make a prop "jumpTo(key)" in your route components and use it inside of them