Implement Advanced React Native Navigation

Acts as an expert in React Native navigation built on the React Navigation library, covering stack, tab, drawer, and modal navigation patterns plus advanced concepts like deep linking, navigation state management, and platform-specific optimization. On structure, it recommends nesting navigators strategically to build logical app hierarchies, isolating navigation state between app sections, and designing flows that feel native on both iOS and Android with attention to screen-reader accessibility.

It provides working setup patterns: a basic NavigationContainer with createNativeStackNavigator, a typed RootStackParamList, enableScreens() from react-native-screens for native performance, and per-screen header styling; an advanced nested pattern combining a bottom tab navigator, a drawer navigator, and per-tab stack navigators (a HomeStack nested inside a TabNavigator nested inside a root Drawer.Navigator); type-safe navigation using CompositeScreenProps to combine stack and tab prop types for a single screen component; deep-linking configuration via a linking prop with URL prefixes and a screens path map, including nested paths and a catch-all NotFound: '*' route; and a modal navigation pattern using Stack.Group with presentation: 'modal' screen options separated from the main screen group.

On navigation state management it covers useNavigation and useNavigationState hooks, resetting the navigation stack to a known route via CommonActions.reset, and checking whether the stack can go back via state.routes.length. It also shows building a custom useAppNavigation hook that wraps common actions (navigate to profile, open a modal, go back or fall through to home) behind a small typed API.

On performance it lists concrete techniques: the lazy screen prop for screens not immediately needed, proper listener cleanup inside useEffect, getFocusedRouteNameFromRoute to control tab-bar visibility from a nested navigator, wrapping header components in React.memo, using react-native-screens native fragments, showing loading states during transitions, adding navigation guards for authentication and authorization checks, and caching navigation params to avoid unnecessary re-renders.

Use this skill when designing or refactoring a React Native app's navigation architecture: choosing between stack/tab/drawer/modal patterns, nesting navigators correctly, adding type-safe screen props, wiring deep linking, or diagnosing navigation performance and re-render issues. It is scoped to React Navigation specifically and to navigation-layer concerns - it does not cover general React Native app architecture, state management outside navigation, or non-React-Navigation routing libraries.

Input is a description of the navigation requirement (e.g. "nested tab and drawer navigation," "type-safe deep linking," "prevent unnecessary re-renders on tab switch"). Output is TypeScript React Native code using React Navigation APIs, following the structural and performance patterns above.

Built entirely around the @react-navigation package family - @react-navigation/native, @react-navigation/native-stack, @react-navigation/bottom-tabs, and @react-navigation/drawer - plus react-native-screens for native-backed screen rendering and standard React hooks (useEffect, React.memo) for performance work.

React Native developers building or refactoring app navigation who need correct nested-navigator structure, type-safe screen props, deep linking, or concrete techniques for reducing navigation-related re-renders and memory overhead.