railbird-gql/navigation/app-navigator.tsx

47 lines
1.3 KiB
TypeScript
Raw Normal View History

import {
DarkTheme,
DefaultTheme,
2024-02-03 20:30:00 -07:00
NavigationContainer,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
2024-02-03 20:30:00 -07:00
import { useColorScheme } from "react-native";
import Login from "../screens/login";
2024-02-03 20:30:00 -07:00
import Tabs from "./tab-navigator";
const Stack = createNativeStackNavigator();
const ScreensStack = () => (
<Stack.Navigator>
<Stack.Screen
name="Tabs"
component={Tabs}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Login"
component={Login}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
/**
* Functional component for app navigation. Configures a navigation container with a stack navigator.
* Dynamically selects between dark and light themes based on the device's color scheme.
* The stack navigator is configured to manage various app screens.
*
* @returns {React.ComponentType} A NavigationContainer wrapping a Stack.Navigator for app screens.
*/
export default function AppNavigator(): React.JSX.Element {
// useColorScheme get's the theme from device settings
const scheme = useColorScheme();
return (
<NavigationContainer theme={scheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="App" component={ScreensStack} />
</Stack.Navigator>
</NavigationContainer>
);
}