### Install react-native-screen-transitions

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Install the core `react-native-screen-transitions` package using npm or yarn.

```bash
npm install react-native-screen-transitions
```

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

### Basic Native Bottom Tab Navigator Setup (React Native)

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2025-01-29-using-react-navigation-with-native-bottom-tabs.md

Provides a basic example of setting up a native bottom tab navigator using `createNativeBottomTabNavigator` from `@bottom-tabs/react-navigation`. It illustrates how to define screens with titles and icon URIs within the navigator.

```tsx
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

const Tabs = createNativeBottomTabNavigator();

function NativeBottomTabs() {
  return (
    <Tabs.Navigator>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }),
        }}
      />
    </Tabs.Navigator>
  );
}
```

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

### Installing react-native-drawer-layout Package

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-06-27-react-navigation-7.0-rc.md

Provides the command to install the `react-native-drawer-layout` package, which is the standalone drawer implementation used in `@react-navigation/drawer`. This allows using the drawer functionality independently of React Navigation.

```bash
npm install react-native-drawer-layout@next
```

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

### Installing React Navigation 7.0 Release Candidate

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-06-27-react-navigation-7.0-rc.md

Shows the commands to install the release candidate version of React Navigation packages, including `@react-navigation/native` and `@react-navigation/bottom-tabs`. This allows users to test the upcoming features and provide feedback.

```bash
npm install @react-navigation/native@next @react-navigation/bottom-tabs@next
```

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

### Basic Drawer Navigator Setup in React Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

This snippet demonstrates the fundamental setup of a drawer navigator in React Navigation v5. It imports `createDrawerNavigator` and uses the `Navigator` and `Screen` components to define a basic drawer with a home screen. The `DrawerContent` component is also defined to hold the drawer's content.

```jsx
import React from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function DrawerContent() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Drawer content</Text>
    </View>
  );
}

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

export const RootNavigator = () => {
  return (
    <Drawer.Navigator drawerContent={() => <DrawerContent />}>
      <Drawer.Screen name="Home" component={HomeScreen} />
    </Drawer.Navigator>
  );
};

```

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

### Install React Navigation and React Native Paper Dependencies

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Installs core React Navigation libraries, community dependencies for gesture handling and screen management, and React Native Paper for UI components. These are essential for setting up navigation and theming in a React Native application.

```bash
npm install @react-navigation/native @react-navigation/stack @react-native-community/masked-view @react-navigation/drawer @react-navigation/material-bottom-tabs react-native-paper
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context
```

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

### Install Expo Peer Dependencies

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Install necessary peer dependencies for Expo projects, including Reanimated, Gesture Handler, and navigation libraries.

```bash
npx expo install react-native-reanimated react-native-gesture-handler \n  @react-navigation/native @react-navigation/native-stack \n  @react-navigation/elements react-native-screens \n  react-native-safe-area-context \n  @react-native-masked-view/masked-view
```

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

### Create a basic Stack Navigator

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Initializes a standard Stack Navigator with Feed and Details screens using React Navigation v5.

```jsx
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import { Feed } from './feed';
import { Details } from './details';

export const FeedStack = () => {
  return (
    <Stack.Navigator initialRouteName="Feed">
      <Stack.Screen
        name="Feed"
        component={Feed}
        options={{ headerTitle: 'Twitter' }}
      />
      <Stack.Screen
        name="Details"
        component={Details}
        options={{ headerTitle: 'Tweet' }}
      />
    </Stack.Navigator>
  );
};
```

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

### Install React Navigation 3.0

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2018-11-17-react-navigation-3.0.md

Command to add the React Navigation library to a project using the yarn package manager.

```bash
yarn add react-navigation@^3.0.0
```

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

### Customized Drawer Content with React Native Paper

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

