React Navigation Insights

Key Learnings

Setup Patterns

1. Native Stack Recommended react-navigation/native-stack provides better performance than the JS-based stack.

2. Safe Area Context Wrap navigator with SafeAreaProvider to handle device notches.

3. Types for Params Define TypeScript interfaces for screen params to ensure type safety.

Navigation Types

| Type | Use Case | Performance | |------|----------|-------------| | Native Stack | Stack navigation | Best on native | | Bottom Tabs | Tab-based apps | Good, native bottom tabs | | Drawer | Side menu | Good, native drawer |

Linking Deep Links

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Chat: 'chat/:threadId',
    },
  },
};

Auth Flow Pattern

<Stack.Navigator>
  {!isAuthenticated ? (
    <>
      <Stack.Screen name="Login" />
      <Stack.Screen name="Register" />
    </>
  ) : (
    <>
      <Stack.Screen name="Home" />
      <Stack.Screen name="Chat" />
    </>
  )}
</Stack.Navigator>

Gotchas

• headerShown: false on nested screens won't hide parent header
• Use navigation.goBack() instead of navigation.navigate() for back
• Screen options can be overridden at the component level with useLayoutEffect