how to switch rootscreen

[roycehe]

1 check if has token or not before screens show 2 if token use main tab, not use loginscreen 3 switch to main tab after login

[kanzitelli]

Hey @roycehe! Let's take this - https://github.com/kanzitelli/rnn-starter/blob/master/App.tsx - as an example. Say, we have stores.auth where you store your auth state. You can use it in App function to determine which root you want to use first. Then from Login screen, you will need to setRoot manually to show your tabs.

import {LogBox} from 'react-native';
import {Root, Screen, BottomTabs} from 'rnn-screens';

import {screens} from './src/screens';
import {Services} from './src/services';
import {Stores, stores} from './src/stores';
import {DesignSystem} from './src/utils/designSystem';
import SplashScreen from 'react-native-splash-screen';

LogBox.ignoreLogs(['Require', 'RCTBridge']);

export const beforeStart = async (): PVoid => {
  // 1. hydrate stores
  await Stores.hydrate();

  // 2. configure design system
  await DesignSystem.configure();

  // 3. init services
  await Services.init();

  // 4. hide splash screen
  SplashScreen.hide();
};

export const App = () =>
  Root(
    // we can use `stores` here as it was already inited in beforeStart functions
    stores.auth.isLoggedIn ?
      Screen(screens.get('Login')) : 
      BottomTabs([
        Screen(screens.get('Main')),
        Screen(screens.get('Playground')),
        Screen(screens.get('Settings')),
      ]),
  );

I didn't test this code, but it seems like a working piece.

[DavidKarasek]

This works when you launch the app. However, at least for me, the stores are not updating when state changes and the root stack never updates.