### Start the Example App

Source: https://reactnavigation.org/docs/8.x/contributing

Run the example application using Expo to manually test changes. This app showcases various patterns and integration points.

```bash
yarn example start
```

--------------------------------

### Complete Example: Passing and Reading Params

Source: https://reactnavigation.org/docs/8.x/params

A full example demonstrating navigation between 'HomeScreen' and 'DetailsScreen', including passing and reading parameters. This setup uses `createNativeStackNavigator` and `NavigationContainer`.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      >
        Go to Details
      </Button>
    </View>
  );
}

function DetailsScreen({ route }) {
  const navigation = useNavigation('Details');

  /* 2. Get the param */
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        onPress={
          () =>
            navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })
        }
      >
        Go to Details... again
      </Button>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
```

--------------------------------

### Static API Navigation Setup

Source: https://reactnavigation.org/docs/8.x/static-vs-dynamic

Example of setting up navigation using the static API with a native stack navigator. This approach uses a configuration object for navigation setup.

```javascript
import * as React from 'react';
import { createStaticNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeScreen,
  },
});

const Navigation = createStaticNavigation(RootStack);

function App() {
  return <Navigation />;
}
```

--------------------------------

### Dynamic Stack Actions popToTop Example

Source: https://reactnavigation.org/docs/8.x/stack-actions

This example shows how to use the popToTop action in a dynamic navigation setup. It includes navigation to a profile screen and then back to the home screen using popToTop.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import { Button } from '@react-navigation/elements';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home!</Text>
      <Button
        onPress={() => {
          navigation.navigate('Profile');
        }}>
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  const navigation = useNavigation('Profile');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile!</Text>
      <Button
        onPress={() => {
          // codeblock-focus-start
          navigation.popToTop();
          // codeblock-focus-end
        }}>
        Pop to top
      </Button>
    </View>
  );
}

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
```

--------------------------------

### Dynamic API Navigation Setup

Source: https://reactnavigation.org/docs/8.x/static-vs-dynamic

Example of setting up navigation using the dynamic API with a native stack navigator. This approach uses React components for navigation setup.

```javascript
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
```

--------------------------------

### Static Stack Actions popToTop Example

Source: https://reactnavigation.org/docs/8.x/stack-actions

This example demonstrates using the popToTop action within a static navigation setup. It navigates to a profile screen and then uses popToTop to return to the home screen.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import { Button } from '@react-navigation/elements';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home!</Text>
      <Button
        onPress={() => {
          navigation.navigate('Profile');
        }}>
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  const navigation = useNavigation('Profile');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile!</Text>
      <Button
        onPress={() => {
          // codeblock-focus-start
          navigation.popToTop();
          // codeblock-focus-end
        }}>
        Pop to top
      </Button>
    </View>
  );
}

const RootStack = createStackNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}
```

--------------------------------

### Static Navigator Setup with Tabs and Stacks

Source: https://reactnavigation.org/docs/8.x/navigation-lifecycle

This example demonstrates setting up a static navigation structure with nested stack navigators within a bottom tab navigator. It shows how to define screens and their options for a typical mobile app layout. Use this for a declarative and type-safe navigation setup.

```javascript
import * as React from 'react';
import { Text, View } from 'react-native';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  createNativeStackScreen,
} from '@react-navigation/native-stack';
import {
  createBottomTabNavigator,
  createBottomTabScreen,
} from '@react-navigation/bottom-tabs';
import { Button } from '@react-navigation/elements';

