CODEWITHSUNDEEP
react-native
rablentain
rablentain

Reputation: 6725

How do I call navigator from outside the Navigator?

I have a tab bar in my application that I don't want the navigation transition to affect each time a new route is rendered. Therefore I want to place the tab bar outside the Navigator, but how do I trigger the navigation actions in that case? I cannot access the navigator object that is passed to the renderScene function from outside the Navigator.

Here is what is returned in app.js:

            <View>
                <Navigator
                    ref="navigator"
                    initialRoute={{name: "start"}}
                    renderScene={this.renderScene.bind(this)}
                    configureScene={this.configureScene.bind(this)}
                />
                <TabBar navigator={???} style={styles.nav} />
            </View>

Upvotes: 2

Views: 440

Answers (3)

Raz
Raz

Reputation: 311

Here's another version that worked for me. It is hackish and will probably break in the future but might help if you're in a hurry ;)

<View>
  <Navigation
    ref={(r) => { this.navigation = r }}
  />

  <OtherScreen
    navigation={(this.navigation || {})._navigation}
    {...this.props}
  />
</View>

Upvotes: 1

Abdellah Stands with Gaza
Abdellah Stands with Gaza

Reputation: 5168

I don't think this is the best way to do what you want. But to answer your question:

            <View>
                <Navigator
                    ref="navigator"
                    initialRoute={{name: "start"}}
                    renderScene={this.renderScene.bind(this)}
                    configureScene={this.configureScene.bind(this)}
                />
                <TabBar getNavigator={()=>this.refs.navigator} style={styles.nav} />
            </View>

And then you could call getNavigator() from your TabBar

Upvotes: 1

rablentain
rablentain

Reputation: 6725

Ok, I think I solved this. The problem seems to be that the refs is not available at the first render of the component. I solved this by:

<Navigator
    ref={(r) => { this.navigatorRef = r; }}
    initialRoute={{name: "start"}}
    renderScene={this.renderScene.bind(this)}
    configureScene={this.configureScene.bind(this)}
/>
{this.state ? <TabBar navigator={this.state.navigatorRef} style={styles.nav} /> : null }

and added the this:

componentDidMount() {
    this.setState({navigatorRef: this.navigatorRef});
}

just to make the component render a second time with the TabBar.

Upvotes: 3

Related Questions