Skip to main content

Reset to Recommendations Tab Implementation Guide

Overview​

This document explains how to implement a type-safe, robust navigation reset to the Recommendations tab from any screen in the Daggh-companion app. It covers all relevant files, code examples, and the reasoning behind each step.

Concerned Files​

  • app/movie/[id].tsx — The screen where the reset action is triggered (e.g., the close (×) button).
  • app/routes.ts — Centralized route name constants for type safety and maintainability.
  • app/types/navigation.ts — Navigation type definitions for React Navigation, ensuring type-safe route usage.
  • app/_layout.tsx — Root stack navigator configuration, showing available stack routes.
  • (Optionally) app/(tabs)/_layout.tsx — Tab navigator configuration (not shown here, but referenced for context).

Step-by-Step Implementation​

1. Centralize Route Names​

File: app/routes.ts

// Centralized route names for navigation
export const ROUTES = {
  INDEX: "index",
  LOGIN: "login",
  SIGNUP: "signup",
  PROFILE: "profile",
  MOVIE_DETAILS: "movie/[id]",
  RECOMMENDATIONS: "recommendations",
  // Add other routes as needed
} as const

export type RouteName = (typeof ROUTES)[keyof typeof ROUTES]

Why:

  • Prevents typos and makes refactoring easier.
  • Enables type-safe navigation throughout the app.

2. Update Navigation Types​

File: app/types/navigation.ts

export type RootStackParamList = {
  index: undefined
  "(tabs)": { screen?: string }
  "movie/[id]": { id: string; media_type?: string }
  // Add other routes as needed
}

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

Why:

  • Ensures navigation actions are type-checked.
  • Allows navigation.reset to the (tabs) group with a specific tab (e.g., recommendations).

3. Use navigation.reset to Go to Recommendations Tab​

File: app/movie/[id].tsx

import { useNavigation } from "@react-navigation/native"
import { ROUTES } from "../routes"
// ...other imports...

export default function MovieDetailsScreen() {
  // ...existing code...
  const navigation = useNavigation()

  // Type-safe reset route for recommendations tab
  const RESET_ROUTE = { name: "(tabs)" as const, params: { screen: ROUTES.RECOMMENDATIONS } }

  // ...existing code...
  <Pressable
    onPress={() => navigation.reset && navigation.reset({ index: 0, routes: [RESET_ROUTE] })}
    // ...button styles and props...
  >
    <Text>×</Text>
  </Pressable>
  // ...existing code...
}

Why:

  • navigation.reset replaces the entire navigation stack with the (tabs) group, opening the Recommendations tab.
  • The params object ({ screen: ROUTES.RECOMMENDATIONS }) tells the tab navigator which tab to show.
  • Type safety is enforced by the RootStackParamList.

4. Stack and Tab Navigator Setup​

File: app/_layout.tsx

<Stack>
  <Stack.Screen name="index" />
  <Stack.Screen name="(auth)" />
  <Stack.Screen name="(tabs)" />
  <Stack.Screen name="movie/[id]" />
</Stack>

File: app/(tabs)/_layout.tsx (not shown, but should include):

<Tabs initialRouteName="recommendations">
  <Tabs.Screen name="recommendations" />
  {/* other tabs... */}
</Tabs>

Why:

  • The stack navigator must include the (tabs) group.
  • The tab navigator must have a tab named "recommendations".
  • The params passed in navigation.reset must match the tab name.

Summary​

  • Use centralized route constants for all navigation.
  • Update navigation types to include all stack and tab routes.
  • Use navigation.reset with { name: "(tabs)", params: { screen: "recommendations" } } to reset to the Recommendations tab.
  • Ensure your navigators are set up to recognize these route names.

This approach ensures robust, type-safe navigation and makes future maintenance easier for all developers.