docs: combine navigation guides into one section

Author: lukewalczak

docs/docs/guides/08-theming-with-react-navigation.md renamed to docs/docs/guides/bottom-navigation/01-theming.md

@@ -1,5 +1,5 @@
 ---
-title: Theming with React Navigation
+title: Theming
 ---
 
 # Theming with React Navigation
@@ -21,15 +21,12 @@ import {
   DefaultTheme as NavigationDefaultTheme,
 } from '@react-navigation/native';
 
-import {
-  MD2LightTheme,
-  MD2DarkTheme,
-} from 'react-native-paper';
+import { MD2LightTheme, MD2DarkTheme } from 'react-native-paper';
 ```
 
 ### Material Design 3
 
-From v5, React Native Paper theme colors structure follows the Material Design 3 <i>(known as Material You)</i> colors system, which differs significantly from both the previous Paper's theme and React Navigation theme. 
+From v5, React Native Paper theme colors structure follows the Material Design 3 <i>(known as Material You)</i> colors system, which differs significantly from both the previous Paper's theme and React Navigation theme.
 
 However, to simplify adapting React Navigation theme colors, to use the ones from React Native Paper, it's worth using a utility called `adaptNavigationTheme` – it accepts navigation-compliant themes in both modes and returns their equivalents adjusted to Material Design 3.
 
@@ -49,10 +46,7 @@ const { LightTheme, DarkTheme } = adaptNavigationTheme({
 Library exports also Material Design 3 themes in both modes:
 
 ```js
-import {
-  MD3LightTheme,
-  MD3DarkTheme,
-} from 'react-native-paper';
+import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
 ```
 
 ## Combining theme objects
@@ -117,8 +111,6 @@ export default function App() {
 }
 ```
 
-
-
 Our goal here is to combine those two themes, so that we could control the theme for the entire application from a single place.
 
 To make things easier we can use [deepmerge](https://www.npmjs.com/package/deepmerge) package. We can install it with:
@@ -135,10 +127,7 @@ import {
   DarkTheme as NavigationDarkTheme,
   DefaultTheme as NavigationDefaultTheme,
 } from '@react-navigation/native';
-import {
-  MD2DarkTheme,
-  MD2LightTheme,
-} from 'react-native-paper';
+import { MD2DarkTheme, MD2LightTheme } from 'react-native-paper';
 import merge from 'deepmerge';
 
 const CombinedDefaultTheme = merge(MD2LightTheme, NavigationDefaultTheme);
@@ -331,19 +320,15 @@ const Header = ({ scene }) => {
       }}
     >
       <Appbar.Content title={scene.route?.name} />
-        <Switch
-          color={'red'}
-          value={isThemeDark}
-          onValueChange={toggleTheme}
-        />
+      <Switch color={'red'} value={isThemeDark} onValueChange={toggleTheme} />
     </Appbar.Header>
   );
 };
 ```
 
 And now you can switch between light and dark theme!
 
-![paperGuide1](../../static/screenshots/themingWithReactNavigationDarkLightSwitch.gif)
+![paperGuide1](../../../static/screenshots/themingWithReactNavigationDarkLightSwitch.gif)
 
 Thanks to the linking of themes that we did earlier, switching themes can be controlled with only one piece of state.
 

docs/docs/guides/09-react-navigation.md renamed to docs/docs/guides/bottom-navigation/02-appbar.md

@@ -1,19 +1,19 @@
 ---
-title: Integrate AppBar with React Navigation
+title: AppBar
 ---
 
 # Integrate AppBar with react-navigation
 
 ## Prerequisites
 
- - `react-native-paper`
- - `react-navigation`
- 
+- `react-native-paper`
+- `react-navigation`
+
 We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.
- 
- [React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
- 
- [React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
+
+[React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
+
+[React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
 
 ## Stack Navigator
 
@@ -46,7 +46,7 @@ At the moment our navigation stack contains two screens and will render `HomeScr
 
 ```js
 import React from 'react';
-import {View, Text, Button, StyleSheet} from 'react-native';
+import { View, Text, Button, StyleSheet } from 'react-native';
 
 function HomeScreen() {
   return (
@@ -120,7 +120,8 @@ export default function App() {
         initialRouteName="Home"
         screenOptions={{
           header: (props) => <CustomNavigationBar {...props} />,
-        }}>
+        }}
+      >
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Details" component={DetailsScreen} />
       </Stack.Navigator>
@@ -169,7 +170,12 @@ In order to achieve it, we firstly check, if the navigation bar receives a `back
 import { Appbar } from 'react-native-paper';
 import { getHeaderTitle } from '@react-navigation/elements';
 
