AppNavigator.tsx

/**
 * The app navigator (formerly "AppNavigator" and "MainNavigator") is used for the primary
 * navigation flows of your app.
 * Generally speaking, it will contain an auth flow (registration, login, forgot password)
 * and a "main" flow which the user will use once logged in.
 */
import { DarkTheme, DefaultTheme, NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack"
import { observer } from "mobx-react-lite"
import React from "react"
import { useColorScheme } from "react-native"
import * as Screens from "~/screens"
import { navigationRef } from "./navigationUtilities"
import { colors } from "~/theme"

/**
 * This type allows TypeScript to know what routes are defined in this navigator
 * as well as what properties (if any) they might take when navigating to them.
 *
 * If no params are allowed, pass through `undefined`. Generally speaking, we
 * recommend using your MobX-State-Tree store(s) to keep application state
 * rather than passing state through navigation params.
 *
 * For more information, see this documentation:
 *   https://reactnavigation.org/docs/params/
 *   https://reactnavigation.org/docs/typescript#type-checking-the-navigator
 *   https://reactnavigation.org/docs/typescript/#organizing-types
 */
export type AppStackParamList = {
  Welcome: undefined
  // 🔥 Your screens go here
  Home: Record<string, never>
  FaceDetection: Record<string, never>
  ImageLabeling: Record<string, never>
  ObjectDetection: Record<string, never>
  DocumentScanner: Record<string, never>
  TextRecognition: Record<string, never>
  BarcodeScanning: Record<string, never>
  // IGNITE_GENERATOR_ANCHOR_APP_STACK_PARAM_LIST
}

export type AppStackScreenProps<T extends keyof AppStackParamList> = NativeStackScreenProps<
  AppStackParamList,
  T
>

export type AppStackNavigationProp<T extends keyof AppStackParamList> =
  AppStackScreenProps<T>["navigation"]

// Documentation: https://reactnavigation.org/docs/stack-navigator/
const Stack = createNativeStackNavigator<AppStackParamList>()

const AppStack = observer(function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false, navigationBarColor: colors.background }}
      initialRouteName={"Home"}
    >
      <Stack.Screen name="Welcome" component={Screens.WelcomeScreen} />
      {/** 🔥 Your screens go here */}
      <Stack.Screen name="Home" component={Screens.HomeScreen} />
      <Stack.Screen name="FaceDetection" component={Screens.FaceDetectionScreen} />
      <Stack.Screen name="ImageLabeling" component={Screens.ImageLabelingScreen} />
      <Stack.Screen name="ObjectDetection" component={Screens.ObjectDetectionScreen} />
      <Stack.Screen name="DocumentScanner" component={Screens.DocumentScannerScreen} />
      <Stack.Screen name="TextRecognition" component={Screens.TextRecognitionScreen} />
      <Stack.Screen name="BarcodeScanning" component={Screens.BarcodeScanningScreen} />
      {/* IGNITE_GENERATOR_ANCHOR_APP_STACK_SCREENS */}
    </Stack.Navigator>
  )
})

export interface NavigationProps
  extends Partial<React.ComponentProps<typeof NavigationContainer>> {}

export const AppNavigator = observer(function AppNavigator(props: NavigationProps) {
  const colorScheme = useColorScheme()

  return (
    <NavigationContainer
      ref={navigationRef}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
      {...props}
    >
      <AppStack />
    </NavigationContainer>
  )
})