Can I do auth flow like below?

[roycehe]

screens/index.tsx

// NAVIO
export const navio = Navio.build({
  screens: {
    Main,
    Settings,
    Example,
    Login,
    Register,
    Playground: {
      component: Playground,
      options: () => ({
        title: 'Playground',
      }),
    },
  },
  stacks: {
    MainStack: ['Main', 'Example'],
    ExampleStack: ['Example'],
    LoginStack: ['Login', 'Register'],
  },
  tabs: {
    MainTab: {
      stack: 'MainStack',
      options: {
        title: 'Home',
        tabBarIcon: getTabBarIcon('MainTab'),
      },
    },
    PlaygroundTab: {
      stack: ['Playground'],
      options: () => ({
        title: 'Playground',
        tabBarIcon: getTabBarIcon('PlaygroundTab'),
      }),
    },
    SettingsTab: {
      stack: ['Settings'],
      options: () => ({
        title: 'Settings',
        tabBarIcon: getTabBarIcon('SettingsTab'),
      }),
    },
  },
  modals: {
    ExampleModal: 'ExampleStack',
  },
  root: 'Tabs',
  hooks: [useAppearance],
  options: {
    stack: screenDefaultOptions,
    tab: tabDefaultOptions,
  },
});

export const getNavio = () => navio;
export const AppRoot = navio.Root;

App.tsx

//auth network request
function delay(){
  return new Promise((resolve)=>{
    setTimeout(() => {
      resolve({})
    }, 1000);
  })
}
export default (): JSX.Element => {
  useAppearance();
  const [ready, setReady] = useState(false);
  const [isLogin, setIsLogin] = useState(false);

  const start = useCallback(async () => {
    await SplashScreen.preventAutoHideAsync();

    await hydrateStores();
    configureDesignSystem();
    await initServices();
    await delay()
    setIsLogin(false)

    setReady(true);

    await delay()
    await SplashScreen.hideAsync();

  }, []);

  useEffect(() => {
    start();
  }, [start]);

  if (!ready) return <></>;
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <SSProvider>
        <StatusBar style={getStatusBarStyle()} backgroundColor={getStatusBarBGColor()} />
        <AppRoot initialRouteName={isLogin ? 'Tabs':'LoginStack'} navigationContainerProps={{theme: getNavigationTheme()}} />
      </SSProvider>
    </GestureHandlerRootView>
  );
};

[kanzitelli]

Hey @roycehe! Yes, something like that should work. But you'll have to manually do navio.setRoot('Tabs') from LoginScreen, once the login is successful. Navio's AppRoot's initialRouteName prop is an equivalent to one from react-navigation, so it's applied only once.