This code example shows how to create a more visually appealing and functional drawer content using components from `@react-navigation/drawer` and `react-native-paper`. It includes user information, navigation items, and theme toggles, leveraging `DrawerContentScrollView` for scrollability and `react-native-paper` components for UI elements.

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  DrawerItem,
  DrawerContentScrollView,
} from '@react-navigation/drawer';
import {
  useTheme,
  Avatar,
  Title,
  Caption,
  Paragraph,
  Drawer,
  Text,
  TouchableRipple,
  Switch,
} from 'react-native-paper';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export function DrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View
        style={
          styles.drawerContent,
        }
      >
        <View style={styles.userInfoSection}>
          <Avatar.Image
            source={{
              uri:
                'https://pbs.twimg.com/profile_images/952545910990495744/b59hSXUd_400x400.jpg',
            }}
            size={50}
          />
          <Title style={styles.title}>Dawid Urbaniak</Title>
          <Caption style={styles.caption}>@trensik</Caption>
          <View style={styles.row}>
            <View style={styles.section}>
              <Paragraph style={[styles.paragraph, styles.caption]}>
                202
              </Paragraph>
              <Caption style={styles.caption}>Following</Caption>
            </View>
            <View style={styles.section}>
              <Paragraph style={[styles.paragraph, styles.caption]}>
                159
              </Paragraph>
              <Caption style={styles.caption}>Followers</Caption>
            </View>
          </View>
        </View>
        <Drawer.Section style={styles.drawerSection}>
          <DrawerItem
            icon={({ color, size }) => (
              <MaterialCommunityIcons
                name="account-outline"
                color={color}
                size={size}
              />
            )}
            label="Profile"
            onPress={() => {}}
          />
          <DrawerItem
            icon={({ color, size }) => (
              <MaterialCommunityIcons name="tune" color={color} size={size} />
            )}
            label="Preferences"
            onPress={() => {}}
          />
          <DrawerItem
            icon={({ color, size }) => (
              <MaterialCommunityIcons
                name="bookmark-outline"
                color={color}
                size={size}
              />
            )}
            label="Bookmarks"
            onPress={() => {}}
          />
        </Drawer.Section>
        <Drawer.Section title="Preferences">
          <TouchableRipple onPress={() => {}}>
            <View style={styles.preference}>
              <Text>Dark Theme</Text>
              <View pointerEvents="none">
                <Switch value={false} />
              </View>
            </View>
          </TouchableRipple>
          <TouchableRipple onPress={() => {}}>
            <View style={styles.preference}>
              <Text>RTL</Text>
              <View pointerEvents="none">
                <Switch value={false} />
              </View>
            </View>
          </TouchableRipple>
        </Drawer.Section>
      </View>
    </DrawerContentScrollView>
  );
}

```

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

### Install React Navigation 6.x Packages

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2021-03-12-react-navigation-6.0-next.md

This command installs the necessary packages for React Navigation version 6.x, including the core navigation library and the stack navigator. It uses npm and provides a hint for yarn users.

```bash
npm install @react-navigation/native@^6.x @react-navigation/stack@^6.x
```

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

### Install Community CLI Peer Dependencies

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Install peer dependencies for Community CLI projects and link native modules using CocoaPods for iOS.

```bash
npm install react-native-reanimated react-native-gesture-handler \n  @react-navigation/native @react-navigation/native-stack \n  @react-navigation/elements react-native-screens \n  react-native-safe-area-context \n  @react-native-masked-view/masked-view
```

```bash
npx pod-install ios
```

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

### Install React Navigation 7 Alpha (Shell)

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-03-25-introducing-static-api.md

Provides the command to install the alpha version of React Navigation packages, specifically '@react-navigation/native' and '@react-navigation/native-stack'. This is necessary for testing the new static API and other improvements included in version 7.

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

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

### Create Browser App with Link Component (React)

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2018-11-01-react-navigation-3.0-rc.md

Demonstrates creating a web application container using `createBrowserApp` and the `Link` component for navigation. This example showcases how to define routes and navigate between them using declarative links, which render as standard HTML anchor tags.

```javascript
import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp, Link } from "@react-navigation/web";

class Home extends React.Component {
  static path = "";
  static navigationOptions = {
    title: "Home",
  };
  render () {
    return (
      <div>
        <h2>Home Screen</h2>
        <Link toRoute="Profile" params={{ name: "Brent", view: "photos" }}>
          Brent's photos
        </Link>
      </div>
    );
  }
}
class Profile extends React.Component {
  static path = "/profile/:name";
  ...
}

const AppNavigator = createSwitchNavigator({
  Home,
  Profile,
});

const App = createBrowserApp(AppNavigator);

