chore: migrate example to react navigation static config

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   default:
     docker:
-      - image: cimg/node:20.19.0
+      - image: cimg/node:22.15.0
     working_directory: ~/react-native-paper
 
 commands:
@@ -20,30 +20,17 @@ jobs:
       - attach_project
       - restore_cache:
           keys:
-            - dependencies-{{ checksum "package.json" }}
+            - dependencies-{{ checksum "yarn.lock" }}
             - dependencies-
-      - restore_cache:
-          keys:
-            - dependencies-example-{{ checksum "example/package.json" }}
-            - dependencies-example-
       - run:
           name: Install dependencies
           command: |
-            sudo corepack enable
-            yarn --cwd example --immutable
-            yarn --cwd docs --immutable
             yarn --immutable
       - save_cache:
-          key: dependencies-{{ checksum "package.json" }}
+          key: dependencies-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
-      - save_cache:
-          key: dependencies-docs-{{ checksum "docs/package.json" }}
-          paths:
             - docs/node_modules
-      - save_cache:
-          key: dependencies-example-{{ checksum "example/package.json" }}
-          paths:
             - example/node_modules
       - persist_to_workspace:
           root: .

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

example/src/DrawerItems.tsx

@@ -1,15 +1,8 @@
 import * as React from 'react';
-import {
-  ColorValue,
-  I18nManager,
-  Platform,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { ColorValue, Platform, StyleSheet, View } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import Constants, { ExecutionEnvironment } from 'expo-constants';
-import * as Updates from 'expo-updates';
 import {
   Badge,
   Button,
@@ -124,16 +117,12 @@ function DrawerItems() {
   } = preferences;
 
   const _handleToggleRTL = () => {
-    if (expoGoExecution) {
+    if (!isWeb && expoGoExecution) {
       setShowRTLDialog(true);
       return;
     }
 
     toggleRTL();
-    I18nManager.forceRTL(!isRTL);
-    if (isWeb) {
-      Updates.reloadAsync();
-    }
   };
 
   const _handleDismissRTLDialog = () => {
@@ -206,16 +195,14 @@ function DrawerItems() {
               </View>
             </TouchableRipple>
 
-            {!isWeb && (
-              <TouchableRipple onPress={_handleToggleRTL}>
-                <View style={[styles.preference, styles.v3Preference]}>
-                  <Text variant="labelLarge">RTL</Text>
-                  <View pointerEvents="none">
-                    <Switch value={isRTL} />
-                  </View>
+            <TouchableRipple onPress={_handleToggleRTL}>
+              <View style={[styles.preference, styles.v3Preference]}>
+                <Text variant="labelLarge">RTL</Text>
+                <View pointerEvents="none">
+                  <Switch value={isRTL} />
                 </View>
-              </TouchableRipple>
-            )}
+              </View>
+            </TouchableRipple>
 
             <TouchableRipple onPress={toggleCollapsed}>
               <View style={[styles.preference, styles.v3Preference]}>

example/src/ExampleList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FlatList } from 'react-native';
 
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
 import { Divider, List, useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -49,102 +49,76 @@ import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
-export const mainExamples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  animatedFab: AnimatedFABExample,
-  activityIndicator: ActivityIndicatorExample,
-  appbar: AppbarExample,
-  avatar: AvatarExample,
-  badge: BadgeExample,
-  banner: BannerExample,
-  bottomNavigationBarExample: BottomNavigationBarExample,
-  bottomNavigation: BottomNavigationExample,
-  button: ButtonExample,
-  card: CardExample,
-  checkbox: CheckboxExample,
-  checkboxItem: CheckboxItemExample,
-  chip: ChipExample,
-  dataTable: DataTableExample,
-  dialog: DialogExample,
-  divider: DividerExample,
-  fab: FABExample,
-  iconButton: IconButtonExample,
-  icon: IconExample,
-  listAccordion: ListAccordionExample,
-  listAccordionGroup: ListAccordionExampleGroup,
-  listSection: ListSectionExample,
-  listItem: ListItemExample,
-  menu: MenuExample,
-  progressbar: ProgressBarExample,
-  radio: RadioButtonExample,
-  radioGroup: RadioButtonGroupExample,
-  radioItem: RadioButtonItemExample,
-  searchbar: SearchbarExample,
-  segmentedButton: SegmentedButtonExample,
-  snackbar: SnackbarExample,
-  surface: SurfaceExample,
-  switch: SwitchExample,
-  text: TextExample,
-  textInput: TextInputExample,
-  toggleButton: ToggleButtonExample,
-  tooltipExample: TooltipExample,
-  touchableRipple: TouchableRippleExample,
-  theme: ThemeExample,
-  themingWithReactNavigation: ThemingWithReactNavigation,
+
+export const mainExamples = {
+  AnimatedFAB: AnimatedFABExample,
+  ActivityIndicator: ActivityIndicatorExample,
+  Appbar: AppbarExample,
+  Avatar: AvatarExample,
+  Badge: BadgeExample,
+  Banner: BannerExample,
+  BottomNavigationBarExample,
+  BottomNavigation: BottomNavigationExample,
+  Button: ButtonExample,
+  Card: CardExample,
+  Checkbox: CheckboxExample,
+  CheckboxItem: CheckboxItemExample,
+  Chip: ChipExample,
+  DataTable: DataTableExample,
+  Dialog: DialogExample,
+  Divider: DividerExample,
+  FAB: FABExample,
+  IconButton: IconButtonExample,
+  Icon: IconExample,
+  ListAccordion: ListAccordionExample,
+  ListAccordionGroup: ListAccordionExampleGroup,
+  ListSection: ListSectionExample,
+  ListItem: ListItemExample,
+  Menu: MenuExample,
+  Progressbar: ProgressBarExample,
+  Radio: RadioButtonExample,
+  RadioGroup: RadioButtonGroupExample,
+  RadioItem: RadioButtonItemExample,
+  Searchbar: SearchbarExample,
+  SegmentedButton: SegmentedButtonExample,
+  Snackbar: SnackbarExample,
+  Surface: SurfaceExample,
+  Switch: SwitchExample,
+  Text: TextExample,
+  TextInput: TextInputExample,
+  ToggleButton: ToggleButtonExample,
+  TooltipExample,
+  TouchableRipple: TouchableRippleExample,
+  Theme: ThemeExample,
+  ThemingWithReactNavigation,
 };
 
-export const nestedExamples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  themingWithReactNavigation: ThemingWithReactNavigation,
-  teamDetails: TeamDetails,
-  teamsList: TeamsList,
-  segmentedButtonRealCase: SegmentedButtonRealCase,
-  segmentedButtonMultiselectRealCase: SegmentedButtonMultiselectRealCase,
+export const nestedExamples = {
+  ThemingWithReactNavigation,
+  TeamDetails,
+  TeamsList,
+  SegmentedButtonRealCase,
+  SegmentedButtonMultiselectRealCase,
 };
 
-export const examples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
+export const examples = {
   ...mainExamples,
   ...nestedExamples,
 };
 
-type Props = {
-  navigation: NativeStackNavigationProp<{ [key: string]: undefined }>;
-};
-
-type Item = {
-  id: string;
-  data: (typeof mainExamples)[string];
-};
+type MainExampleId = keyof typeof mainExamples;
 
-const data = Object.keys(mainExamples).map(
-  (id): Item => ({ id, data: mainExamples[id] })
-);
+const data = (Object.keys(mainExamples) as MainExampleId[]).map((id) => ({
+  id,
+  data: mainExamples[id],
+}));
 
-export default function ExampleList({ navigation }: Props) {
-  const keyExtractor = (item: { id: string }) => item.id;
+export default function ExampleList() {
+  const navigation = useNavigation('ExampleList');
 
   const { colors } = useTheme();
   const safeArea = useSafeAreaInsets();
 
-  const renderItem = ({ item }: { item: Item }) => {
-    const { data, id } = item;
-
-    return (
-      <List.Item
-        unstable_pressDelay={65}
-        title={data.title}
-        onPress={() => navigation.navigate(id)}
-      />
-    );
-  };
-
   return (
     <FlatList
       contentContainerStyle={{
@@ -158,8 +132,18 @@ export default function ExampleList({ navigation }: Props) {
       }}
       showsVerticalScrollIndicator={false}
       ItemSeparatorComponent={Divider}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
+      renderItem={({ item }) => (
+        <List.Item
+          unstable_pressDelay={65}
+          title={item.data.title}
+          onPress={() => {
+            // @ts-expect-error TypeScript can't call overloaded functions with union arguments.
+            // https://github.com/microsoft/TypeScript/issues/40803
+            navigation.navigate(item.id);
+          }}
+        />
+      )}
+      keyExtractor={({ id }) => id}
       data={data}
     />
   );

example/src/Examples/AppbarExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
 import {
   Appbar,
   FAB,
@@ -17,16 +17,14 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import ScreenWrapper from '../ScreenWrapper';
 
-type Props = {
-  navigation: NativeStackNavigationProp<{}>;
-};
-
 type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 
 const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
 const MEDIUM_FAB_HEIGHT = 56;
 
-const AppbarExample = ({ navigation }: Props) => {
+const AppbarExample = () => {
+  const navigation = useNavigation('Appbar');
+
   const [showLeftIcon, setShowLeftIcon] = React.useState(true);
   const [showSubtitle, setShowSubtitle] = React.useState(true);
   const [showSearchIcon, setShowSearchIcon] = React.useState(true);