Cut 8.x docs

Author: satya164

versioned_docs/version-8.x/auth-flow.md

@@ -0,0 +1,215 @@
+---
+id: combine-static-with-dynamic
+title: Combining static and dynamic APIs
+sidebar_label: Static and dynamic APIs
+---
+
+While the static API has many advantages, it doesn't fit use cases where the navigation configuration needs to be dynamic. So React Navigation supports interop between the static and dynamic APIs.
+
+Keep in mind that the features provided by the static API such as automatic linking configuration and automatic TypeScript types need the whole configuration to be static. If part of the configuration is dynamic, you'll need to handle those parts manually.
+
+There are 2 ways you may want to combine the static and dynamic APIs:
+
+## Static root navigator, dynamic nested navigator
+
+This is useful if you want to keep your configuration static, but need to use a dynamic configuration for a specific navigator.
+
+Let's consider the following example:
+
+- You have a root stack navigator that contains a tab navigator in a screen.
+- The tab navigator is defined using the dynamic API.
+
+Our static configuration would look like this:
+
+```js
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+    },
+    Feed: {
+      screen: FeedScreen,
+      linking: {
+        path: 'feed',
+      },
+    },
+  },
+});
+```
+
+Here, `FeedScreen` is a component that renders a tab navigator and is defined using the dynamic API:
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+function FeedScreen() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Latest" component={LatestScreen} />
+      <Tab.Screen name="Popular" component={PopularScreen} />
+    </Tab.Navigator>
+  );
+}
+```
+
+This code will work, but we're missing 2 things:
+
+- Linking configuration for the screens in the top tab navigator.
+- TypeScript types for the screens in the top tab navigator.
+
+Since the nested navigator is defined using the dynamic API, we need to handle these manually. For the linking configuration, we can define the screens in the `linking` property of the `Feed` screen:
+
+```js
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const RootStack = createNativeStackNavigator({
+  screens: {
+    Home: {
+      screen: HomeScreen,
+    },
+    Feed: {
+      screen: FeedScreen,
+      linking: {
+        path: 'feed',
+        // highlight-start
+        screens: {
+          Latest: 'latest',
+          Popular: 'popular',
+        },
+        // highlight-end
+      },
+    },
+  },
+});
+```
+
+Here the `screens` property is the same as how you'd define it with `linking` config with the dynamic API. It can contain configuration for any nested navigators as well. See [configuring links](configuring-links.md) for more details on the API.
+
+For the TypeScript types, we can define the type of the `FeedScreen` component:
+
+```tsx
+import {
+  StaticScreenProps,
+  NavigatorScreenParams,
+} from '@react-navigation/native';
+
+type FeedParamList = {
+  Latest: undefined;
+  Popular: undefined;
+};
+
+// highlight-next-line
+type Props = StaticScreenProps<NavigatorScreenParams<FeedParamList>>;
+
+// highlight-next-line
+function FeedScreen(_: Props) {
+  // ...
+}
+```
+
+In the above snippet:
+
+1. We first define the param list type for screens in the navigator that defines params for each screen
+2. Then we use the `NavigatorScreenParams` type to get the type of route's `params` which will include types for the nested screens
+3. Finally, we use the type of `params` with `StaticScreenProps` to define the type of the screen component
+
+This is based on how we'd define the type for a screen with a nested navigator with the dynamic API. See [Type checking screens and params in nested navigator](typescript.md#type-checking-screens-and-params-in-nested-navigator).
+
+## Dynamic root navigator, static nested navigator
+
+This is useful if you already have a dynamic configuration, but want to migrate to the static API. This way you can migrate one navigator at a time.
+
+Let's consider the following example:
+
+- You have a root stack navigator that contains a tab navigator in a screen.
+- The root stack navigator is defined using the dynamic API.
+
+Our dynamic configuration would look like this:
+
+```js
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const RootStack = createNativeStackNavigator();
+
+function RootStackScreen() {
+  return (
+    <RootStack.Navigator>
+      <RootStack.Screen name="Home" component={HomeScreen} />
+      <RootStack.Screen name="Feed" component={FeedScreen} />
+    </RootStack.Navigator>
+  );
+}
+```
+
+Here, `FeedScreen` is a component that renders a tab navigator and is defined using the static API:
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const FeedTabs = createBottomTabNavigator({
+  screens: {
+    Latest: {
+      screen: LatestScreen,
+    },
+    Popular: {
+      screen: PopularScreen,
+    },
+  },
+});
+```
+
+To use the `FeedTabs` navigator for the `Feed` screen, we need to use the `createComponentForStaticNavigation` function:
+
+```js
+import { createComponentForStaticNavigation } from '@react-navigation/native';
+
+// highlight-next-line
+const FeedScreen = createComponentForStaticNavigation(FeedTabs, 'Feed');
+```
+
+In addition, we can generate the TypeScript types for the `FeedTabs` navigator and use it in the types of `RootStack` without needing to write them manually:
+
+```tsx
+import {
+  StaticParamList,
+  NavigatorScreenParams,
+} from '@react-navigation/native';
+
+// highlight-next-line
+type FeedTabsParamList = StaticParamList<typeof FeedTabs>;
+
+type RootStackParamList = {
+  Home: undefined;
+  // highlight-next-line
+  Feed: NavigatorScreenParams<FeedTabsParamList>;
+};
+```
+
+Similarly, we can generate the linking configuration for the `FeedTabs` navigator and use it in the linking configuration passed to `NavigationContainer`:
+
+```js
+import { createPathConfigForStaticNavigation } from '@react-navigation/native';
+
+// highlight-next-line
+const feedScreens = createPathConfigForStaticNavigation(FeedTabs);
+
+const linking = {
+  prefixes: ['https://example.com', 'example://'],
+  config: {
+    screens: {
+      Home: '',
+      Feed: {
+        path: 'feed',
+        // highlight-next-line
+        screens: feedScreens,
+      },
+    },
+  },
+};
+```
+
+This will generate the linking configuration for the `Feed` screen based on the configuration of the `FeedTabs` navigator.