export default App;
```

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

### Navigate to Details Screen using React Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Demonstrates how to trigger a screen transition to the Details view by invoking the push method on the navigation object.

```jsx
function onTweetPress() {
  navigation.push('Details');
}
```

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

### Install React Navigation 2.0 RC

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2018-04-06-react-navigation-2.0-rc.md

This command installs the release candidate version of React Navigation 2.0 using Yarn. It's recommended for developers who want to test the upcoming version and provide feedback.

```bash
yarn add react-navigation@^2.0.0-rc.1
```

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

### Initialize Material Bottom Tab Navigator

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Shows the import and initialization steps required to set up a material bottom tab navigator using the React Navigation library.

```jsx
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();
```

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

### Static API for Navigator Configuration in React Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-06-27-react-navigation-7.0-rc.md

Demonstrates the new optional static API for configuring navigators in React Navigation. This API simplifies setup and enhances TypeScript and deep linking support by using a configuration object instead of functions for defining screens.

```javascript
const Stack = createStackNavigator({
  screens: {
    Home: {
      screen: Home,
    },
    Profile: {
      screen: Profile,
    },
    Settings: {
      screen: Settings,
    },
  },
});
```

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

### Install React Navigation Next Packages

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2025-12-19-react-navigation-8.0-alpha.md

This command installs the latest alpha versions of React Navigation core and bottom tabs packages. It's used to try out the new features, including state persistence, before the final release.

```sh
npm install @react-navigation/native@next @react-navigation/bottom-tabs@next
```

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

### Create a Blank Stack Navigator

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Initialize a Blank Stack navigator from `react-native-screen-transitions` for custom transition definitions. This navigator starts with no built-in animations.

```tsx
import { createBlankStackNavigator } from 'react-native-screen-transitions/blank-stack';

const RootStack = createBlankStackNavigator({
  screens: {
    Home: HomeScreen,
    Detail: DetailScreen,
  },
});
```

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

### Render FAB and Portal in Tab Navigator

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Demonstrates how to wrap a Material Bottom Tab Navigator with a Portal and FAB component to ensure the button renders above other UI elements.

```jsx
import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { useTheme, Portal, FAB } from 'react-native-paper';

import { Feed } from './feed';
import { Message } from './message';
import { Notifications } from './notifications';

const Tab = createMaterialBottomTabNavigator();

export const BottomTabs = () => {
  return (
    <React.Fragment>
      <Tab.Navigator
        initialRouteName="Feed"
        backBehavior="initialRoute"
        shifting={true}
        sceneAnimationEnabled={false}
      >
        <Tab.Screen name="Feed" component={Feed} options={{ tabBarIcon: 'home-account' }} />
        <Tab.Screen name="Notifications" component={Notifications} options={{ tabBarIcon: 'bell-outline' }} />
        <Tab.Screen name="Messages" component={Message} options={{ tabBarIcon: 'message-text-outline' }} />
      </Tab.Navigator>
      <Portal>
        <FAB
          icon="feather"
          style={{
            position: 'absolute',
            bottom: 100,
            right: 16,
          }}
        />
      </Portal>
    </React.Fragment>
  );
};
```

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

### Integrate Authentication Navigator into App Navigator

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md

Configures the main AppNavigator to use the AuthNavigator as the initial entry point for the application. This setup ensures that authentication screens are presented before the user reaches the home screen.

```javascript
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthNavigator } from './auth.navigator';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();

export const AppNavigator = (): React.ReactElement => (
  <Stack.Navigator headerMode='none'>
    <Stack.Screen name={AppRoute.AUTH} component={AuthNavigator}/>
  </Stack.Navigator>
);
```

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

### Initialize React Native Paper Provider in App.js

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Wraps the main application component with React Native Paper's Provider. This makes the Paper theme available to all Paper UI components throughout the application and handles top-level component rendering.

```jsx
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import Main from './src/Main';

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

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

### Initialize React Navigation Container in App.js

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Sets up the root of the navigation tree by wrapping the main application component with NavigationContainer. This component manages the navigation state and must enclose all navigator structures.

```jsx
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import Main from './src/Main';

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

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

### Clone the React Navigation and UI Kitten Demo Project

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md

Provides the command to clone the starter repository containing the necessary boilerplate and configuration for the tutorial.

```bash
git clone https://github.com/artyorsh/react-navigation-ex-demo
```

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

### Implement Web Navigation with createBrowserApp and Link

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2018-11-17-react-navigation-3.0.md

Demonstrates how to set up a web-based navigation container using createBrowserApp and define navigation links with the Link component. This approach allows for path-based routing in React web applications.

```jsx
import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp, Link } from "@react-navigation/web";