-export default function CustomNavigationBar({ navigation, route, options, back }) {
+export default function CustomNavigationBar({
+  navigation,
+  route,
+  options,
+  back,
+}) {
   const title = getHeaderTitle(options, route.name);
 
   return (
@@ -186,6 +192,7 @@ export default function CustomNavigationBar({ navigation, route, options, back }
 ### Adding more items to `Appbar`
 
 Another interesting pattern that can be implemented with `react-native-paper` and `react-navigation` is a "menu" button. Thanks to the `Menu` component we can add a nice looking pop-up to our `Appbar`. To implement this feature we need to make a couple of changes in `CustomNavigationBar`:
+
 - Render a `Menu` component
 - Pass `Appbar.Action` to the anchor prop
 - Add a state to control `Menu` visibility
@@ -204,13 +211,15 @@ import { PaperProvider } from 'react-native-paper';
       initialRouteName="Home"
       screenOptions={{
         header: (props) => <CustomNavigationBar {...props} />,
-      }}>
+      }}
+    >
       <Stack.Screen name="Home" component={HomeScreen} />
       <Stack.Screen name="Details" component={DetailsScreen} />
     </Stack.Navigator>
   </NavigationContainer>
-</PaperProvider>
+</PaperProvider>;
 ```
+
 :::
 
 We also want the menu to appear only on `HomeScreen`, which means we will render it conditionally based on the `back` prop.
@@ -240,12 +249,8 @@ export default function CustomNavigationBar({
         <Menu
           visible={visible}
           onDismiss={closeMenu}
-          anchor={
-            <Appbar.Action
-              icon="dots-vertical"
-              onPress={openMenu}
-            />
-          }>
+          anchor={<Appbar.Action icon="dots-vertical" onPress={openMenu} />}
+        >
           <Menu.Item
             onPress={() => {
               console.log('Option 1 was pressed');
@@ -276,6 +281,6 @@ Final result:
 
 <img src="/react-native-paper/screenshots/react-navigation-appBar4.gif" width="300" />
 
-That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great. 
+That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design `Appbar` provided by `react-native-paper` used together with `react-navigation` we can easily create an app that looks and works great.
 
 Grab the Expo [snack](https://snack.expo.dev/@react-native-paper/integrate-appbar-with-react-navigation) if you want to check the whole code!

docs/docs/guides/bottom-navigation/03-bottom-navigation-bar.md

@@ -0,0 +1,76 @@
+---
+title: BottomNavigationBar
+---
+
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+# Using `BottomNavigation.Bar` with `@react-navigation/bottom-tabs`
+
+`BottomNavigation.Bar` is a Material Design compliant bottom navigation component that can be easily integrated with `@react-navigation/bottom-tabs`. It provides a consistent look and behavior following Material Design guidelines.
+
+:::info
+Before getting started, ensure you have installed [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started), then install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs):
+:::
+
+To implement `BottomNavigation.Bar` as your navigation's `tabBar`, refer to the example below. For a complete implementation, check out the Expo Snack demo provided after the example.
+
+## Example
+
+<Tabs>
+<TabItem value="static" label="Static" default>
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BottomNavigation } from 'react-native-paper';
+
+const MyTabs = createBottomTabNavigator({
+  screenOptions: {
+    animation: 'shift',
+  },
+  tabBar: ({ navigation, state, descriptors, insets }) => (
+    <BottomNavigation.Bar
+      ...
+    />
+  ),
+  screens: {
+    Home: HomeScreen,
+    Settings: SettingsScreen,
+  },
+});
+```
+
+> 👉 For a complete static example please visit `createBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/static---createbottomtabnavigator-with-bottomnavigationbar).
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```js
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BottomNavigation } from 'react-native-paper';
+
+const Tab = createBottomTabNavigator();
+
+function MyTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        animation: 'shift',
+      }}
+      tabBar={({ navigation, state, descriptors, insets }) => (
+        <BottomNavigation.Bar
+         ...
+        />
+      )}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}
+```
+
+> 👉 For a complete dynamic example please visit `createBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/dynamic---createbottomtabnavigator-with-bottomnavigationbar).
+
+</TabItem>
+</Tabs>

docs/docs/guides/09-bottom-navigation.md renamed to docs/docs/guides/bottom-navigation/04-material-bottom-tabs-navigator.md

@@ -1,40 +1,11 @@
 ---
-title: Using BottomNavigation with React Navigation
+title: Material Bottom Tabs Navigator
 ---
 
 :::caution
-`createMaterialBottomTabNavigator` has been deprecated since `[email protected]`. Please use `@react-navigation/bottom-tabs` version `7.x` or higher and combine it with `BottomNavigation.Bar` for a Material Design look.
-
-```js
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { BottomNavigation } from 'react-native-paper';
-
-const Tab = createBottomTabNavigator();
-
-function MyTabs() {
-  return (
-    <Tab.Navigator
-      tabBar={({ navigation, state, descriptors, insets }) => (
-        <BottomNavigation.Bar
-          ...
-        />
-      )}
-    >
-      <Tab.Screen name="Home" component={HomeScreen} />
-      <Tab.Screen name="Profile" component={ProfileScreen} />
-    </Tab.Navigator>
-  );
-}
-```
-
+The `createMaterialBottomTabNavigator` has been deprecated as of `[email protected]`. Instead, use `@react-navigation/bottom-tabs` version `7.x` or later, combined with `BottomNavigation.Bar` to achieve a Material Design look. Refer to the dedicated [guide](./03-bottom-navigation-bar.md) for an example.
 :::
 
-> 👉 For a complete example please visit `createBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/createbottomtabnavigator-with-bottomnavigationbar).
-
----
-
-_For projects using `react-native-paper` < `5.14.0` and `react-navigation` < `7.x`, proceed as follows:_
-
 A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. Routes are lazily initialized - their screen components are not mounted until they are first focused.
 
 This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/) component from `react-native-paper`, however if you [configure the Babel plugin](https://callstack.github.io/react-native-paper/docs/guides/getting-started/), it won't include the whole library in your bundle.
@@ -273,3 +244,7 @@ function MyTabs() {
   );
 }
 ```
+
+```
+
+```

docs/docs/guides/bottom-navigation/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Integration with React Navigation",
+  "position": 9
+}