function SettingsScreen() {
  const navigation = useNavigation('Settings');

  React.useEffect(() => {
    console.log('SettingsScreen mounted');

    return () => console.log('SettingsScreen unmounted');
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Settings Screen</Text>
      <Button onPress={() => navigation.navigate('Profile')}> 
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  const navigation = useNavigation('Profile');

  React.useEffect(() => {
    console.log('ProfileScreen mounted');

    return () => console.log('ProfileScreen unmounted');
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <Button onPress={() => navigation.navigate('Settings')}> 
        Go to Settings
      </Button>
    </View>
  );
}

function HomeScreen() {
  const navigation = useNavigation('Home');

  React.useEffect(() => {
    console.log('HomeScreen mounted');

    return () => console.log('HomeScreen unmounted');
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}> 
        Go to Details
      </Button>
    </View>
  );
}

function DetailsScreen() {
  const navigation = useNavigation('Details');

  React.useEffect(() => {
    console.log('DetailsScreen mounted');

    return () => console.log('DetailsScreen unmounted');
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button onPress={() => navigation.push('Details')}> 
        Go to Details... again
      </Button>
    </View>
  );
}

const HomeStack = createNativeStackNavigator({
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
    }),
    Details: createNativeStackScreen({
      screen: DetailsScreen,
    }),
  },
});

const SettingsStack = createNativeStackNavigator({
  screens: {
    Settings: createNativeStackScreen({
      screen: SettingsScreen,
    }),
    Profile: createNativeStackScreen({
      screen: ProfileScreen,
    }),
  },
});

const MyTabs = createBottomTabNavigator({
  screenOptions: {
    headerShown: false,
  },
  screens: {
    HomeStack: createBottomTabScreen({
      screen: HomeStack,
      options: { tabBarLabel: 'Home' },
    }),
    SettingsStack: createBottomTabScreen({
      screen: SettingsStack,
      options: { tabBarLabel: 'Settings' },
    }),
  },
});

const Navigation = createStaticNavigation(MyTabs);

export default function App() {
  return <Navigation />;
}

```

--------------------------------

### Static Shared Transition Example

Source: https://reactnavigation.org/docs/8.x/shared-element-transitions

This example demonstrates a static shared transition setup using `createStaticNavigation`. Ensure `Animated` components are used and share the same `sharedTransitionTag` for elements that should animate between screens.

```javascript
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  useNavigation,
  createStaticNavigation,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  createNativeStackScreen,
} from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

import Animated from 'react-native-reanimated';

// codeblock-focus-start
function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
      <Animated.Image
        source={{ uri: 'https://picsum.photos/id/39/200' }}
        style={{ width: 300, height: 300 }}
        // highlight-next-line
        sharedTransitionTag="tag"
      />
    </View>
  );
}

function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Button onPress={() => navigation.goBack()}>Go back</Button>
      <Animated.Image
        source={{ uri: 'https://picsum.photos/id/39/200' }}
        style={{ width: 100, height: 100 }}
        // highlight-next-line
        sharedTransitionTag="tag"
      />
    </View>
  );
}
// codeblock-focus-end

const RootStack = createNativeStackNavigator({
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
    }),
    Details: createNativeStackScreen({
      screen: DetailsScreen,
    }),
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
});
```

--------------------------------

### Static Navigation: Pass and Read Params

Source: https://reactnavigation.org/docs/8.x/params

Example demonstrating static navigation setup where params are passed from HomeScreen to DetailsScreen and then read. Includes navigation actions like navigate and push.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  createNativeStackScreen,
} from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

// codeblock-focus-start
function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          // highlight-start
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
          // highlight-end
        }}
      >
        Go to Details
      </Button>
    </View>
  );
}

function DetailsScreen({ route }) {
  const navigation = useNavigation('Details');

  /* 2. Get the param */
  // highlight-next-line
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        onPress={
          () =>
            // highlight-start
            navigation.push('Details', {
              // Randomly generate an ID for demonstration purposes
              itemId: Math.floor(Math.random() * 100),
            })
          // highlight-end
        }
      >
        Go to Details... again
      </Button>
    </View>
  );
}
// codeblock-focus-end

const RootStack = createNativeStackNavigator({
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
    }),
    Details: createNativeStackScreen({
      screen: DetailsScreen,
    }),
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}
```

--------------------------------

### Dynamic Shared Transition Example

Source: https://reactnavigation.org/docs/8.x/shared-element-transitions

This example shows a dynamic shared transition setup using a standard `NavigationContainer` and `createNativeStackNavigator`. The core principle of using `Animated` components and matching `sharedTransitionTag` remains the same.