class Home extends React.Component {
  static path = "";
  static navigationOptions = {
    title: "Home",
  };
  render () {
    return (
      <div>
        <h2>Home Screen</h2>
        <Link toRoute="Profile" params={{ name: "Brent", view: "photos" }}>
          Brent's photos
        </Link>
      </div>
    );
  }
}
class Profile extends React.Component {
  static path = "/profile/:name";
  // ... implementation
}

const AppNavigator = createSwitchNavigator({
  Home,
  Profile,
});

const App = createBrowserApp(AppNavigator);

export default App;
```

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

### Component-based Navigator Configuration

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-02-06-react-navigation-5.0.md

Demonstrates the new dynamic, component-based configuration for Stack Navigators. This approach allows access to props, state, and context directly within the navigation definition.

```javascript
function App() {
  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="settings" component={Settings} />
      <Stack.Screen
        name="profile"
        component={Profile}
        options={{ title: 'John Doe' }}
      />
    </Stack.Navigator>
  );
}
```

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

### Initialize App Container

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2018-11-17-react-navigation-3.0.md

Demonstrates how to wrap a root navigator with createAppContainer, which is a required change in React Navigation 3.0 to manage navigation state.

```javascript
import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
const MainNavigator = createStackNavigator({...});
const App = createAppContainer(MainNavigator);
```

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

### Initialize Static Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-03-25-introducing-static-api.md

Demonstrates how to wrap a static navigation configuration into a renderable component using createStaticNavigation.

```javascript
const Navigation = createStaticNavigation(RootStack);

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

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

### Updating Screen Options Dynamically

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-02-06-react-navigation-5.0.md

Shows how to use the navigation.setOptions method to update screen headers or navigation behavior dynamically based on component state or asynchronous actions.

```javascript
navigation.setOptions({
  headerRight: () => (
    <DoneButton
      onPress={async () => {
        await saveNote();
        navigation.replace('Notes');
      }}
    />
  ),
});
```

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

### Preloading Screens with React Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-06-27-react-navigation-7.0-rc.md

Shows how to use the `preload` method on the navigation object to preload screens before navigating to them. This can improve perceived performance by rendering and executing side-effects of upcoming screens off-screen.

```javascript
navigation.preload('Details', { id: 42 });
```

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

### Conditionally Hide FAB with useIsFocused

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Uses the useIsFocused hook to control the visibility of the FAB, ensuring it only appears when the parent screen is currently active.

```jsx
import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { useTheme, Portal, FAB } from 'react-native-paper';
import { useIsFocused } from '@react-navigation/native';

import { Feed } from './feed';
import { Message } from './message';
import { Notifications } from './notifications';

const Tab = createMaterialBottomTabNavigator();

export const BottomTabs = () => {
  const isFocused = useIsFocused();

  return (
    <React.Fragment>
      <Tab.Navigator
        initialRouteName="Feed"
        backBehavior="initialRoute"
        shifting={true}
      >
        <Tab.Screen name="Feed" component={Feed} options={{ tabBarIcon: 'home-account' }} />
        <Tab.Screen name="Notifications" component={Notifications} options={{ tabBarIcon: 'bell-outline' }} />
        <Tab.Screen name="Messages" component={Message} options={{ tabBarIcon: 'message-text-outline' }} />
      </Tab.Navigator>
      <Portal>
        <FAB
          visible={isFocused}
          icon="feather"
          style={{
            position: 'absolute',
            bottom: safeArea.bottom + 65,
            right: 16,
          }}
        />
      </Portal>
    </React.Fragment>
  );
};
```

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

### Source Screen: Triggering Zoom Transition

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Use Transition.Boundary.Trigger on the source screen to initiate the zoom transition. Pass the item's ID to navigate to the detail screen.

```tsx
function FeedCard({ item, navigation }) {
  return (
    <Transition.Boundary.Trigger
      id={item.id}
      onPress={() => {
        navigation.navigate('Detail', { id: item.id });
      }}
    >
      <Image source={item.image} style={styles.card} />
    </Transition.Boundary.Trigger>
  );
}
```

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

### Merge Navigation and Paper Themes

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Provides a pattern for combining React Navigation and React Native Paper theme objects into a single configuration. This is useful for maintaining unified color palettes across both libraries.

