Skip to content

Commit 5679298

Browse files
satya164satya164
authored
chore: upgrade example to react navigation 8 alpha (#4948)
1 parent 3920cf0 commit 5679298

20 files changed

Lines changed: 277 additions & 224 deletions

‎docs/docs/guides/02-theming.mdx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -307,16 +307,19 @@ Valid `themes` keys are:
307307
```ts
308308
// App.tsx
309309
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
310-
import { createStackNavigator } from '@react-navigation/stack';
310+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
311311
import {
312312
PaperProvider,
313313
MD3LightTheme,
314314
adaptNavigationTheme,
315315
} from 'react-native-paper';
316-
const Stack = createStackNavigator();
316+
317+
const Stack = createNativeStackNavigator();
318+
317319
const { LightTheme } = adaptNavigationTheme({
318320
reactNavigationLight: DefaultTheme,
319321
});
322+
320323
export default function App() {
321324
return (
322325
<PaperProvider theme={MD3LightTheme}>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ But how to make them work together?
1313

1414
### Material Design 3
1515

16-
React Native Paper follows the Material Design 3 <i>(Material You)</i> color system, which differs from React Navigation’s default theme shape.
16+
React Native Paper follows the Material Design 3 <i>(Material You)</i> color system, which differs from React Navigation’s default theme shape.
1717

1818
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.
1919

@@ -47,7 +47,7 @@ For React Native Paper theme to work, we need to use `PaperProvider` also at the
4747

4848
```js
4949
import { NavigationContainer } from '@react-navigation/native';
50-
import { createStackNavigator } from '@react-navigation/stack';
50+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
5151
import { TouchableOpacity } from 'react-native';
5252
import {
5353
Card,
@@ -56,7 +56,7 @@ import {
5656
PaperProvider,
5757
} from 'react-native-paper';
5858

59-
const Stack = createStackNavigator();
59+
const Stack = createNativeStackNavigator();
6060

6161
const HomeScreen = ({ navigation }) => (
6262
<TouchableOpacity

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ title: Integrate AppBar with React Navigation
88

99
- `react-native-paper`
1010
- `react-navigation`
11-
11+
1212
We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.
13-
13+
1414
[React Native Paper - Getting Started](https://callstack.github.io/react-native-paper/docs/guides/getting-started)
15-
15+
1616
[React Navigation - Getting Started](https://reactnavigation.org/docs/getting-started/)
1717

1818
## Stack Navigator
@@ -26,9 +26,9 @@ Let's create two screens. A main screen named `Home` and details screen named `D
2626
import 'react-native-gesture-handler';
2727
import React from 'react';
2828
import { NavigationContainer } from '@react-navigation/native';
29-
import { createStackNavigator } from '@react-navigation/stack';
29+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
3030

31-
const Stack = createStackNavigator();
31+
const Stack = createNativeStackNavigator();
3232

3333
export default function App() {
3434
return (
@@ -276,6 +276,6 @@ Final result:
276276

277277
<img src="/react-native-paper/screenshots/react-navigation-appBar4.gif" width="300" />
278278

279-
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.
279+
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.
280280

281281
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‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
"dependencies": {
1414
"@react-native-async-storage/async-storage": "2.2.0",
1515
"@react-native-masked-view/masked-view": "0.3.2",
16-
"@react-navigation/bottom-tabs": "^7.3.10",
17-
"@react-navigation/drawer": "^7.3.9",
18-
"@react-navigation/native": "^7.1.6",
19-
"@react-navigation/stack": "^7.2.10",
16+
"@react-navigation/bottom-tabs": "^8.0.0-alpha.30",
17+
"@react-navigation/drawer": "^8.0.0-alpha.31",
18+
"@react-navigation/native": "^8.0.0-alpha.25",
19+
"@react-navigation/native-stack": "^8.0.0-alpha.31",
2020
"expo": "~56.0.0-preview.11",
2121
"expo-crypto": "~56.0.3",
2222
"expo-dev-client": "~56.0.9",

‎example/src/ExampleList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { FlatList } from 'react-native';
33

4-
import type { StackNavigationProp } from '@react-navigation/stack';
4+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
55
import { Divider, List, useTheme } from 'react-native-paper';
66
import { useSafeAreaInsets } from 'react-native-safe-area-context';
77

@@ -115,7 +115,7 @@ export const examples: Record<
115115
};
116116

117117
type Props = {
118-
navigation: StackNavigationProp<{ [key: string]: undefined }>;
118+
navigation: NativeStackNavigationProp<{ [key: string]: undefined }>;
119119
};
120120

121121
type Item = {

‎example/src/Examples/AppbarExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Platform, StyleSheet, View } from 'react-native';
33

4-
import type { StackNavigationProp } from '@react-navigation/stack';
4+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
55
import {
66
Appbar,
77
FAB,
@@ -18,7 +18,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
1818
import ScreenWrapper from '../ScreenWrapper';
1919

2020
type Props = {
21-
navigation: StackNavigationProp<{}>;
21+
navigation: NativeStackNavigationProp<{}>;
2222
};
2323

2424
type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';

‎example/src/Examples/BottomNavigationBarExample.tsx‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React from 'react';
2-
import { View, StyleSheet } from 'react-native';
2+
import { View, StyleSheet, Image } from 'react-native';
33

44
import Icon from '@react-native-vector-icons/material-design-icons';
55
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
6-
import { CommonActions } from '@react-navigation/native';
6+
import {
7+
CommonActions,
8+
SFSymbol,
9+
MaterialSymbol,
10+
} from '@react-navigation/native';
711
import { Text, BottomNavigation } from 'react-native-paper';
812

913
const Tab = createBottomTabNavigator();
@@ -30,10 +34,9 @@ export default function BottomNavigationBarExample() {
3034
screenOptions={{
3135
headerShown: false,
3236
}}
33-
tabBar={({ navigation, state, descriptors, insets }) => (
37+
tabBar={({ navigation, state, descriptors }) => (
3438
<BottomNavigation.Bar
3539
navigationState={state}
36-
safeAreaInsets={insets}
3740
onTabPress={({ route, preventDefault }) => {
3841
const event = navigation.emit({
3942
type: 'tabPress',
@@ -50,13 +53,54 @@ export default function BottomNavigationBarExample() {
5053
});
5154
}
5255
}}
53-
renderIcon={({ route, focused, color }) =>
54-
descriptors[route.key].options.tabBarIcon?.({
55-
focused,
56-
color: typeof color === 'string' ? color : '',
57-
size: 24,
58-
}) || null
59-
}
56+
renderIcon={({ route, focused, color }) => {
57+
const tabBarIcon = descriptors[route.key].options.tabBarIcon;
58+
59+
const size = 24;
60+
const icon =
61+
typeof tabBarIcon === 'function'
62+
? tabBarIcon({ focused, color, size })
63+
: tabBarIcon;
64+
65+
if (icon == null) {
66+
return null;
67+
}
68+
69+
if (React.isValidElement(icon)) {
70+
return icon;
71+
}
72+
73+
if (typeof icon === 'object' && icon !== null && 'type' in icon) {
74+
switch (icon.type) {
75+
case 'sfSymbol':
76+
return (
77+
<SFSymbol name={icon.name} size={size} color={color} />
78+
);
79+
case 'materialSymbol':
80+
return (
81+
<MaterialSymbol
82+
name={icon.name}
83+
size={size}
84+
color={color}
85+
/>
86+
);
87+
case 'image':
88+
return (
89+
<Image
90+
accessibilityIgnoresInvertColors
91+
source={icon.source}
92+
resizeMode="contain"
93+
fadeDuration={0}
94+
style={{ width: size, height: size, tintColor: color }}
95+
/>
96+
);
97+
}
98+
}
99+
100+
throw new Error(
101+
'Tab bar icon is not a valid React element, SFSymbol, MaterialSymbol, or Image.'
102+
);
103+
}}
60104
getLabelText={({ route }) => descriptors[route.key].route.name}
61105
/>
62106
)}

‎example/src/Examples/BottomNavigationExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
View,
99
} from 'react-native';
1010

11-
import type { StackNavigationProp } from '@react-navigation/stack';
11+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
1212
import {
1313
Appbar,
1414
BottomNavigation,
@@ -22,7 +22,7 @@ import ScreenWrapper from '../ScreenWrapper';
2222
type Route = { route: { key: string } };
2323

2424
type Props = {
25-
navigation: StackNavigationProp<{}>;
25+
navigation: NativeStackNavigationProp<{}>;
2626
};
2727

2828
const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

‎example/src/Examples/MenuExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
View,
77
} from 'react-native';
88

9-
import type { StackNavigationProp } from '@react-navigation/stack';
9+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
1010
import {
1111
Appbar,
1212
Button,
@@ -21,7 +21,7 @@ import ScreenWrapper from '../ScreenWrapper';
2121
type ContextualMenuCoord = { x: number; y: number };
2222

2323
type Props = {
24-
navigation: StackNavigationProp<{}>;
24+
navigation: NativeStackNavigationProp<{}>;
2525
};
2626

2727
type MenuVisibility = {

‎example/src/Examples/SearchbarExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { Keyboard, StyleSheet } from 'react-native';
33

44
import type { DrawerNavigationProp } from '@react-navigation/drawer';
5-
import type { StackNavigationProp } from '@react-navigation/stack';
5+
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
66
import {
77
Avatar,
88
List,
@@ -15,7 +15,7 @@ import {
1515
import ScreenWrapper from '../ScreenWrapper';
1616

1717
type Props = {
18-
navigation: StackNavigationProp<{}>;
18+
navigation: NativeStackNavigationProp<{}>;
1919
};
2020

2121
const SearchExample = ({ navigation }: Props) => {

0 commit comments

Comments
 (0)