Entire Navigation Tree
Bogata69unknown
typescript
2 years ago
2.9 kB
7
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