```jsx
import * as React from 'react';
import { NavigationContainer, DarkTheme as NavigationDarkTheme } from '@react-navigation/native';
import { DarkTheme as PaperDarkTheme, Provider as PaperProvider } from 'react-native-paper';

const CombinedDarkTheme = {
  ...PaperDarkTheme,
  ...NavigationDarkTheme,
  colors: { ...PaperDarkTheme.colors, ...NavigationDarkTheme.colors },
};

export default function Main() {
  return (
    <PaperProvider theme={CombinedDarkTheme}>
      <NavigationContainer theme={CombinedDarkTheme}>
        {/* content */}
      </NavigationContainer>
    </PaperProvider>
  );
}
```

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

### Define Navigation Structure with Dynamic vs Static API

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-03-25-introducing-static-api.md

Compares the traditional dynamic API approach using components with the new static API approach using configuration objects.

```javascript
const Stack = createStackNavigator();

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

```javascript
const RootStack = createStackNavigator({
  screens: {
    Home: { screen: Home },
    Profile: { screen: Profile },
    Settings: { screen: Settings },
  },
});
```

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

### Apply Themes to Navigation and Paper

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Shows how to apply DarkTheme to both React Navigation's NavigationContainer and React Native Paper's Provider. This ensures a consistent visual theme across the entire application.

```jsx
import * as React from 'react';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { DarkTheme as PaperDarkTheme, Provider as PaperProvider } from 'react-native-paper';

export default function Main() {
  return (
    <PaperProvider theme={PaperDarkTheme}>
      <NavigationContainer theme={DarkTheme}>
        {/* content */}
      </NavigationContainer>
    </PaperProvider>
  );
}
```

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

### Apply Custom Transition to Stack Navigator

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Apply the defined custom transition configuration to a specific screen within a stack navigator. This allows for unique animations for different screens.

```tsx
const RootStack = createBlankStackNavigator({
  screens: {
    Home: HomeScreen,
    Detail: {
      screen: DetailScreen,
      options: iosCardStackTransition,
    },
  },
});
```

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

### Create Bottom Tab Navigation Component

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

A complete implementation of a BottomTabs component using React Native Paper's material bottom tabs, featuring three distinct screens for Feed, Notifications, and Messages.

```jsx
import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

import { Feed } from './feed';
import { Messages } from './messages';
import { Notifications } from './notifications';

const Tab = createMaterialBottomTabNavigator();

export const BottomTabs = () => {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      shifting={true}
      sceneAnimationEnabled={false}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarIcon: 'home-account',
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarIcon: 'bell-outline',
        }}
      />
      <Tab.Screen
        name="Messages"
        component={Messages}
        options={{
          tabBarIcon: 'message-text-outline',
        }}
      />
    </Tab.Navigator>
  );
};
```

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

### Define Drawer Styles with StyleSheet

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

This code defines a StyleSheet object used to style a custom drawer component in React Navigation. It includes properties for layout, spacing, and typography to ensure consistent UI design.

```javascript
const styles = StyleSheet.create({
  drawerContent: {
    flex: 1,
  },
  userInfoSection: {
    paddingLeft: 20,
  },
  title: {
    marginTop: 20,
    fontWeight: 'bold',
  },
  caption: {
    fontSize: 14,
    lineHeight: 14,
  },
  row: {
    marginTop: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 15,
  },
  paragraph: {
    fontWeight: 'bold',
    marginRight: 3,
  },
  drawerSection: {
    marginTop: 15,
  },
  preference: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
});
```

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

### Configure Deep Linking with Static API

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-03-25-introducing-static-api.md

Demonstrates defining deep linking paths directly within the navigation configuration and enabling automatic path generation.

```javascript
const RootStack = createStackNavigator({
  screens: {
    Profile: {
      screen: ProfileScreen,
      linking: { path: 'user/:id' },
    },
    Settings: {
      screen: SettingsScreen,
      linking: { path: 'settings' },
    },
  },
});
```

```javascript
const Navigation = createStaticNavigation(RootStack);

