Skip to content

Commit 316b9ae

Browse files
satya164satya164
authored
chore: migrate example to react navigation static config (#4965)
1 parent 08ecaeb commit 316b9ae

20 files changed

Lines changed: 529 additions & 726 deletions

‎.circleci/config.yml‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ version: 2.1
33
executors:
44
default:
55
docker:
6-
- image: cimg/node:20.19.0
6+
- image: cimg/node:22.15.0
77
working_directory: ~/react-native-paper
88

99
commands:
@@ -20,30 +20,17 @@ jobs:
2020
- attach_project
2121
- restore_cache:
2222
keys:
23-
- dependencies-{{ checksum "package.json" }}
23+
- dependencies-{{ checksum "yarn.lock" }}
2424
- dependencies-
25-
- restore_cache:
26-
keys:
27-
- dependencies-example-{{ checksum "example/package.json" }}
28-
- dependencies-example-
2925
- run:
3026
name: Install dependencies
3127
command: |
32-
sudo corepack enable
33-
yarn --cwd example --immutable
34-
yarn --cwd docs --immutable
3528
yarn --immutable
3629
- save_cache:
37-
key: dependencies-{{ checksum "package.json" }}
30+
key: dependencies-{{ checksum "yarn.lock" }}
3831
paths:
3932
- node_modules
40-
- save_cache:
41-
key: dependencies-docs-{{ checksum "docs/package.json" }}
42-
paths:
4333
- docs/node_modules
44-
- save_cache:
45-
key: dependencies-example-{{ checksum "example/package.json" }}
46-
paths:
4734
- example/node_modules
4835
- persist_to_workspace:
4936
root: .

‎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": "^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",
16+
"@react-navigation/bottom-tabs": "^8.0.0-alpha.33",
17+
"@react-navigation/drawer": "^8.0.0-alpha.34",
18+
"@react-navigation/native": "^8.0.0-alpha.28",
19+
"@react-navigation/native-stack": "^8.0.0-alpha.34",
2020
"expo": "~56.0.0",
2121
"expo-crypto": "~56.0.3",
2222
"expo-dev-client": "~56.0.13",

‎example/src/DrawerItems.tsx‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import * as React from 'react';
2-
import {
3-
ColorValue,
4-
I18nManager,
5-
Platform,
6-
StyleSheet,
7-
View,
8-
} from 'react-native';
2+
import { ColorValue, Platform, StyleSheet, View } from 'react-native';
93

104
import { DrawerContentScrollView } from '@react-navigation/drawer';
115
import Constants, { ExecutionEnvironment } from 'expo-constants';
12-
import * as Updates from 'expo-updates';
136
import {
147
Badge,
158
Button,
@@ -124,16 +117,12 @@ function DrawerItems() {
124117
} = preferences;
125118

126119
const _handleToggleRTL = () => {
127-
if (expoGoExecution) {
120+
if (!isWeb && expoGoExecution) {
128121
setShowRTLDialog(true);
129122
return;
130123
}
131124

132125
toggleRTL();
133-
I18nManager.forceRTL(!isRTL);
134-
if (isWeb) {
135-
Updates.reloadAsync();
136-
}
137126
};
138127

139128
const _handleDismissRTLDialog = () => {
@@ -206,16 +195,14 @@ function DrawerItems() {
206195
</View>
207196
</TouchableRipple>
208197

209-
{!isWeb && (
210-
<TouchableRipple onPress={_handleToggleRTL}>
211-
<View style={[styles.preference, styles.v3Preference]}>
212-
<Text variant="labelLarge">RTL</Text>
213-
<View pointerEvents="none">
214-
<Switch value={isRTL} />
215-
</View>
198+
<TouchableRipple onPress={_handleToggleRTL}>
199+
<View style={[styles.preference, styles.v3Preference]}>
200+
<Text variant="labelLarge">RTL</Text>
201+
<View pointerEvents="none">
202+
<Switch value={isRTL} />
216203
</View>
217-
</TouchableRipple>
218-
)}
204+
</View>
205+
</TouchableRipple>
219206

220207
<TouchableRipple onPress={toggleCollapsed}>
221208
<View style={[styles.preference, styles.v3Preference]}>

‎example/src/ExampleList.tsx‎

Lines changed: 69 additions & 85 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 { NativeStackNavigationProp } from '@react-navigation/native-stack';
4+
import { useNavigation } from '@react-navigation/native';
55
import { Divider, List, useTheme } from 'react-native-paper';
66
import { useSafeAreaInsets } from 'react-native-safe-area-context';
77

@@ -49,102 +49,76 @@ import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
4949
import ToggleButtonExample from './Examples/ToggleButtonExample';
5050
import TooltipExample from './Examples/TooltipExample';
5151
import TouchableRippleExample from './Examples/TouchableRippleExample';
52-
export const mainExamples: Record<
53-
string,
54-
React.ComponentType<any> & { title: string }
55-
> = {
56-
animatedFab: AnimatedFABExample,
57-
activityIndicator: ActivityIndicatorExample,
58-
appbar: AppbarExample,
59-
avatar: AvatarExample,
60-
badge: BadgeExample,
61-
banner: BannerExample,
62-
bottomNavigationBarExample: BottomNavigationBarExample,
63-
bottomNavigation: BottomNavigationExample,
64-
button: ButtonExample,
65-
card: CardExample,
66-
checkbox: CheckboxExample,
67-
checkboxItem: CheckboxItemExample,
68-
chip: ChipExample,
69-
dataTable: DataTableExample,
70-
dialog: DialogExample,
71-
divider: DividerExample,
72-
fab: FABExample,
73-
iconButton: IconButtonExample,
74-
icon: IconExample,
75-
listAccordion: ListAccordionExample,
76-
listAccordionGroup: ListAccordionExampleGroup,
77-
listSection: ListSectionExample,
78-
listItem: ListItemExample,
79-
menu: MenuExample,
80-
progressbar: ProgressBarExample,
81-
radio: RadioButtonExample,
82-
radioGroup: RadioButtonGroupExample,
83-
radioItem: RadioButtonItemExample,
84-
searchbar: SearchbarExample,
85-
segmentedButton: SegmentedButtonExample,
86-
snackbar: SnackbarExample,
87-
surface: SurfaceExample,
88-
switch: SwitchExample,
89-
text: TextExample,
90-
textInput: TextInputExample,
91-
toggleButton: ToggleButtonExample,
92-
tooltipExample: TooltipExample,
93-
touchableRipple: TouchableRippleExample,
94-
theme: ThemeExample,
95-
themingWithReactNavigation: ThemingWithReactNavigation,
52+
53+
export const mainExamples = {
54+
AnimatedFAB: AnimatedFABExample,
55+
ActivityIndicator: ActivityIndicatorExample,
56+
Appbar: AppbarExample,
57+
Avatar: AvatarExample,
58+
Badge: BadgeExample,
59+
Banner: BannerExample,
60+
BottomNavigationBarExample,
61+
BottomNavigation: BottomNavigationExample,
62+
Button: ButtonExample,
63+
Card: CardExample,
64+
Checkbox: CheckboxExample,
65+
CheckboxItem: CheckboxItemExample,
66+
Chip: ChipExample,
67+
DataTable: DataTableExample,
68+
Dialog: DialogExample,
69+
Divider: DividerExample,
70+
FAB: FABExample,
71+
IconButton: IconButtonExample,
72+
Icon: IconExample,
73+
ListAccordion: ListAccordionExample,
74+
ListAccordionGroup: ListAccordionExampleGroup,
75+
ListSection: ListSectionExample,
76+
ListItem: ListItemExample,
77+
Menu: MenuExample,
78+
Progressbar: ProgressBarExample,
79+
Radio: RadioButtonExample,
80+
RadioGroup: RadioButtonGroupExample,
81+
RadioItem: RadioButtonItemExample,
82+
Searchbar: SearchbarExample,
83+
SegmentedButton: SegmentedButtonExample,
84+
Snackbar: SnackbarExample,
85+
Surface: SurfaceExample,
86+
Switch: SwitchExample,
87+
Text: TextExample,
88+
TextInput: TextInputExample,
89+
ToggleButton: ToggleButtonExample,
90+
TooltipExample,
91+
TouchableRipple: TouchableRippleExample,
92+
Theme: ThemeExample,
93+
ThemingWithReactNavigation,
9694
};
9795

98-
export const nestedExamples: Record<
99-
string,
100-
React.ComponentType<any> & { title: string }
101-
> = {
102-
themingWithReactNavigation: ThemingWithReactNavigation,
103-
teamDetails: TeamDetails,
104-
teamsList: TeamsList,
105-
segmentedButtonRealCase: SegmentedButtonRealCase,
106-
segmentedButtonMultiselectRealCase: SegmentedButtonMultiselectRealCase,
96+
export const nestedExamples = {
97+
ThemingWithReactNavigation,
98+
TeamDetails,
99+
TeamsList,
100+
SegmentedButtonRealCase,
101+
SegmentedButtonMultiselectRealCase,
107102
};
108103

109-
export const examples: Record<
110-
string,
111-
React.ComponentType<any> & { title: string }
112-
> = {
104+
export const examples = {
113105
...mainExamples,
114106
...nestedExamples,
115107
};
116108

117-
type Props = {
118-
navigation: NativeStackNavigationProp<{ [key: string]: undefined }>;
119-
};
120-
121-
type Item = {
122-
id: string;
123-
data: (typeof mainExamples)[string];
124-
};
109+
type MainExampleId = keyof typeof mainExamples;
125110

126-
const data = Object.keys(mainExamples).map(
127-
(id): Item => ({ id, data: mainExamples[id] })
128-
);
111+
const data = (Object.keys(mainExamples) as MainExampleId[]).map((id) => ({
112+
id,
113+
data: mainExamples[id],
114+
}));
129115

130-
export default function ExampleList({ navigation }: Props) {
131-
const keyExtractor = (item: { id: string }) => item.id;
116+
export default function ExampleList() {
117+
const navigation = useNavigation('ExampleList');
132118

133119
const { colors } = useTheme();
134120
const safeArea = useSafeAreaInsets();
135121

136-
const renderItem = ({ item }: { item: Item }) => {
137-
const { data, id } = item;
138-
139-
return (
140-
<List.Item
141-
unstable_pressDelay={65}
142-
title={data.title}
143-
onPress={() => navigation.navigate(id)}
144-
/>
145-
);
146-
};
147-
148122
return (
149123
<FlatList
150124
contentContainerStyle={{
@@ -158,8 +132,18 @@ export default function ExampleList({ navigation }: Props) {
158132
}}
159133
showsVerticalScrollIndicator={false}
160134
ItemSeparatorComponent={Divider}
161-
renderItem={renderItem}
162-
keyExtractor={keyExtractor}
135+
renderItem={({ item }) => (
136+
<List.Item
137+
unstable_pressDelay={65}
138+
title={item.data.title}
139+
onPress={() => {
140+
// @ts-expect-error TypeScript can't call overloaded functions with union arguments.
141+
// https://github.com/microsoft/TypeScript/issues/40803
142+
navigation.navigate(item.id);
143+
}}
144+
/>
145+
)}
146+
keyExtractor={({ id }) => id}
163147
data={data}
164148
/>
165149
);

‎example/src/Examples/AppbarExample.tsx‎

Lines changed: 4 additions & 6 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 { NativeStackNavigationProp } from '@react-navigation/native-stack';
4+
import { useNavigation } from '@react-navigation/native';
55
import {
66
Appbar,
77
FAB,
@@ -17,16 +17,14 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
1717

1818
import ScreenWrapper from '../ScreenWrapper';
1919

20-
type Props = {
21-
navigation: NativeStackNavigationProp<{}>;
22-
};
23-
2420
type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
2521

2622
const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
2723
const MEDIUM_FAB_HEIGHT = 56;
2824

29-
const AppbarExample = ({ navigation }: Props) => {
25+
const AppbarExample = () => {
26+
const navigation = useNavigation('Appbar');
27+
3028
const [showLeftIcon, setShowLeftIcon] = React.useState(true);
3129
const [showSubtitle, setShowSubtitle] = React.useState(true);
3230
const [showSearchIcon, setShowSearchIcon] = React.useState(true);

0 commit comments

Comments
 (0)