Giving a real world exemple, for a common app architecture. about react-navigation.github.io

[brentvatne]

hey @ScreamZ! this is a nice idea. I think a great example app for this would be to rebuild the "realworld" app: https://github.com/gothinkster/realworld

if you want to work on doing this we'd be happy to help as you run into issues along the way. one of the harder parts of getting started on it is that there is currently no existing mobile implementation, so you might have to make some ui design decisions

[vonovak]

I'll try to answer. I have a fairly complex app with multiple users of different roles and deep linking, and it does work with react-navigation. In your ROOT you need to load the app state to find out if a user is already logged in or not. That will influence your initial screen. In the render method of ROOT, you'll do something like

  render() {
    let initialScreenString = 'Anonymous';
    if (hasValidCredentials) {
      initialScreenString = 'Authenticated'
    }
      // construct the right navigation structure conditionally 
      const RootStack = constructInitialStack(initialScreenString);

      return (
              <RootStack
                ref={NavigationService.setContainer}
                onNavigationStateChange={trackScreenChange}
              />
      );
    }
  }

Your navigation structure will be something like

const constructInitialStack = initialRouteName => {
  return MainStack(initialRouteName);
};

const MainStack = initialRouteName =>
  StackNavigator(
    {
      AnonymousStack: { screen: AnonymousStack,   
         navigationOptions: {
             header: null,
         },
      },
      AuthenticatedTab: { screen: AuthenticatedTab },
      ModalScreenOne: { screen: ModalScreenOne },
      ModalScreenOne: { screen: ModalScreenOne },
    },
    {
      ...commonStackStyles,
      initialRouteName,

      // headerMode: 'none', -> this would also affect the modal scenes and we do not want that
      // thus every navigator screen (eg. AnonymousStack) in this navigator must define header: null
      mode: 'modal',
    }
  );

const AnonymousStack = StackNavigator(
  {
    LoginScreen: { screen: LoginScreen },
    OnboardingScreen: { screen: OnboardingScreen },
  }
);

You will probably need to do some resets if you want to have some 'history' in your stack.

[marcpicaud]

Hi,

OP has probably found a solution as I speak, but for future generations : this part of the docs explains the authentication flow very, very well 👍 https://reactnavigation.org/docs/en/auth-flow.html

If you get this right, building nested navigators on top of it will be a child's play.

cheers

[ScreamZ]

@marcpicaud This was not set at the moment I wrote that topic, I think it's one of the consequence of this part of the documentation ;D

Regards