function App() {
  return (
    <Navigation
      linking={{
        prefixes: ['https://example.com', 'example://'],
        enabled: 'auto',
      }}
    />
  );
}
```

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

### Configure Inactive Screen Behavior in React Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-03-10-react-navigation-8.0-march-progress.md

This example demonstrates how to configure the `inactiveBehavior` option for navigators in React Navigation. This option controls how unfocused screens are handled, offering 'pause', 'unmount', or 'none' states to manage memory usage and screen state.

```javascript
screenOptions: {
  inactiveBehavior: 'pause',
}
```

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

### Material Top Tab Navigator with Native Backends

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-02-06-react-navigation-5.0.md

Demonstrates using native backends for the Material top tab navigator, leveraging react-native-viewpager and ScrollView for improved performance and native feel. This allows for a more integrated user experience.

```javascript
import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter';

// ...

<Tab.Navigator pager={props => <ViewPagerAdapter {...props} />}>
  {...}
</Tab.Navigator>
```

```javascript
import { ScrollPager } from 'react-native-tab-view';

// ...

<Tab.Navigator pager={props => <ScrollPager {...props} />}>
  {...}
</Tab.Navigator>
```

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

### Combine and Apply Themes in React Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

This snippet shows how to combine themes from React Navigation and React Native Paper and conditionally apply them based on a state variable. It sets up the root component to manage the theme state and pass the appropriate theme to PaperProvider and NavigationContainer.

```jsx
import * as React from 'react';
import {
  NavigationContainer,
  DefaultTheme as NavigationDefaultTheme,
  DarkTheme as NavigationDarkTheme,
} from '@react-navigation/native';
import {
  DarkTheme as PaperDarkTheme,
  DefaultTheme as PaperDefaultTheme,
  Provider as PaperProvider,
} from 'react-native-paper';

const CombinedDefaultTheme = {
  ...PaperDefaultTheme,
  ...NavigationDefaultTheme,
};
const CombinedDarkTheme = { ...PaperDarkTheme, ...NavigationDarkTheme };

export default function Main() {
  const [isDarkTheme, setIsDarkTheme] = React.useState(false);

  const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme; // Use Light/Dark theme based on a state

  function toggleTheme() {
    // We will pass this function to Drawer and invoke it on theme switch press
    setIsDarkTheme((isDark) => !isDark);
  }

  return (
    <PaperProvider theme={theme}>
      <NavigationContainer theme={theme}>{/* content */}</NavigationContainer>
    </PaperProvider>
  );
}
```

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

### Orchestrating Zoom Transition with Options

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2026-04-27-building-custom-screen-transitions.md

Configure screen options to orchestrate the zoom transition. This involves setting the screenStyleInterpolator to use the navigation.zoom() helper with the correct ID.

```tsx
const RootStack = createBlankStackNavigator({
  screens: {
    Feed: FeedScreen,
    Detail: {
      screen: DetailScreen,
      options: ({ route }) => {
        const zoomId = route.params.id;

        return {
          navigationMaskEnabled: Platform.OS === 'ios',
          gestureEnabled: true,
          gestureDirection: ['vertical', 'vertical-inverted', 'horizontal'],
          gestureDrivesProgress: false,
          transitionSpec: {
            open: Transition.Specs.DefaultSpec,
            close: Transition.Specs.FlingSpec,
          },
          screenStyleInterpolator: ({ bounds }) => {
            'worklet';

            return bounds({ id: zoomId }).navigation.zoom({
              target: 'bound',
            });
          },
        };
      },
    },
  },
});
```

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

### Configure TypeScript for Static Navigation

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2024-03-25-introducing-static-api.md

Shows how to infer parameter types from a static navigator using the StaticParamList utility for global type safety.

```typescript
declare global {
  namespace ReactNavigation {
    interface RootParamList extends StaticParamList<typeof RootStack> {}
  }
}
```

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

### Navigate with Key in StackNavigator (React Navigation)

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2018-05-07-react-navigation-2.0.md

In React Navigation 2.0, the `navigate` function in `StackNavigator` has changed behavior. To push a new route every time, you can now use `push` or specify a unique `key` with `navigate`. This example demonstrates using a key to ensure a new route instance is created.

```javascript
this.props.navigation.navigate({
  routeName: 'MyRoute',
  key: data.uniqueId,
  params: data
});
```

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

### Customize Stack Navigator with Paper Appbar

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Implements a custom header component using React Native Paper's Appbar, integrated into the Stack Navigator via screenOptions. It handles navigation logic like back actions and drawer toggling using the navigation prop.

```jsx
import React from 'react';
import { TouchableOpacity } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { Appbar, Avatar } from 'react-native-paper';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import { Feed } from './feed';
import { Details } from './details';