```javascript
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

import Animated from 'react-native-reanimated';

// codeblock-focus-start
function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
      <Animated.Image
        source={{ uri: 'https://picsum.photos/id/39/200' }}
        style={{ width: 300, height: 300 }}
        // highlight-next-line
        sharedTransitionTag="tag"
      />
    </View>
  );
}

function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Button onPress={() => navigation.goBack()}>Go back</Button>
      <Animated.Image
        source={{ uri: 'https://picsum.photos/id/39/200' }}
        style={{ width: 100, height: 100 }}
        // highlight-next-line
        sharedTransitionTag="tag"
      />
    </View>
  );
}

// codeblock-focus-end

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
});
```

--------------------------------

### Setting Up Navigation with Theming

Source: https://reactnavigation.org/docs/8.x/use-theme

This snippet shows the complete setup for a React Navigation application, including stack and drawer navigators, and how to apply a theme dynamically based on the system's color scheme. Ensure `react-native` and `@react-navigation/native` are installed.

```javascript
import * as React from 'react';
import {
  useNavigation,
  createStaticNavigation,
  DefaultTheme,
  DarkTheme,
} from '@react-navigation/native';
import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Button } from '@react-navigation/elements';
import { useTheme } from '@react-navigation/native';

function SettingsScreen({ route }) {
  const navigation = useNavigation('Settings');
  const { user } = route.params;
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ color: colors.text }}>Settings Screen</Text>
      <Text style={{ color: colors.text }}>
        userParam: {JSON.stringify(user)}
      </Text>
      <Button onPress={() => navigation.navigate('Profile')}>
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ color: colors.text }}>Profile Screen</Text>
    </View>
  );
}

function MyButton() {
  // highlight-next-line
  const { colors } = useTheme();

  return (
    <TouchableOpacity style={{ backgroundColor: colors.card }}>
      <Text style={{ color: colors.text }}>Button!</Text>
    </TouchableOpacity>
  );
}

function HomeScreen() {
  const navigation = useNavigation('Home');
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ color: colors.text }}>Home Screen</Text>
      <MyButton />
      <Button
        onPress={() =>
          navigation.navigate('Panel',
            {
              screen: 'Settings',
              params: { user: 'jane' },
            }
          )
        }
      >
        Go to Settings
      </Button>
    </View>
  );
}

const PanelStack = createNativeStackNavigator({
  screens: {
    Profile: ProfileScreen,
    Settings: SettingsScreen,
  },
});

const MyDrawer = createDrawerNavigator({
  initialRouteName: 'Panel',
  screens: {
    Home: HomeScreen,
    Panel: {
      screen: PanelStack,
      options: {
        headerShown: false,
      },
    },
  },
});

const Navigation = createStaticNavigation(MyDrawer);

export default function App() {
  const scheme = useColorScheme();
  return <Navigation theme={scheme === 'dark' ? DarkTheme : DefaultTheme} />;
}
```

--------------------------------

### Static useFocusEffect Example

Source: https://reactnavigation.org/docs/8.x/function-after-focusing-screen

Demonstrates the use of the useFocusEffect hook with static navigation setup. Use this for simpler navigation structures.

```javascript
import * as React from 'react';
import { View } from 'react-native';
import {
  useFocusEffect,
  createStaticNavigation,
} from '@react-navigation/native';
import {
  createBottomTabNavigator,
  createBottomTabScreen,
} from '@react-navigation/bottom-tabs';

// codeblock-focus-start
function ProfileScreen() {
  useFocusEffect(
    React.useCallback(() => {
      alert('Screen was focused');
      // Do something when the screen is focused
      return () => {
        alert('Screen was unfocused');
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <View />;
}
// codeblock-focus-end

function HomeScreen() {
  return <View />;
}

const MyTabs = createBottomTabNavigator({
  screens: {
    Home: createBottomTabScreen({
      screen: HomeScreen,
    }),
    Profile: createBottomTabScreen({
      screen: ProfileScreen,
    }),
  },
});
const Navigation = createStaticNavigation(MyTabs);

export default function App() {
  return <Navigation />;
}
```