versioned_docs/version-8.x/bottom-tab-navigator.md

@@ -0,0 +1,31 @@
+---
+id: community-libraries
+title: Community libraries
+sidebar_label: Community libraries
+---
+
+This guide lists various community libraries that can be used alongside React Navigation to enhance its functionality.
+
+:::note
+
+Please refer to the library's documentation to see which version of React Navigation it supports.
+
+:::
+
+## react-native-screen-transitions
+
+A library that provides customizable screen transition animations for React Navigation's [Native Stack Navigator](native-stack-navigator.md).
+
+[Repository](https://github.com/eds2002/react-native-screen-transitions)
+
+### react-navigation-header-buttons
+
+Helps you to render buttons in the navigation bar and handle the styling so you don't have to. It tries to mimic the appearance of native navbar buttons and attempts to offer a simple interface for you to interact with.
+
+[Repository](https://github.com/vonovak/react-navigation-header-buttons)
+
+### react-navigation-props-mapper
+
+Provides simple HOCs that map react-navigation props to your screen components directly - ie. instead of `const user = this.props.route.params.activeUser`, you'd write `const user = this.props.activeUser`.
+
+[Repository](https://github.com/vonovak/react-navigation-props-mapper)

versioned_docs/version-8.x/combine-static-with-dynamic.md

@@ -0,0 +1,31 @@
+---
+id: community-navigators
+title: Community navigators
+sidebar_label: Community navigators
+---
+
+This guide lists various community navigators for React Navigation. These navigators offer provide UI components for navigation with the familiar React Navigation API.
+
+If you're looking to build your own navigator, check out the [custom navigators guide](custom-navigators.md).
+
+:::note
+
+Please refer to the library's documentation to see which version of React Navigation it supports.
+
+:::
+
+## React Native Bottom Tabs
+
+This project aims to expose the native Bottom Tabs component to React Native. It exposes SwiftUI's TabView on iOS and the material design tab bar on Android. Using `react-native-bottom-tabs` can bring several benefits, including multi-platform support and a native-feeling tab bar.
+
+[Documentation](https://oss.callstack.com/react-native-bottom-tabs/)
+
+[Repository](https://github.com/callstackincubator/react-native-bottom-tabs)
+
+## BottomNavigation - React Native Paper
+
+The library provides React Navigation integration for its Material Bottom Tabs. Material Bottom Tabs is a material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation.
+
+[Documentation](https://callstack.github.io/react-native-paper/docs/guides/bottom-navigation/)
+
+[Repository](https://github.com/callstack/react-native-paper)

versioned_docs/version-8.x/community-libraries.md

@@ -0,0 +1,35 @@
+---
+id: community-solutions
+title: Community solutions
+sidebar_label: Community solutions
+---
+
+This guide lists various community navigation solutions built on top of React Navigation that offer a different API or complement React Navigation in some way.
+
+:::note
+
+Please refer to the library's documentation to see which version of React Navigation it supports.
+
+:::
+
+## Expo Router
+
+Expo Router is a file-based router for React Native and web applications built by the Expo team.
+
+[Documentation](https://docs.expo.dev/router/introduction/)
+
+[Repository](https://github.com/expo/expo/tree/main/packages/expo-router)
+
+## Solito
+
+A wrapper around React Navigation and Next.js that lets you share navigation code across platforms. Also, it provides a set of patterns and examples for building cross-platform apps with React Native + Next.js.
+
+[Documentation](https://solito.dev/)
+
+[Repository](https://github.com/nandorojo/solito)
+
+## Navio
+
+Navio provides a different API for React Navigation. It's main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion.
+
+[Repository](https://github.com/kanzitelli/rn-navio)