CODEWITHSUNDEEP
react-nativereact-navigation
Shubham Bisht
Shubham Bisht

Reputation: 687

How to navigate from custom navigator to createBottomTabNavigator in React Native?

I've a custom navigator because I wanted to go back to the previous screen using a back swipe gesture. Below is the code of the main file from where the navigators are called.

const MainSwipeStack = () => {
    return(
        <Navigator>
            <Route name="LoggedOutHome" component={LoggedOutHome} />
            <Route name="SignUp" component={SignUp} />
            <Route name="SignupUsername" component={SignupUsername} />
            <Route name="Login" component={Login} /> 
        </Navigator> 
    );
}

export default createSwitchNavigator({
    SwipeStack: {screen: MainSwipeStack},
    TabHolder: {screen: TabHolder}
}, {
    initialRouteName: 'SwipeStack',
    headerMode: 'none',
});

And below is the link to the Navigator.js code. (I didn't add the code here because it's a long code.)

https://gist.github.com/shubham6996/a4197d2d0b664d4aabe01091cac6c91e

And the TabHolder takes me to the screen which has createBottomTabNavigator.

So, now I'm not able to navigate from the Login screen to TabHolder stack.

How can I navigate from Login which is in a custom navigator to TabHolder stack?

Upvotes: 2

Views: 917

Answers (1)

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

seems navigation props is not there,

try this 

export default withNavigation(Login);

in login and yes do import also 

import {withNavigation} from 'react-navigation'

Components which are not directly used in navigators do not have navigation prop by default.

So you need to either pass it as normal props like this,

<Login navigation={this.props.navigation}

but in stack we dont have navigation prop so we can not pass like this (or idk if we have prop there....)

so alternate option is withNavigation and withNaviagtionFocus as shown above

find details about withNavigation

Upvotes: 1

Related Questions