--------------------------------

### Install Native Stack Navigator with bun

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the native stack navigator library using bun.

```bash
bun add @react-navigation/native-stack@next
```

--------------------------------

### Navigating to a new screen (Dynamic)

Source: https://reactnavigation.org/docs/8.x/navigating

Access the navigation object using `useNavigation` and trigger navigation with `navigate`. This example shows dynamic navigation setup using `NavigationContainer` and a stack navigator.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import {
  useNavigation,
  NavigationContainer,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
    </View>
  );
}

// ... other code from the previous section

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
```

--------------------------------

### Install Elements Library with bun

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the elements library using bun.

```bash
bun add @react-navigation/elements
```

--------------------------------

### Install Drawer Navigator

Source: https://reactnavigation.org/docs/8.x/drawer-navigator

Install the Drawer Navigator package using npm or yarn. This command also installs the next version.

```bash
npm install @react-navigation/drawer@next
```

--------------------------------

### Custom Tab Router Implementation

Source: https://reactnavigation.org/docs/8.x/custom-routers

This example demonstrates a custom router implementation for a tab navigator. It includes methods for initializing state, rehydrating state, handling route name changes, focusing routes, and processing actions. Ensure `nanoid` is installed for key generation.

```javascript
import { BaseRouter } from '@react-navigation/native';
import { nanoid } from 'nanoid/non-secure';

const router = {
  type: 'tab',

  getInitialState({ routeNames, routeParamList }) {
    const index =
      options.initialRouteName !== undefined &&
      routeNames.includes(options.initialRouteName)
        ? routeNames.indexOf(options.initialRouteName)
        : 0;

    return {
      stale: false,
      type: 'tab',
      key: nanoid(),
      index,
      routeNames,
      routes: routeNames.map((name) => ({
        name,
        key: name,
        params: routeParamList[name],
      })),
    };
  },

  getRehydratedState(partialState, { routeNames, routeParamList }) {
    if (partialState.stale === false) {
      return partialState;
    }

    const routes = partialState.routes
      .filter((route) => routeNames.includes(route.name))
      .map((route) => ({
        ...route,
        key: route.key || `${route.name}-${nanoid()}`,
        params:
          routeParamList[route.name] !== undefined
            ? {
                ...routeParamList[route.name],
                ...route.params,
              }
            : route.params,
      }));

    return {
      stale: false,
      type: 'tab',
      key: nanoid(),
      index:
        typeof partialState.index === 'number' &&
        partialState.index < routes.length
          ? partialState.index
          : 0,
      routeNames,
      routes,
    };
  },

  getStateForRouteNamesChange(state, { routeNames }) {
    const routes = state.routes.filter((route) =>
      routeNames.includes(route.name)
    );

    return {
      ...state,
      routeNames,
      routes,
      index: Math.max(0, Math.min(state.index, routes.length - 1)),
    };
  },

  getStateForRouteFocus(state, key) {
    const index = state.routes.findIndex((r) => r.key === key);

    if (index === -1 || index === state.index) {
      return state;
    }

    return { ...state, index };
  },

  getStateForAction(state, action) {
    switch (action.type) {
      case 'NAVIGATE': {
        const index = state.routes.findIndex(
          (route) => route.name === action.payload.name
        );

        if (index === -1) {
          return null;
        }

        return { ...state, index };
      }

      default:
        return BaseRouter.getStateForAction(state, action);
    }
  },

  shouldActionChangeFocus() {
    return false;
  },
};

const SimpleRouter = () => router;

export default SimpleRouter;

```

--------------------------------

### Install Native Stack Navigator with yarn

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the native stack navigator library using yarn.

```bash
yarn add @react-navigation/native-stack@next
```

--------------------------------

### Install Native Stack Navigator with pnpm

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the native stack navigator library using pnpm.

```bash
pnpm add @react-navigation/native-stack@next
```

--------------------------------

### Dynamic Data Fetching with useFocusEffect

Source: https://reactnavigation.org/docs/8.x/testing

This example shows a more dynamic setup for data fetching using `useFocusEffect` within a tab navigator. It ensures that data fetching logic is correctly encapsulated and managed within the component's lifecycle.

```javascript
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useFocusEffect } from '@react-navigation/native';
import { useCallback, useState } from 'react';
import { Text, View } from 'react-native';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
    </View>
  );
}

