chore: include linking config for all screens in the example

react-navigation · Jan 10, 2024 · 94e4ace · 94e4ace
1 parent e73551a
commit 94e4ace
Show file tree

Hide file tree

Showing 26 changed files with 460 additions and 174 deletions.
diff --git a/example/src/Screens/AuthFlow.tsx b/example/src/Screens/AuthFlow.tsx
@@ -1,5 +1,9 @@
 import { Button } from '@react-navigation/elements';
-import { type ParamListBase, useTheme } from '@react-navigation/native';
+import {
+  type ParamListBase,
+  type PathConfigMap,
+  useTheme,
+} from '@react-navigation/native';
 import {
   createStackNavigator,
   type StackScreenProps,
@@ -8,12 +12,18 @@ import * as React from 'react';
 import { ActivityIndicator, StyleSheet, TextInput, View } from 'react-native';
 import { Title } from 'react-native-paper';
 
-type AuthStackParams = {
+export type AuthStackParams = {
   Home: undefined;
   SignIn: undefined;
   Chat: undefined;
 };
 
+export const authLinking: PathConfigMap<AuthStackParams> = {
+  Home: '',
+  SignIn: 'signin',
+  Chat: 'chat',
+};
+
 const AUTH_CONTEXT_ERROR =
   'Authentication context not found. Have your wrapped your components with AuthContext.Consumer?';
 

diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
@@ -9,6 +9,7 @@ import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements';
 import {
   type NavigatorScreenParams,
   type ParamListBase,
+  type PathConfigMap,
   useIsFocused,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
@@ -27,21 +28,35 @@ import { Appbar, IconButton } from 'react-native-paper';
 import { Albums } from '../Shared/Albums';
 import { Chat } from '../Shared/Chat';
 import { Contacts } from '../Shared/Contacts';
-import { SimpleStack, type SimpleStackParams } from './SimpleStack';
+import {
+  SimpleStack,
+  simpleStackLinking,
+  type SimpleStackParams,
+} from './SimpleStack';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
   ({ color, size }: { color: string; size: number }) => (
     <MaterialCommunityIcons name={name} color={color} size={size} />
   );
 
-type BottomTabParams = {
+export type BottomTabParams = {
   TabStack: NavigatorScreenParams<SimpleStackParams>;
   TabAlbums: undefined;
   TabContacts: undefined;
   TabChat: undefined;
 };
 
+export const bottomTabLinking: PathConfigMap<BottomTabParams> = {
+  TabStack: {
+    path: 'stack',
+    screens: simpleStackLinking,
+  },
+  TabAlbums: 'albums',
+  TabContacts: 'contacts',
+  TabChat: 'chat',
+};
+
 const AlbumsScreen = () => {
   const headerHeight = useHeaderHeight();
   const tabBarHeight = useBottomTabBarHeight();

diff --git a/example/src/Screens/CustomLayout.tsx b/example/src/Screens/CustomLayout.tsx
@@ -6,6 +6,7 @@ import {
 import {
   CommonActions,
   type ParamListBase,
+  type PathConfigMap,
   useTheme,
 } from '@react-navigation/native';
 import {
@@ -27,22 +28,29 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 
+import { COMMON_LINKING_CONFIG } from '../constants';
 import { Albums } from '../Shared/Albums';
 import { Article } from '../Shared/Article';
 import { NewsFeed } from '../Shared/NewsFeed';
 
-export type SimpleStackParams = {
+export type CustomLayoutParams = {
   Article: { author: string } | undefined;
   NewsFeed: { date: number };
   Albums: undefined;
 };
 
+export const customLayoutLinking: PathConfigMap<CustomLayoutParams> = {
+  Article: COMMON_LINKING_CONFIG.Article,
+  NewsFeed: COMMON_LINKING_CONFIG.NewsFeed,
+  Albums: 'albums',
+};
+
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({
   navigation,
   route,
-}: StackScreenProps<SimpleStackParams, 'Article'>) => {
+}: StackScreenProps<CustomLayoutParams, 'Article'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -67,7 +75,7 @@ const ArticleScreen = ({
 const NewsFeedScreen = ({
   route,
   navigation,
-}: StackScreenProps<SimpleStackParams, 'NewsFeed'>) => {
+}: StackScreenProps<CustomLayoutParams, 'NewsFeed'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -85,7 +93,7 @@ const NewsFeedScreen = ({
 
 const AlbumsScreen = ({
   navigation,
-}: StackScreenProps<SimpleStackParams, 'Albums'>) => {
+}: StackScreenProps<CustomLayoutParams, 'Albums'>) => {
   return (
     <ScrollView>
       <View style={styles.buttons}>
@@ -106,7 +114,7 @@ const AlbumsScreen = ({
   );
 };
 
-const Stack = createStackNavigator<SimpleStackParams>();
+const Stack = createStackNavigator<CustomLayoutParams>();
 
 export function CustomLayout({
   navigation,

diff --git a/example/src/Screens/DynamicTabs.tsx b/example/src/Screens/DynamicTabs.tsx
@@ -5,11 +5,22 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Title } from 'react-native-paper';
 
-type BottomTabParams = {
-  [key: string]: undefined;
+import type { PathConfigMap } from '../../../packages/core/src/types';
+
+export type DynamicBottomTabParams = {
+  [key: `tab-${number}`]: undefined;
+};
+
+export const dynamicBottomTabLinking: PathConfigMap<DynamicBottomTabParams> = {
+  'tab-0': 'tab/0',
+  'tab-1': 'tab/1',
+  'tab-2': 'tab/2',
+  'tab-3': 'tab/3',
+  'tab-4': 'tab/4',
+  'tab-5': 'tab/5',
 };
 
-const BottomTabs = createBottomTabNavigator<BottomTabParams>();
+const BottomTabs = createBottomTabNavigator<DynamicBottomTabParams>();
 
 export function DynamicTabs() {
   const [tabs, setTabs] = React.useState([0, 1]);
@@ -30,18 +41,36 @@ export function DynamicTabs() {
           {() => (
             <View style={styles.container}>
               <Title>Tab {i}</Title>
-              <Button onPress={() => setTabs((tabs) => [...tabs, tabs.length])}>
-                Add a tab
-              </Button>
-              <Button
-                onPress={() =>
-                  setTabs((tabs) =>
-                    tabs.length > 1 ? tabs.slice(0, -1) : tabs
-                  )
-                }
-              >
-                Remove a tab
-              </Button>
+              {tabs.length < 5 && (
+                <Button
+                  onPress={() =>
+                    setTabs((tabs) => {
+                      if (tabs.length < 5) {
+                        return [...tabs, tabs.length];
+                      } else {
+                        return tabs;
+                      }
+                    })
+                  }
+                >
+                  Add a tab
+                </Button>
+              )}
+              {tabs.length > 1 && (
+                <Button
+                  onPress={() =>
+                    setTabs((tabs) => {
+                      if (tabs.length > 1) {
+                        return tabs.slice(0, -1);
+                      } else {
+                        return tabs;
+                      }
+                    })
+                  }
+                >
+                  Remove a tab
+                </Button>
+              )}
             </View>
           )}
         </BottomTabs.Screen>

diff --git a/example/src/Screens/Layouts.tsx b/example/src/Screens/Layouts.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@react-navigation/elements';
-import type { ParamListBase } from '@react-navigation/native';
+import type { ParamListBase, PathConfigMap } from '@react-navigation/native';
 import {
   createStackNavigator,
   type StackNavigationOptions,
@@ -8,8 +8,12 @@ import {
 import * as React from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
-export type SimpleStackParams = {
-  SuspenseDemo: { author: string } | undefined;
+export type LayoutsStackParams = {
+  SuspenseDemo: undefined;
+};
+
+export const layoutsStackLinking: PathConfigMap<LayoutsStackParams> = {
+  SuspenseDemo: 'suspense',
 };
 
 let cached: number | undefined;
@@ -24,7 +28,7 @@ const createPromise = () =>
 
 const SuspenseDemoScreen = ({
   navigation,
-}: StackScreenProps<SimpleStackParams, 'SuspenseDemo'>) => {
+}: StackScreenProps<LayoutsStackParams, 'SuspenseDemo'>) => {
   const [promise, setPromise] = React.useState(createPromise);
   const [error, setError] = React.useState<Error | null>(null);
 
@@ -92,7 +96,7 @@ class ErrorBoundary extends React.Component<
   }
 }
 
-const Stack = createStackNavigator<SimpleStackParams>();
+const Stack = createStackNavigator<LayoutsStackParams>();
 
 export function LayoutsStack({
   navigation,

diff --git a/example/src/Screens/LinkComponent.tsx b/example/src/Screens/LinkComponent.tsx
@@ -3,6 +3,7 @@ import {
   CommonActions,
   Link,
   type ParamListBase,
+  type PathConfigMap,
   StackActions,
 } from '@react-navigation/native';
 import {
@@ -12,10 +13,21 @@ import {
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 
-import type { LinkComponentDemoParamList } from '../screens';
+import { COMMON_LINKING_CONFIG } from '../constants';
 import { Albums } from '../Shared/Albums';
 import { Article } from '../Shared/Article';
 
+export type LinkComponentDemoParamList = {
+  Article: { author: string };
+  Albums: undefined;
+};
+
+export const linkComponentDemoLinking: PathConfigMap<LinkComponentDemoParamList> =
+  {
+    Article: COMMON_LINKING_CONFIG.Article,
+    Albums: 'albums',
+  };
+
 const scrollEnabled = Platform.select({ web: true, default: false });
 
 const ArticleScreen = ({

diff --git a/example/src/Screens/LinkingScreen.tsx b/example/src/Screens/LinkingScreen.tsx
@@ -1,5 +1,8 @@
 import { Button } from '@react-navigation/elements';
-import { UNSTABLE_useUnhandledLinking } from '@react-navigation/native';
+import {
+  type PathConfigMap,
+  UNSTABLE_useUnhandledLinking,
+} from '@react-navigation/native';
 import {
   createStackNavigator,
   type StackScreenProps,
@@ -13,20 +16,26 @@ const info = `
 \u2022 http://localhost:19006/linking/profile
 `.trim();
 
-type StackParamList = {
+export type LinkingStackParams = {
   Home: undefined;
   Profile: undefined;
   SignIn: undefined;
 };
 
+export const linkingStackLinking: PathConfigMap<LinkingStackParams> = {
+  Home: '',
+  Profile: 'profile',
+  SignIn: 'sign-in',
+};
+
 const SigningContext = React.createContext<{
   signIn: () => void;
   signOut: () => void;
 } | null>(null);
 
 const ProfileScreen = ({
   navigation,
-}: StackScreenProps<StackParamList, 'Profile'>) => {
+}: StackScreenProps<LinkingStackParams, 'Profile'>) => {
   const { signOut } = useContext(SigningContext)!;
   return (
     <View style={styles.container}>
@@ -41,7 +50,7 @@ const ProfileScreen = ({
 
 const HomeScreen = ({
   navigation,
-}: StackScreenProps<StackParamList, 'Home'>) => {
+}: StackScreenProps<LinkingStackParams, 'Home'>) => {
   const { signOut } = useContext(SigningContext)!;
   return (
     <View style={styles.container}>
@@ -73,7 +82,7 @@ const SignInScreen = () => {
   );
 };
 
-const Stack = createStackNavigator<StackParamList>();
+const Stack = createStackNavigator<LinkingStackParams>();
 
 export function LinkingScreen() {
   const [isSignedIn, setSignedIn] = React.useState(false);