React Native Navigation Builder

This skill helps create and maintain the navigation structure of the Fitness Tracker App, ensuring type safety and consistency across nested navigators.

When to Use This Skill

Use this skill when you need to:

• Add a new screen to the AppStack or MainTabs
• Create a new nested navigator (e.g., a sub-stack or tabs)
• Define navigation types for new routes
• Set up screen props for components
• Configure navigation options (headers, tab bar, presentation modes)

Navigation Structure

The app uses a nested navigation structure:

1. AppNavigator: The top-level NavigationContainer.
2. AppStack: A NativeStack containing global screens (Welcome, Legal, Modals) and the MainTabs.
3. MainTabs: A BottomTab navigator for the primary app features (Home, Capture, Map, Profile).

Type Safety

Defining Parameters

typescript
1// app/navigators/navigationTypes.ts
2export type AppStackParamList = {
3  Welcome: undefined
4  MainTabs: NavigatorScreenParams<MainTabParamList>
5  RoutineDetail: { routineId: string }
6  // ...
7}

Screen Props

typescript
1export type AppStackScreenProps<T extends keyof AppStackParamList> = 
2  NativeStackScreenProps<AppStackParamList, T>
3
4export type MainTabScreenProps<T extends keyof MainTabParamList> = 
5  CompositeScreenProps<
6    BottomTabScreenProps<MainTabParamList, T>,
7    AppStackScreenProps<keyof AppStackParamList>
8  >

Adding a New Screen

1. Update Param List

Add the screen name and its parameters to navigationTypes.ts.

2. Update Navigator

Add a <Stack.Screen> or <Tab.Screen> to the appropriate navigator file.

3. Implement Component

Use the defined props in your screen component:

tsx
1export const MyNewScreen = (props: AppStackScreenProps<"MyNewScreen">) => {
2  const { navigation, route } = props
3  // ...
4}

Common Patterns

Modal Presentation

tsx
1<Stack.Screen
2  name="RoutineEdit"
3  component={RoutineEditScreen}
4  options={{ presentation: "modal" }}
5/>

Tab Bar Icons

tsx
1<Tab.Screen
2  name="Home"
3  component={HomeScreen}
4  options={{
5    tabBarLabel: "Home",
6    tabBarIcon: ({ color }) => <Home size={24} color={color} />,
7  }}
8/>

References

See NAVIGATION_TYPES.md for detailed type patterns.

See NAVIGATOR_SETUP.md for stack and tab configuration examples.