chore: upgrade example to react navigation 8 alpha

docs/docs/guides/02-theming.mdx

@@ -307,16 +307,19 @@ Valid `themes` keys are:
 ```ts
 // App.tsx
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   PaperProvider,
   MD3LightTheme,
   adaptNavigationTheme,
 } from 'react-native-paper';
-const Stack = createStackNavigator();
+
+const Stack = createNativeStackNavigator();
+
 const { LightTheme } = adaptNavigationTheme({
   reactNavigationLight: DefaultTheme,
 });
+
 export default function App() {
   return (
     <PaperProvider theme={MD3LightTheme}>

docs/docs/guides/08-theming-with-react-navigation.md

@@ -13,7 +13,7 @@ But how to make them work together?
 
 ### Material Design 3
 
-React Native Paper follows the Material Design 3 <i>(Material You)</i> color system, which differs from React Navigation’s default theme shape. 
+React Native Paper follows the Material Design 3 <i>(Material You)</i> color system, which differs from React Navigation’s default theme shape.
 
 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.
 
@@ -47,7 +47,7 @@ For React Native Paper theme to work, we need to use `PaperProvider` also at the
 
 ```js
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { TouchableOpacity } from 'react-native';
 import {
   Card,
@@ -56,7 +56,7 @@ import {
   PaperProvider,
 } from 'react-native-paper';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const HomeScreen = ({ navigation }) => (
   <TouchableOpacity

docs/docs/guides/09-react-navigation.md

@@ -8,11 +8,11 @@ title: Integrate AppBar with 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/)
 
 ## Stack Navigator
@@ -26,9 +26,9 @@ Let's create two screens. A main screen named `Home` and details screen named `D
 import 'react-native-gesture-handler';
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
@@ -276,6 +276,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!

example/package.json

@@ -13,10 +13,10 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-masked-view/masked-view": "0.3.2",
-    "@react-navigation/bottom-tabs": "^7.3.10",
-    "@react-navigation/drawer": "^7.3.9",
-    "@react-navigation/native": "^7.1.6",
-    "@react-navigation/stack": "^7.2.10",
+    "@react-navigation/bottom-tabs": "^8.0.0-alpha.30",
+    "@react-navigation/drawer": "^8.0.0-alpha.31",
+    "@react-navigation/native": "^8.0.0-alpha.25",
+    "@react-navigation/native-stack": "^8.0.0-alpha.31",
     "expo": "~56.0.0-preview.11",
     "expo-crypto": "~56.0.3",
     "expo-dev-client": "~56.0.9",

example/src/ExampleList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FlatList } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { Divider, List, useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -115,7 +115,7 @@ export const examples: Record<
 };
 
 type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
+  navigation: NativeStackNavigationProp<{ [key: string]: undefined }>;
 };
 
 type Item = {

example/src/Examples/AppbarExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
   Appbar,
   FAB,
@@ -18,7 +18,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
-  navigation: StackNavigationProp<{}>;
+  navigation: NativeStackNavigationProp<{}>;
 };
 
 type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';

example/src/Examples/BottomNavigationBarExample.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Image } from 'react-native';
 
 import Icon from '@react-native-vector-icons/material-design-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { CommonActions } from '@react-navigation/native';
+import {
+  CommonActions,
+  SFSymbol,
+  MaterialSymbol,
+} from '@react-navigation/native';
 import { Text, BottomNavigation } from 'react-native-paper';
 
 const Tab = createBottomTabNavigator();