const url = 'https://pokeapi.co/api/v2/pokemon/ditto';

function PokemonInfoScreen() {
  const [profileData, setProfileData] = useState({ status: 'loading' });

  useFocusEffect(
    useCallback(() => {
      if (profileData.status === 'success') {
        return;
      }

      setProfileData({ status: 'loading' });

      const controller = new AbortController();

      const fetchUser = async () => {
        try {
          const response = await fetch(url, { signal: controller.signal });
          const data = await response.json();

          setProfileData({ status: 'success', data: data });
        } catch (error) {
          setProfileData({ status: 'error' });
        }
      };

      fetchUser();

      return () => {
        controller.abort();
      };
    }, [profileData.status])
  );

  if (profileData.status === 'loading') {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Loading...</Text>
      </View>
    );
  }

  if (profileData.status === 'error') {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>An error occurred!</Text>
      </View>
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{profileData.data.name}</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export function MyTabs() {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Pokemon" component={PokemonInfoScreen} />
    </Tab.Navigator>
  );
}

```

--------------------------------

### Custom Drawer Content with Dynamic Navigation

Source: https://reactnavigation.org/docs/8.x/drawer-navigator

This example shows how to integrate a custom drawer content component within a dynamic navigation setup using `NavigationContainer`. It also includes a custom `DrawerItem` for 'Help'.

```javascript
import * as React from 'react';
import { Text, View, Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => Linking.openURL('https://mywebsite.com/help')}
      />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}
```

--------------------------------

### Install Elements Library with pnpm

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the elements library using pnpm.

```bash
pnpm add @react-navigation/elements
```

--------------------------------

### Install Elements Library with yarn

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the elements library using yarn.

```bash
yarn add @react-navigation/elements
```

--------------------------------

### Install Elements Library with npm

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the elements library using npm.

```bash
npm install @react-navigation/elements
```

--------------------------------

### Install standard-navigation

Source: https://reactnavigation.org/docs/8.x/standard-navigator

Install the standard-navigation package as a regular dependency in your navigator library using npm or yarn.

```bash
npm install standard-navigation
```

--------------------------------

### Get Focused Route Name (Dynamic)

Source: https://reactnavigation.org/docs/8.x/use-navigation-state

This example demonstrates using useNavigationState within a dynamic navigator setup. The selector function ensures re-renders only occur when the relevant part of the state changes.

```javascript
import * as React from 'react';
import { Button } from '@react-navigation/elements';
import { View, Text } from 'react-native';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// codeblock-focus-start
import { useNavigationState } from '@react-navigation/native';

function CurrentRouteDisplay() {
  // highlight-start
  const focusedRouteName = useNavigationState(
    'Home',
    (state) => state.routes[state.index].name
  );
  // highlight-end

  return <Text>Current route: {focusedRouteName}</Text>;
}
// codeblock-focus-end

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <CurrentRouteDisplay />
      <Button onPress={() => navigation.navigate('Profile')}> 
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  const navigation = useNavigation('Profile');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <CurrentRouteDisplay />
      <Button onPress={() => navigation.goBack()}>Go back</Button>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
```

--------------------------------

### Access theme colors in a custom component (Static)

Source: https://reactnavigation.org/docs/8.x/themes

Use the `useTheme` hook to get theme colors like `colors.card` and `colors.text` within a component. This example demonstrates static theme setup.

```javascript
import * as React from 'react';
import {
  createStaticNavigation,
  DefaultTheme,
  DarkTheme,
  useTheme,
} from '@react-navigation/native';
import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function MyButton() {
  const { colors } = useTheme();

  return (
    <TouchableOpacity
      style={{
        backgroundColor: colors.card,
      }}
    >
      <Text style={{ color: colors.text }}>Button!</Text>
    </TouchableOpacity>
  );
}

