Navigate between different batteries in React Native with React-navigation

Question

Objective: Navigate the screen Loginscreen screen Mainscreen

Route code in Routes.js:

const AuthenticationNavigator  = createStackNavigator({
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        title: 'Login',
        headerShown: false, //desabilita a barra do topo
      },
    },
    Register: {
      screen: RegisterScreen,
      navigationOptions: {
        title: 'Cadastro',
      },
    },
  }, {
    initialRouteName: 'Login',
    defaultNavigationOptions: {
      headerTitleAlign: 'center',
      headerTintColor: '#FFF',
      headerStyle: {
        backgroundColor: '#121212',
      },
    }
})

const MainNavigator = createStackNavigator({
  Main: {
    screen: MainScreen,
    navigationOptions: {
      title: 'Main',
      headerShown: false,
    },
  },
}, {
  initialRouteName: 'Main',
  defaultNavigationOptions: {
    headerTitleAlign: 'center',
    headerTintColor: '#FFF',
    headerStyle: {
      backgroundColor: '#121212',
    },
  }
})

const AppNavigator = createSwitchNavigator({
  /*
   * Rather than being rendered by a screen component, the
   * AuthenticationNavigator is a screen component
   */
  Auth: AuthenticationNavigator,
  Home: MainNavigator,
}, {
  initialRouteName: 'Auth'}
);

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer

Like I’m trying to use in the file App.js

render() {
    if (!this.state.isAuthenticationReady) {
      return (
        {}
      );
    } else {
      return (
        <>
          <StatusBar barStyle="light-content" backgroundColor="#121212" />
          {this.state.isAuthenticated ? <AppContainer /> : <AppContainer />}
        </>
      );
    }
  }

How I use Appcontainer in my main file App.js? And how do I navigate between the screens of the different Stacks?

Answer 1

createAppContainer you will use only once. Inside your Appcontainer, you can have inside a Stacknavigator, and inside it, each element can be a component (as in your example), or another Stack.

Another example would be for you to have within your Appcontainer a Tabnavigator, and each item to be a Stack.

So, in order to work between screens, your Appcontainer must have a Stack with the Login, Register and Main components. He’d look like this.

export const Intro = createAppContainer(
  createStackNavigator({
    Login: {
      screen: Login,
      navigationOptions: {
        title: 'Login',
        headerShown: false, //desabilita a barra do topo
      },
    },
    Register: {
      screen: Register,
      navigationOptions: {
        title: 'Cadastro',
      },
    },
    Main: {
      screen: Main,
      navigationOptions: {
        title: 'Main',
        headerShown: false,
      },
    },
  },{
    initialRouteName: 'Login',
    defaultNavigationOptions: {
      headerTitleAlign: 'center',
      headerTintColor: '#FFF',
      headerStyle: {
        backgroundColor: '#121212',
      },
    }
  })
);

Inside Login, to navigate to Main, you can do the following

this.props.navigation.navigate("Main");

Each component of your route receives a props called "navigation", which will allow navigation between screens. If you create a button on your login page and add this code, it should work. This props only applies to the route components, the components below by default do not receive this props.

Here is more information:

https://reactnavigation.org/docs/en/common-mistakes.html https://reactnavigation.org/docs/en/navigation-prop.html https://reactnavigation.org/docs/en/connecting-navigation-prop.html