chore: improve header handling in the example app

react-navigation · Mar 8, 2024 · 929bbd0 · 929bbd0
1 parent f0b7e6f
commit 929bbd0
Show file tree

Hide file tree

Showing 26 changed files with 258 additions and 454 deletions.
diff --git a/example/src/Screens/AuthFlow.tsx b/example/src/Screens/AuthFlow.tsx
@@ -1,9 +1,5 @@
 import { Button, Text } from '@react-navigation/elements';
-import {
-  type ParamListBase,
-  type PathConfigMap,
-  useTheme,
-} from '@react-navigation/native';
+import { type PathConfigMap, useTheme } from '@react-navigation/native';
 import {
   createStackNavigator,
   type StackScreenProps,
@@ -17,7 +13,7 @@ export type AuthStackParams = {
   Chat: undefined;
 };
 
-export const authLinking: PathConfigMap<AuthStackParams> = {
+const linking: PathConfigMap<AuthStackParams> = {
   Home: '',
   SignIn: 'signin',
   Chat: 'chat',
@@ -133,7 +129,7 @@ type Action =
   | { type: 'SIGN_IN'; token: string }
   | { type: 'SIGN_OUT' };
 
-export function AuthFlow({ navigation }: StackScreenProps<ParamListBase>) {
+export function AuthFlow() {
   const [state, dispatch] = React.useReducer<React.Reducer<State, Action>>(
     (prevState, action) => {
       switch (action.type) {
@@ -172,12 +168,6 @@ export function AuthFlow({ navigation }: StackScreenProps<ParamListBase>) {
     return () => clearTimeout(timer);
   }, []);
 
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
   const isSignedIn = state.userToken !== undefined;
 
   const authContext = React.useMemo(
@@ -218,6 +208,9 @@ export function AuthFlow({ navigation }: StackScreenProps<ParamListBase>) {
   );
 }
 
+AuthFlow.title = 'Auth Flow';
+AuthFlow.linking = linking;
+
 const styles = StyleSheet.create({
   content: {
     flex: 1,

diff --git a/example/src/Screens/BottomTabs.tsx b/example/src/Screens/BottomTabs.tsx
@@ -1,6 +1,7 @@
 import { useActionSheet } from '@expo/react-native-action-sheet';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import {
+  type BottomTabScreenProps,
   createBottomTabNavigator,
   useBottomTabBarHeight,
 } from '@react-navigation/bottom-tabs';
@@ -12,11 +13,9 @@ import {
 } from '@react-navigation/elements';
 import {
   type NavigatorScreenParams,
-  type ParamListBase,
   type PathConfigMap,
   useIsFocused,
 } from '@react-navigation/native';
-import type { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import * as React from 'react';
 import {
@@ -31,11 +30,7 @@ import {
 import { Albums } from '../Shared/Albums';
 import { Chat } from '../Shared/Chat';
 import { Contacts } from '../Shared/Contacts';
-import {
-  SimpleStack,
-  simpleStackLinking,
-  type SimpleStackParams,
-} from './SimpleStack';
+import { SimpleStack, type SimpleStackParams } from './SimpleStack';
 
 const getTabBarIcon =
   (name: React.ComponentProps<typeof MaterialCommunityIcons>['name']) =>
@@ -50,10 +45,10 @@ export type BottomTabParams = {
   TabChat: undefined;
 };
 
-export const bottomTabLinking: PathConfigMap<BottomTabParams> = {
+const linking: PathConfigMap<BottomTabParams> = {
   TabStack: {
     path: 'stack',
-    screens: simpleStackLinking,
+    screens: SimpleStack.linking,
   },
   TabAlbums: 'albums',
   TabContacts: 'contacts',
@@ -86,15 +81,7 @@ const Tab = createBottomTabNavigator<BottomTabParams>();
 
 const animations = ['none', 'fade', 'shifting'] as const;
 
-export function BottomTabs({
-  navigation,
-}: StackScreenProps<ParamListBase, string>) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
+export function BottomTabs() {
   const { showActionSheetWithOptions } = useActionSheet();
 
   const dimensions = useWindowDimensions();
@@ -108,7 +95,9 @@ export function BottomTabs({
   return (
     <>
       <Tab.Navigator
-        screenOptions={{
+        screenOptions={({
+          navigation,
+        }: BottomTabScreenProps<BottomTabParams>) => ({
           headerLeft: (props) => (
             <HeaderBackButton {...props} onPress={navigation.goBack} />
           ),
@@ -144,13 +133,14 @@ export function BottomTabs({
           tabBarLabelPosition:
             isLargeScreen && isCompact ? 'below-icon' : undefined,
           animation,
-        }}
+        })}
       >
         <Tab.Screen
           name="TabStack"
           component={SimpleStack}
           options={{
             title: 'Article',
+            headerShown: false,
             tabBarIcon: getTabBarIcon('file-document'),
           }}
         />
@@ -242,3 +232,6 @@ export function BottomTabs({
     </>
   );
 }
+
+BottomTabs.title = 'Bottom Tabs';
+BottomTabs.linking = linking;
diff --git a/example/src/Screens/CustomLayout.tsx b/example/src/Screens/CustomLayout.tsx
@@ -5,13 +5,11 @@ import {
 } from '@react-navigation/elements';
 import {
   CommonActions,
-  type ParamListBase,
   type PathConfigMap,
   useTheme,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
-  type StackNavigationOptions,
   type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
@@ -39,7 +37,7 @@ export type CustomLayoutParams = {
   Albums: undefined;
 };
 
-export const customLayoutLinking: PathConfigMap<CustomLayoutParams> = {
+const linking: PathConfigMap<CustomLayoutParams> = {
   Article: COMMON_LINKING_CONFIG.Article,
   NewsFeed: COMMON_LINKING_CONFIG.NewsFeed,
   Albums: 'albums',
@@ -116,18 +114,7 @@ const AlbumsScreen = ({
 
 const Stack = createStackNavigator<CustomLayoutParams>();
 
-export function CustomLayout({
-  navigation,
-  screenOptions,
-}: StackScreenProps<ParamListBase> & {
-  screenOptions?: StackNavigationOptions;
-}) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
+export function NavigatorLayout() {
   const { colors } = useTheme();
 
   const frame = useSafeAreaFrame();
@@ -186,7 +173,6 @@ export function CustomLayout({
         );
       }}
       screenOptions={{
-        ...screenOptions,
         headerShown: false,
       }}
     >
@@ -212,6 +198,9 @@ export function CustomLayout({
   );
 }
 
+NavigatorLayout.title = 'Navigator Layout';
+NavigatorLayout.linking = linking;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -223,6 +212,7 @@ const styles = StyleSheet.create({
     padding: 12,
   },
   breadcrumbs: {
+    flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
   },
@@ -236,6 +226,7 @@ const styles = StyleSheet.create({
   arrow: {
     fontSize: 14,
     lineHeight: 14,
+    paddingVertical: 16,
     opacity: 0.3,
   },
 });
diff --git a/example/src/Screens/DrawerView.tsx b/example/src/Screens/DrawerView.tsx
@@ -55,6 +55,12 @@ export function DrawerView() {
   );
 }
 
+DrawerView.title = 'Drawer Layout';
+DrawerView.linking = {};
+DrawerView.options = {
+  headerShown: true,
+};
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/example/src/Screens/DynamicTabs.tsx b/example/src/Screens/DynamicTabs.tsx
@@ -1,6 +1,9 @@
 import Feather from '@expo/vector-icons/Feather';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Button, Text } from '@react-navigation/elements';
+import {
+  type BottomTabScreenProps,
+  createBottomTabNavigator,
+} from '@react-navigation/bottom-tabs';
+import { Button, HeaderBackButton, Text } from '@react-navigation/elements';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
@@ -10,7 +13,7 @@ export type DynamicBottomTabParams = {
   [key: `tab-${number}`]: undefined;
 };
 
-export const dynamicBottomTabLinking: PathConfigMap<DynamicBottomTabParams> = {
+const linking: PathConfigMap<DynamicBottomTabParams> = {
   'tab-0': 'tab/0',
   'tab-1': 'tab/1',
   'tab-2': 'tab/2',
@@ -25,7 +28,15 @@ export function DynamicTabs() {
   const [tabs, setTabs] = React.useState([0, 1]);
 
   return (
-    <BottomTabs.Navigator>
+    <BottomTabs.Navigator
+      screenOptions={({
+        navigation,
+      }: BottomTabScreenProps<DynamicBottomTabParams>) => ({
+        headerLeft: (props) => (
+          <HeaderBackButton {...props} onPress={navigation.goBack} />
+        ),
+      })}
+    >
       {tabs.map((i) => (
         <BottomTabs.Screen
           key={i}
@@ -80,6 +91,9 @@ export function DynamicTabs() {
   );
 }
 
+DynamicTabs.title = 'Dynamic Tabs';
+DynamicTabs.linking = linking;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/example/src/Screens/Layouts.tsx b/example/src/Screens/Layouts.tsx
@@ -1,8 +1,7 @@
 import { Button } from '@react-navigation/elements';
-import type { ParamListBase, PathConfigMap } from '@react-navigation/native';
+import type { PathConfigMap } from '@react-navigation/native';
 import {
   createStackNavigator,
-  type StackNavigationOptions,
   type StackScreenProps,
 } from '@react-navigation/stack';
 import * as React from 'react';
@@ -12,7 +11,7 @@ export type LayoutsStackParams = {
   SuspenseDemo: undefined;
 };
 
-export const layoutsStackLinking: PathConfigMap<LayoutsStackParams> = {
+const linking: PathConfigMap<LayoutsStackParams> = {
   SuspenseDemo: 'suspense',
 };
 
@@ -98,20 +97,9 @@ class ErrorBoundary extends React.Component<
 
 const Stack = createStackNavigator<LayoutsStackParams>();
 
-export function LayoutsStack({
-  navigation,
-  screenOptions,
-}: StackScreenProps<ParamListBase> & {
-  screenOptions?: StackNavigationOptions;
-}) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
+export function ScreenLayout() {
   return (
-    <Stack.Navigator screenOptions={screenOptions}>
+    <Stack.Navigator>
       <Stack.Screen
         name="SuspenseDemo"
         component={SuspenseDemoScreen}
@@ -134,6 +122,9 @@ export function LayoutsStack({
   );
 }
 
+ScreenLayout.title = 'Screen Layout';
+ScreenLayout.linking = linking;
+
 const styles = StyleSheet.create({
   buttons: {
     flexDirection: 'row',

diff --git a/example/src/Screens/LinkComponent.tsx b/example/src/Screens/LinkComponent.tsx
@@ -2,7 +2,6 @@ import { Button } from '@react-navigation/elements';
 import {
   CommonActions,
   Link,
-  type ParamListBase,
   type PathConfigMap,
   StackActions,
 } from '@react-navigation/native';
@@ -22,11 +21,10 @@ export type LinkComponentDemoParamList = {
   Albums: undefined;
 };
 
-export const linkComponentDemoLinking: PathConfigMap<LinkComponentDemoParamList> =
-  {
-    Article: COMMON_LINKING_CONFIG.Article,
-    Albums: 'albums',
-  };
+const linking: PathConfigMap<LinkComponentDemoParamList> = {
+  Article: COMMON_LINKING_CONFIG.Article,
+  Albums: 'albums',
+};
 
 const scrollEnabled = Platform.select({ web: true, default: false });
 
@@ -91,18 +89,9 @@ const AlbumsScreen = ({
 
 const SimpleStack = createStackNavigator<LinkComponentDemoParamList>();
 
-type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
-  StackScreenProps<ParamListBase>;
-
-export function LinkComponent({ navigation, ...rest }: Props) {
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
-
+export function LinkComponent() {
   return (
-    <SimpleStack.Navigator {...rest}>
+    <SimpleStack.Navigator>
       <SimpleStack.Screen
         name="Article"
         component={ArticleScreen}
@@ -120,6 +109,9 @@ export function LinkComponent({ navigation, ...rest }: Props) {
   );
 }
 
+LinkComponent.title = '<Link /> ';
+LinkComponent.linking = linking;
+
 const styles = StyleSheet.create({
   buttons: {
     gap: 12,