function HomeScreen() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ color: colors.text }}>Home Screen</Text>
      <MyButton />
    </View>
  );
}

function ProfileScreen() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ color: colors.text }}>Profile Screen</Text>
    </View>
  );
}

const MyTabs = createBottomTabNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

const Navigation = createStaticNavigation(MyTabs);

export default function App() {
  const scheme = useColorScheme();

  return <Navigation theme={scheme === 'dark' ? DarkTheme : DefaultTheme} />;
}
```

--------------------------------

### Static Navigator Setup

Source: https://reactnavigation.org/docs/8.x/standard-navigator

Demonstrates how consumers can use the exported createMyTabNavigator and createMyTabScreen functions to set up a static navigator. This approach is recommended for performance.

```tsx
import { createStaticNavigation } from '@react-navigation/native';
import {
  createMyTabNavigator,
  createMyTabScreen,
} from 'my-navigator/react-navigation';

const MyTabs = createMyTabNavigator({
  screens: {
    Home: createMyTabScreen({
      screen: HomeScreen,
      options: { title: 'Home' },
    }),
    Feed: createMyTabScreen({
      screen: FeedScreen,
      options: { title: 'Feed' },
    }),
  },
});

const Navigation = createStaticNavigation(MyTabs);
```

--------------------------------

### Install React Navigation Elements

Source: https://reactnavigation.org/docs/8.x/elements

Install the Elements package using npm. Ensure you have @react-navigation/native and its dependencies set up first.

```bash
npm install @react-navigation/elements@next
```

--------------------------------

### Navigating to a new screen (Static)

Source: https://reactnavigation.org/docs/8.x/navigating

Use the `useNavigation` hook to get the navigation object in a screen component. Call `navigate` with the target route name to transition to another screen. This example demonstrates static navigation setup.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import {
  createNativeStackNavigator,
  createNativeStackScreen,
} from '@react-navigation/native-stack';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button onPress={() => navigation.navigate('Details')}>
        Go to Details
      </Button>
    </View>
  );
}

// ... other code from the previous section

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screens: {
    Home: createNativeStackScreen({
      screen: HomeScreen,
    }),
    Details: createNativeStackScreen({
      screen: DetailsScreen,
    }),
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}
```

--------------------------------

### Install Reanimated and Worklets (Non-Expo)

Source: https://reactnavigation.org/docs/8.x/troubleshooting

Install react-native-reanimated and react-native-worklets using npm for projects not using the Expo managed workflow. Ensure to follow the Reanimated installation guide for Babel plugin configuration.

```bash
npm install react-native-reanimated react-native-worklets
```

--------------------------------

### Static Navigation Setup

Source: https://reactnavigation.org/docs/8.x/navigating-without-navigation-prop

Set up static navigation by creating a navigation container and passing a ref to it. This allows for programmatic navigation.

```javascript
import { createStaticNavigation } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

/* ... */

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation ref={navigationRef} />;
}
```

--------------------------------

### Define App Structure with Stack Navigator

Source: https://reactnavigation.org/docs/8.x/glossary-of-terms

Illustrates how to set up the root of your application using NavigationContainer and a Stack Navigator, defining a basic screen.

