Skip to content

Commit cf21710

Browse files
satya164satya164
committed
chore: migrate example to react navigation static config
1 parent 08ecaeb commit cf21710

18 files changed

Lines changed: 467 additions & 463 deletions

‎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/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(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)