Skip to content

Commit d226905

Browse files
lukewalczaklukewalczak
committed
chore: update example to navigation v7
1 parent 52eab5c commit d226905

File tree

6 files changed

+200
-164
lines changed

6 files changed

+200
-164
lines changed

‎example/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
"@pchmn/expo-material3-theme": "^1.3.2",
2020
"@react-native-async-storage/async-storage": "1.23.1",
2121
"@react-native-masked-view/masked-view": "0.3.2",
22-
"@react-navigation/bottom-tabs": "^6.6.1",
23-
"@react-navigation/drawer": "^6.7.2",
24-
"@react-navigation/native": "^6.1.18",
25-
"@react-navigation/stack": "^6.4.1",
22+
"@react-navigation/bottom-tabs": "^7.3.10",
23+
"@react-navigation/drawer": "^7.3.9",
24+
"@react-navigation/native": "^7.1.6",
25+
"@react-navigation/stack": "^7.2.10",
2626
"expo": "^52.0.0",
2727
"expo-crypto": "~14.0.1",
2828
"expo-dev-client": "~5.0.4",

‎example/src/Examples/ThemingWithReactNavigation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const HomeTab = () => {
5656

5757
function ThemingWithReactNavigation() {
5858
return (
59-
<Stack.Navigator initialRouteName="Home">
59+
<Stack.Navigator>
6060
<Stack.Screen name="React Navigation" component={HomeTab} />
6161
</Stack.Navigator>
6262
);

‎example/src/RootNavigator.tsx

+20-28
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22
import { Platform, StyleSheet, View } from 'react-native';
33

44
import type { DrawerNavigationProp } from '@react-navigation/drawer';
5-
import { getHeaderTitle } from '@react-navigation/elements';
65
import {
76
CardStyleInterpolators,
87
createStackNavigator,
@@ -21,33 +20,26 @@ export default function Root() {
2120
return (
2221
<View style={styles.stackWrapper}>
2322
<Stack.Navigator
24-
screenOptions={({ navigation }) => {
25-
return {
26-
detachPreviousScreen: !navigation.isFocused(),
27-
cardStyleInterpolator,
28-
header: ({ navigation, route, options, back }) => {
29-
const title = getHeaderTitle(options, route.name);
30-
return (
31-
<Appbar.Header elevated>
32-
{back ? (
33-
<Appbar.BackAction onPress={() => navigation.goBack()} />
34-
) : (navigation as any).openDrawer ? (
35-
<Appbar.Action
36-
icon="menu"
37-
isLeading
38-
onPress={() =>
39-
(
40-
navigation as any as DrawerNavigationProp<{}>
41-
).openDrawer()
42-
}
43-
/>
44-
) : null}
45-
<Appbar.Content title={title} />
46-
</Appbar.Header>
47-
);
48-
},
49-
};
50-
}}
23+
screenOptions={({ navigation }) => ({
24+
detachPreviousScreen: !navigation.isFocused(),
25+
cardStyleInterpolator,
26+
header: ({ navigation, route, options, back }) => (
27+
<Appbar.Header elevated>
28+
{back ? (
29+
<Appbar.BackAction onPress={() => navigation.goBack()} />
30+
) : (navigation as any).openDrawer ? (
31+
<Appbar.Action
32+
icon="menu"
33+
isLeading
34+
onPress={() =>
35+
(navigation as any as DrawerNavigationProp<{}>).openDrawer()
36+
}
37+
/>
38+
) : null}
39+
<Appbar.Content title={options.title || route.name} />
40+
</Appbar.Header>
41+
),
42+
})}
5143
>
5244
<Stack.Screen
5345
name="ExampleList"

‎example/src/index.native.tsx

+32-33
Original file line numberDiff line numberDiff line change
@@ -231,39 +231,38 @@ export default function PaperExample() {
231231
theme={customFontLoaded ? configuredFontTheme : theme}
232232
>
233233
<PreferencesContext.Provider value={preferences}>
234-
<React.Fragment>
235-
<NavigationContainer
236-
theme={combinedTheme}
237-
initialState={initialState}
238-
onStateChange={(state) =>
239-
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
240-
}
241-
>
242-
<SafeAreaInsetsContext.Consumer>
243-
{(insets) => {
244-
const { left, right } = insets || { left: 0, right: 0 };
245-
const collapsedDrawerWidth = 80 + Math.max(left, right);
246-
return (
247-
<Drawer.Navigator
248-
screenOptions={{
249-
drawerStyle: collapsed && {
250-
width: collapsedDrawerWidth,
251-
},
252-
}}
253-
drawerContent={() => <DrawerItems />}
254-
>
255-
<Drawer.Screen
256-
name="Home"
257-
component={App}
258-
options={{ headerShown: false }}
259-
/>
260-
</Drawer.Navigator>
261-
);
262-
}}
263-
</SafeAreaInsetsContext.Consumer>
264-
<StatusBar style={!theme.isV3 || theme.dark ? 'light' : 'dark'} />
265-
</NavigationContainer>
266-
</React.Fragment>
234+
<NavigationContainer
235+
// @ts-ignore - will be adjusted after merging https://github.com/callstack/react-native-paper/pull/4690
236+
theme={combinedTheme}
237+
initialState={initialState}
238+
onStateChange={(state) =>
239+
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
240+
}
241+
>
242+
<SafeAreaInsetsContext.Consumer>
243+
{(insets) => {
244+
const { left, right } = insets || { left: 0, right: 0 };
245+
const collapsedDrawerWidth = 100 + Math.max(left, right);
246+
return (
247+
<Drawer.Navigator
248+
screenOptions={{
249+
drawerStyle: collapsed && {
250+
width: collapsedDrawerWidth,
251+
},
252+
}}
253+
drawerContent={() => <DrawerItems />}
254+
>
255+
<Drawer.Screen
256+
name="Home"
257+
component={App}
258+
options={{ headerShown: false }}
259+
/>
260+
</Drawer.Navigator>
261+
);
262+
}}
263+
</SafeAreaInsetsContext.Consumer>
264+
<StatusBar style={!theme.isV3 || theme.dark ? 'light' : 'dark'} />
265+
</NavigationContainer>
267266
</PreferencesContext.Provider>
268267
</PaperProvider>
269268
);

‎example/src/index.tsx

+31-32
Original file line numberDiff line numberDiff line change
@@ -188,38 +188,37 @@ export default function PaperExample() {
188188
theme={customFontLoaded ? configuredFontTheme : theme}
189189
>
190190
<PreferencesContext.Provider value={preferences}>
191-
<React.Fragment>
192-
<NavigationContainer
193-
theme={combinedTheme}
194-
initialState={initialState}
195-
onStateChange={(state) =>
196-
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
197-
}
198-
>
199-
<SafeAreaInsetsContext.Consumer>
200-
{(insets) => {
201-
const { left, right } = insets || { left: 0, right: 0 };
202-
const collapsedDrawerWidth = 80 + Math.max(left, right);
203-
return (
204-
<Drawer.Navigator
205-
screenOptions={{
206-
drawerStyle: collapsed && {
207-
width: collapsedDrawerWidth,
208-
},
209-
}}
210-
drawerContent={() => <DrawerItems />}
211-
>
212-
<Drawer.Screen
213-
name="Home"
214-
component={App}
215-
options={{ headerShown: false }}
216-
/>
217-
</Drawer.Navigator>
218-
);
219-
}}
220-
</SafeAreaInsetsContext.Consumer>
221-
</NavigationContainer>
222-
</React.Fragment>
191+
<NavigationContainer
192+
// @ts-ignore - will be adjusted after merging https://github.com/callstack/react-native-paper/pull/4690
193+
theme={combinedTheme}
194+
initialState={initialState}
195+
onStateChange={(state) =>
196+
AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
197+
}
198+
>
199+
<SafeAreaInsetsContext.Consumer>
200+
{(insets) => {
201+
const { left, right } = insets || { left: 0, right: 0 };
202+
const collapsedDrawerWidth = 100 + Math.max(left, right);
203+
return (
204+
<Drawer.Navigator
205+
screenOptions={{
206+
drawerStyle: collapsed && {
207+
width: collapsedDrawerWidth,
208+
},
209+
}}
210+
drawerContent={() => <DrawerItems />}
211+
>
212+
<Drawer.Screen
213+
name="Home"
214+
component={App}
215+
options={{ headerShown: false }}
216+
/>
217+
</Drawer.Navigator>
218+
);
219+
}}
220+
</SafeAreaInsetsContext.Consumer>
221+
</NavigationContainer>
223222
</PreferencesContext.Provider>
224223
</PaperProvider>
225224
);

0 commit comments

Comments
 (0)