@@ -30,10 +34,9 @@ export default function BottomNavigationBarExample() {
       screenOptions={{
         headerShown: false,
       }}
-      tabBar={({ navigation, state, descriptors, insets }) => (
+      tabBar={({ navigation, state, descriptors }) => (
         <BottomNavigation.Bar
           navigationState={state}
-          safeAreaInsets={insets}
           onTabPress={({ route, preventDefault }) => {
             const event = navigation.emit({
               type: 'tabPress',
@@ -50,13 +53,54 @@ export default function BottomNavigationBarExample() {
               });
             }
           }}
-          renderIcon={({ route, focused, color }) =>
-            descriptors[route.key].options.tabBarIcon?.({
-              focused,
-              color: typeof color === 'string' ? color : '',
-              size: 24,
-            }) || null
-          }
+          renderIcon={({ route, focused, color }) => {
+            const tabBarIcon = descriptors[route.key].options.tabBarIcon;
+
+            const size = 24;
+            const icon =
+              typeof tabBarIcon === 'function'
+                ? tabBarIcon({ focused, color, size })
+                : tabBarIcon;
+
+            if (icon == null) {
+              return null;
+            }
+
+            if (React.isValidElement(icon)) {
+              return icon;
+            }
+
+            if (typeof icon === 'object' && icon !== null && 'type' in icon) {
+              switch (icon.type) {
+                case 'sfSymbol':
+                  return (
+                    <SFSymbol name={icon.name} size={size} color={color} />
+                  );
+                case 'materialSymbol':
+                  return (
+                    <MaterialSymbol
+                      name={icon.name}
+                      size={size}
+                      color={color}
+                    />
+                  );
+                case 'image':
+                  return (
+                    <Image
+                      accessibilityIgnoresInvertColors
+                      source={icon.source}
+                      resizeMode="contain"
+                      fadeDuration={0}
+                      style={{ width: size, height: size, tintColor: color }}
+                    />
+                  );
+              }
+            }
+
+            throw new Error(
+              'Tab bar icon is not a valid React element, SFSymbol, MaterialSymbol, or Image.'
+            );
+          }}
           getLabelText={({ route }) => descriptors[route.key].route.name}
         />
       )}

example/src/Examples/BottomNavigationExample.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
   Appbar,
   BottomNavigation,
@@ -22,7 +22,7 @@ import ScreenWrapper from '../ScreenWrapper';
 type Route = { route: { key: string } };
 
 type Props = {
-  navigation: StackNavigationProp<{}>;
+  navigation: NativeStackNavigationProp<{}>;
 };
 
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

example/src/Examples/MenuExample.tsx

@@ -6,7 +6,7 @@ import {
   View,
 } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
   Appbar,
   Button,
@@ -21,7 +21,7 @@ import ScreenWrapper from '../ScreenWrapper';
 type ContextualMenuCoord = { x: number; y: number };
 
 type Props = {
-  navigation: StackNavigationProp<{}>;
+  navigation: NativeStackNavigationProp<{}>;
 };
 
 type MenuVisibility = {

example/src/Examples/SearchbarExample.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Keyboard, StyleSheet } from 'react-native';
 
 import type { DrawerNavigationProp } from '@react-navigation/drawer';
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
   Avatar,
   List,
@@ -15,7 +15,7 @@ import {
 import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
-  navigation: StackNavigationProp<{}>;
+  navigation: NativeStackNavigationProp<{}>;
 };
 
 const SearchExample = ({ navigation }: Props) => {

example/src/Examples/SegmentedButtonsExample.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { List } from 'react-native-paper';
 
 import {
@@ -17,7 +17,7 @@ import {
 import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
+  navigation: NativeStackNavigationProp<{ [key: string]: undefined }>;
 };
 
 const SegmentedButtonExample = ({ navigation }: Props) => {

example/src/Examples/TeamDetails.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
   Appbar,
   BottomNavigation,
@@ -47,7 +47,7 @@ type Route = {
 };
 
 type Props = {
-  navigation: StackNavigationProp<{}>;
+  navigation: NativeStackNavigationProp<{}>;
   route: Route;
 };
 

example/src/Examples/TeamsList.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import type { ParamListBase } from '@react-navigation/native';
-import type { StackScreenProps } from '@react-navigation/stack';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { DataTable } from 'react-native-paper';
 
 import { teamsList } from '../../utils';
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = StackScreenProps<ParamListBase>;
+type Props = NativeStackScreenProps<ParamListBase>;
 
 const TeamsList = ({ navigation }: Props) => {
   return (

example/src/Examples/ThemeExample.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import type { StackNavigationProp } from '@react-navigation/stack';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { List, PaperProvider, Banner } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
 type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
+  navigation: NativeStackNavigationProp<{ [key: string]: undefined }>;
 };
 
 const ThemeExample = ({ navigation }: Props) => {