```javascript
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator> // <---- This is a Navigator
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

--------------------------------

### Dynamic useFocusEffect Example

Source: https://reactnavigation.org/docs/8.x/function-after-focusing-screen

Illustrates the useFocusEffect hook within a dynamic navigation setup using NavigationContainer. This is suitable for more complex navigation flows.

```javascript
import * as React from 'react';
import { View } from 'react-native';
import { useFocusEffect, NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// codeblock-focus-start
function ProfileScreen() {
  useFocusEffect(
    React.useCallback(() => {
      alert('Screen was focused');
      // Do something when the screen is focused
      return () => {
        alert('Screen was unfocused');
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <View />;
}
// codeblock-focus-end

function HomeScreen() {
  return <View />;
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}
```

--------------------------------

### Multiple Drawers with Context (Dynamic Navigation)

Source: https://reactnavigation.org/docs/8.x/multiple-drawers

This example demonstrates implementing multiple drawers with dynamic navigation. It utilizes context to manage the state of the right drawer, allowing it to be controlled from child components.

```javascript
import * as React from 'react';
import { View } from 'react-native';
import { Drawer } from 'react-native-drawer-layout';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { Button } from '@react-navigation/elements';

const RightDrawerContext = React.createContext();

function HomeScreen() {
  const { openRightDrawer } = React.useContext(RightDrawerContext);
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.openDrawer()}>Open left drawer</Button>
      <Button onPress={() => openRightDrawer()}>Open right drawer</Button>
    </View>
  );
}

const Drawer2 = createDrawerNavigator();

function LeftDrawerScreen() {
  return (
    <Drawer2.Navigator
      screenOptions={{
        drawerPosition: 'left',
      }}
    >
      <Drawer2.Screen name="Home" component={HomeScreen} />
    </Drawer2.Navigator>
  );
}

function RightDrawerScreen() {
  const [rightDrawerOpen, setRightDrawerOpen] = React.useState(false);

  const value = React.useMemo(
    () => ({
      openRightDrawer: () => setRightDrawerOpen(true),
      closeRightDrawer: () => setRightDrawerOpen(false),
    }),
    []
  );

  return (
    <Drawer
      open={rightDrawerOpen}
      onOpen={() => setRightDrawerOpen(true)}
      onClose={() => setRightDrawerOpen(false)}
      drawerPosition="right"
      renderDrawerContent={() => <>{/* Right drawer content */}</>}
    >
      <RightDrawerContext.Provider value={value}>
        <NavigationContainer>
          <LeftDrawerScreen />
        </NavigationContainer>
      </RightDrawerContext.Provider>
    </Drawer>
  );
}

export default function App() {
  return <RightDrawerScreen />;
}
```

--------------------------------

### Get Route Object by Screen Name (Dynamic)

Source: https://reactnavigation.org/docs/8.x/use-route

Use this when the screen name is determined at runtime. It works with standard navigation container setup.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import { Button } from '@react-navigation/elements';
import { useNavigation, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// codeblock-focus-start
import { useRoute } from '@react-navigation/native';

function MyText() {
  // highlight-next-line
  const route = useRoute('Profile');

  return <Text>{route.params.caption}</Text>;
}
// codeblock-focus-end

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the home screen of the app</Text>
      <Button
        onPress={() => {
          navigation.navigate('Profile', { caption: 'Some caption' });
        }}>
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <MyText />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

export default App;
```

--------------------------------

### Get Route Object by Screen Name (Static)

Source: https://reactnavigation.org/docs/8.x/use-route

Use this when the screen name is known at build time. It requires static navigation setup.

```javascript
import * as React from 'react';
import { View, Text } from 'react-native';
import { Button } from '@react-navigation/elements';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// codeblock-focus-start
import { useRoute } from '@react-navigation/native';

function MyText() {
  // highlight-next-line
  const route = useRoute('Profile');

  return <Text>{route.params.caption}</Text>;
}
// codeblock-focus-end

function HomeScreen() {
  const navigation = useNavigation('Home');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the home screen of the app</Text>
      <Button
        onPress={() => {
          navigation.navigate('Profile', { caption: 'Some caption' });
        }}>
        Go to Profile
      </Button>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <MyText />
    </View>
  );
}

const RootStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

const Navigation = createStaticNavigation(RootStack);

function App() {
  return <Navigation />;
}

export default App;
```

--------------------------------

### Create new app entry point

Source: https://reactnavigation.org/docs/8.x/from-expo-router

Set up a new entry point file (e.g., index.js) to register your root component.

```javascript
import { registerRootComponent } from 'expo';

import App from './src/App';

registerRootComponent(App);
```

--------------------------------

### Install Native Stack Navigator with npm

Source: https://reactnavigation.org/docs/8.x/hello-react-navigation?config=dynamic

Use this command to install the native stack navigator library using npm.

```bash
npm install @react-navigation/native-stack@next
```