Entire Navigation Tree

Bogata69
 avatar
unknown
typescript
a year ago
2.9 kB
4
Indexable
const HomeStack = createBottomTabNavigator<HomeParams>();
const RootStack = createStackNavigator();
const SetupStack = createStackNavigator<AccountSetupParams>();
const EditorStack = createNativeStackNavigator<EditorParams>();

const screenOptions: StackNavigationOptions = {
  headerShown: false,
  gestureEnabled: true,
};

type TabbarProps = {
  [P in keyof BottomTabBarProps]: BottomTabBarProps[P];
};

function SetupScreenStackNavigator() {
  return (
    <SetupStack.Navigator
      initialRouteName={NavScreenNames.OnBoardScreen}
      screenOptions={screenOptions}>
      <SetupStack.Screen
        component={OnBoardScreen}
        name={NavScreenNames.OnBoardScreen}
      />
      <SetupStack.Screen
        name={NavScreenNames.AuthScreen}
        component={AuthScreen}
      />
      <SetupStack.Screen
        name={NavScreenNames.AccountSetupScreen}
        component={AccountSetupScreen}
      />
    </SetupStack.Navigator>
  );
}

function EditorStackNavigator() {
  return (
    <EditorStack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName={NavScreenNames.FileSelectScreen}>
      <EditorStack.Screen
        options={{}}
        component={FileSelectScreen}
        name={NavScreenNames.FileSelectScreen}
      />
      <EditorStack.Screen
        options={{}}
        component={Editor}
        name={NavScreenNames.EditorScreen}
      />
    </EditorStack.Navigator>
  );
}

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator
      detachInactiveScreens={false}
      tabBar={props => <Tabbar {...props} />}
      screenOptions={{
        headerShown: false,

        freezeOnBlur: true,
      }}
      initialRouteName={NavScreenNames.HomeScreen}>
      <HomeStack.Screen
        component={HomeScreen}
        name={NavScreenNames.HomeScreen}
      />
      <HomeStack.Screen
        component={ProfileScreen}
        name={NavScreenNames.ProfileScreen}
      />
    </HomeStack.Navigator>
  );
}

type Props = {
  initialRoute: string;
};

export default function Navigation({initialRoute}: Props) {
  const me = useLocalProfile();

  return (
    <PaperProvider>
      <RootStack.Navigator
        screenOptions={{...screenOptions}}
        initialRouteName={initialRoute}>
        {me.user?.user_id ? (
          <RootStack.Screen
            options={{detachPreviousScreen: false}}
            name={RootNavNames.HomeStack}
            component={HomeStackNavigator}
          />
        ) : (
          <RootStack.Screen
            name={RootNavNames.SetupStack}
            component={SetupScreenStackNavigator}
          />
        )}
        <RootStack.Screen
          options={{...screenOptions, detachPreviousScreen: false}}
          name={RootNavNames.EditorStack}
          component={EditorStackNavigator}
        />
      </RootStack.Navigator>
    </PaperProvider>
  );
}
Editor is loading...
Leave a Comment