const Header = ({ scene, previous, navigation }) => {
  const { options } = scene.descriptor;
  const title = options.headerTitle !== undefined ? options.headerTitle : options.title !== undefined ? options.title : scene.route.name;

  return (
    <Appbar.Header theme={{ colors: { primary: theme.colors.surface } }}>
      {previous ? (
        <Appbar.BackAction
          onPress={navigation.pop}
          color={theme.colors.primary}
        />
      ) : (
        <TouchableOpacity onPress={() => { navigation.openDrawer(); }}>
          <Avatar.Image
            size={40}
            source={{ uri: 'https://pbs.twimg.com/profile_images/952545910990495744/b59hSXUd_400x400.jpg' }}
          />
        </TouchableOpacity>
      )}
      <Appbar.Content
        title={previous ? title : <MaterialCommunityIcons name="twitter" size={40} />}
      />
    </Appbar.Header>
  );
};

export const FeedStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="FeedList"
      headerMode="screen"
      screenOptions={{
        header: ({ scene, previous, navigation }) => (
          <Header scene={scene} previous={previous} navigation={navigation} />
        ),
      }}
    >
      <Stack.Screen name="Feed" component={Feed} options={{ headerTitle: 'Twitter' }} />
      <Stack.Screen name="Details" component={Details} options={{ headerTitle: 'Tweet' }} />
    </Stack.Navigator>
  );
};
```

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

### Conditionally Render FAB based on Navigation Route

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Demonstrates how to access the route object within a BottomTabs navigator to conditionally update a Floating Action Button's icon based on the active screen. It utilizes React Navigation's route props and React Native Paper's Portal and FAB components.

```jsx
import React from 'react';
import color from 'color';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Portal, FAB } from 'react-native-paper';
import { useIsFocused } from '@react-navigation/native';

import { Feed } from './feed';
import { Message } from './message';
import { Notifications } from './notifications';

const Tab = createMaterialBottomTabNavigator();

export const BottomTabs = (props) => {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
  const isFocused = useIsFocused();

  let icon = 'feather';

  switch (routeName) {
    case 'Messages':
      icon = 'email-plus-outline';
      break;
    default:
      icon = 'feather';
      break;
  }

  return (
    <React.Fragment>
      <Tab.Navigator initialRouteName="Feed" shifting={true}>
        <Tab.Screen name="Feed" component={Feed} options={{ tabBarIcon: 'home-account', tabBarColor }} />
        <Tab.Screen name="Notifications" component={Notifications} options={{ tabBarIcon: 'bell-outline', tabBarColor }} />
        <Tab.Screen name="Messages" component={Message} options={{ tabBarIcon: 'message-text-outline', tabBarColor }} />
      </Tab.Navigator>
      <Portal>
        <FAB visible={isFocused} icon={icon} style={{ position: 'absolute', bottom: 100, right: 16 }} color="white" />
      </Portal>
    </React.Fragment>
  );
};
```

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

### Implement Theme Switch in Drawer Content

Source: https://github.com/react-navigation/react-navigation.github.io/blob/main/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

This code snippet illustrates how to create a theme switch within the React Navigation drawer. It uses React Native Paper's `useTheme`, `TouchableRipple`, and `Switch` components to display the current theme status and allow users to toggle between light and dark themes by invoking a provided `toggleTheme` function.

```jsx
import React from 'react';
import { View } from 'react-native';
import { DrawerContentScrollView } from '@react-navigation/drawer';
import {
  useTheme,
  Avatar,
  Drawer,
  Text,
  TouchableRipple,
  Switch,
} from 'react-native-paper';

export function DrawerContent(props) {
  const paperTheme = useTheme();

  return (
    <DrawerContentScrollView {...props}>
      /* {...other - content} */
      <Drawer.Section title="Preferences">
        <TouchableRipple onPress={props.toggleTheme}>
          <View style={styles.preference}>
            <Text>Dark Theme</Text>
            <View pointerEvents="none">
              <Switch value={theme.dark} />
            </View>
          </View>
        </TouchableRipple>
      </Drawer.Section>
    </DrawerContentScrollView>
  );
}
```