react-navigation v6にバージョンアップ

package.json

@@ -37,8 +37,8 @@
     "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/masked-view": "0.1.11",
     "@react-native-picker/picker": "1.16.3",
-    "@react-navigation/native": "^5.9.4",
-    "@react-navigation/stack": "^5.14.5",
+    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/stack": "^6.0.7",
     "@types/compare-versions": "^3.3.0",
     "@types/react-native-snap-carousel": "^3.8.4",
     "@types/uuid": "^8.3.1",

src/Router.tsx

@@ -8,9 +8,16 @@ import Memoir from 'components/pages/Memoir';
 import SettingLicence from 'components/pages/Setting/Licence';
 import SettingMemoir from 'components/pages/Setting/Memoir';
 import MemoirScreenShot from 'components/pages/Memoir/ScreenShot';
-import MyPage from 'components/pages/MyPage';
+import MyPage, { MyPageScreenOption } from 'components/pages/MyPage';
+import { RootStackParamList } from 'lib/navigation';
+import ItemDetail from 'components/pages/ItemDetail';
+import Login from 'components/pages/Login';
+import UpdateProfile from 'components/pages/UpdateProfile';
+import SettingAddShareUser from 'components/pages/Setting/AddShareUser';
+import SettingRelationshipRequests from 'components/pages/Setting/RelationshipRequests';
+import SettingAcceptedRelationship from 'components/pages/Setting/AcceptedRelationship';
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<RootStackParamList>();
 const prefix = Linking.createURL('/');
 
 const WithProvider = () => {
@@ -44,37 +51,72 @@ const WithProvider = () => {
         },
       }}
     >
-      <Stack.Navigator initialRouteName="Home" mode="modal">
+      <Stack.Navigator initialRouteName="Home">
         <Stack.Screen
           name="Home"
           component={Home}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="Memoir"
-          component={Memoir}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="MemoirScreenShot"
-          component={MemoirScreenShot}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="SettingLicence"
-          component={SettingLicence}
           options={HomeScreenOption()}
         />
         <Stack.Screen
-          name="MyPage"
-          component={MyPage}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="SettingMemoir"
-          component={SettingMemoir}
-          options={HomeScreenOption('振り返り通知設定')}
+          name="ItemDetail"
+          component={ItemDetail}
+          options={HomeScreenOption()}
         />
+
+        <Stack.Group screenOptions={{ presentation: 'modal' }}>
+          <Stack.Group>
+            <Stack.Screen
+              name="MyPage"
+              component={MyPage}
+              options={MyPageScreenOption('マイページ')}
+            />
+            <Stack.Screen
+              name="Login"
+              component={Login}
+              options={MyPageScreenOption('サインイン')}
+            />
+            <Stack.Screen
+              name="UpdateProfile"
+              component={UpdateProfile}
+              options={MyPageScreenOption('プロフィール編集')}
+            />
+            <Stack.Screen
+              name="SettingAddShareUser"
+              component={SettingAddShareUser}
+              options={MyPageScreenOption('共有メンバー追加')}
+            />
+            <Stack.Screen
+              name="SettingRelationshipRequests"
+              component={SettingRelationshipRequests}
+              options={MyPageScreenOption('共有メンバー申請')}
+            />
+            <Stack.Screen
+              name="SettingAcceptedRelationship"
+              component={SettingAcceptedRelationship}
+              options={MyPageScreenOption('')}
+            />
+          </Stack.Group>
+          <Stack.Screen
+            name="Memoir"
+            component={Memoir}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="MemoirScreenShot"
+            component={MemoirScreenShot}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="SettingLicence"
+            component={SettingLicence}
+            options={HomeScreenOption()}
+          />
+          <Stack.Screen
+            name="SettingMemoir"
+            component={SettingMemoir}
+            options={HomeScreenOption('振り返り通知設定')}
+          />
+        </Stack.Group>
       </Stack.Navigator>
     </NavigationContainer>
   );

src/components/organisms/SettingModal/SettingModal.tsx

@@ -13,14 +13,15 @@ import Debug from 'components/organisms/Debug/Debug';
 import { useNotification } from 'containers/Notification';
 import { authUserState, userState } from 'store/atoms';
 import { storageKey, removeItem } from 'lib/storage';
+import { ScreenNavigationProp as HomeScreenNavigationProp } from 'components/pages/Home';
 
 type Props = {
   isVisible: boolean;
   onClose: () => void;
 };
 
 const SettingModal: React.FC<Props> = (props) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<HomeScreenNavigationProp>();
   const { onPermissionRequest } = useNotification();
   const authUser = useRecoilValue(authUserState);
   const setUser = useSetRecoilState(userState);

src/components/pages/Home/Connected.tsx

@@ -6,6 +6,7 @@ import { useCreateItemMutation, NewItem } from 'queries/api/index';
 import { homeDateState, homeItemsState, Item, homeState } from 'store/atoms';
 import useHomeItems from 'hooks/useHomeItems';
 import Plain from './Plain';
+import { ScreenNavigationProp as HomeScreenNavigationProp } from './';
 
 export type Props = {
   openSettingModal: boolean;
@@ -45,7 +46,7 @@ const Connected: React.FC<Props> = (props) => {
 
   const homeItems = useRecoilValue(homeItemsState);
   const { loading, error, refetch } = useHomeItems();
-  const navigation = useNavigation();
+  const navigation = useNavigation<HomeScreenNavigationProp>();
 
   const onOpenAddItem = useCallback(() => {
     setState((s) => ({ ...s, openAddItemModal: true }));

src/components/pages/Home/index.tsx

@@ -1,18 +1,17 @@
 import React, { useState } from 'react';
 import { RootStackParamList } from 'lib/navigation';
 import { RouteProp } from '@react-navigation/native';
-import {
-  StackNavigationProp,
-  createStackNavigator,
-} from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
 import useSentryBreadcrumb from 'hooks/useSentryBreadcrumb';
 import IconButton from 'components/molecules/IconButton';
 import View from 'components/atoms/View';
 import theme from 'config/theme';
-import ItemDetail from 'components/pages/ItemDetail';
 import Connected from './Connected';
 
-type ScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
+export type ScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'Home'
+>;
 type ScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;
 
 export type Props = {
@@ -68,19 +67,4 @@ export const HomeScreenOption = (title: string = '') => {
   };
 };
 
-const Stack = createStackNavigator<RootStackParamList>();
-
-const RootStack = () => {
-  return (
-    <Stack.Navigator initialRouteName="Home">
-      <Stack.Screen name="Home" component={Home} options={HomeScreenOption()} />
-      <Stack.Screen
-        name="ItemDetail"
-        component={ItemDetail}
-        options={HomeScreenOption()}
-      />
-    </Stack.Navigator>
-  );
-};
-
-export default RootStack;
+export default Home;

src/components/pages/Memoir/Connected.tsx

@@ -8,6 +8,7 @@ import useItemsInPeriodPaging from 'hooks/useItemsInPeriodPaging';
 import { useRecoilValue } from 'recoil';
 import { userState } from 'store/atoms';
 import Plain from './Plain';
+import { ScreenNavigationProp as MemoirScreenNavigationProp } from './';
 
 type Props = {
   startDate: string;
@@ -45,7 +46,7 @@ const Connected: React.FC<Props> = (props) => {
   const [state, setState] = useState<State>(initialState());
   const [isFilter, setIsFilter] = useState<boolean>(false);
   const user = useRecoilValue(userState);
-  const navigation = useNavigation();
+  const navigation = useNavigation<MemoirScreenNavigationProp>();
 
   const relationshipsQuery = useRelationshipsQuery({
     variables: {

src/components/pages/Memoir/index.tsx

@@ -6,7 +6,10 @@ import dayjs from 'lib/dayjs';
 import useSentryBreadcrumb from 'hooks/useSentryBreadcrumb';
 import Connected from './Connected';
 
-type ScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Memoir'>;
+export type ScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'Memoir'
+>;
 type ScreenRouteProp = RouteProp<RootStackParamList, 'Memoir'>;
 
 type Props = {

src/components/pages/MyPage/Connected.tsx

@@ -11,6 +11,7 @@ import {
   useDeleteRelationshipMutation,
   useUserQuery,
 } from 'queries/api/index';
+import { ScreenNavigationProp as MyPageScreenNavigationProp } from './';
 
 type Props = {};
 
@@ -32,7 +33,7 @@ const Connected: React.FC<Props> = () => {
   const { setup, onLogout } = useFirebaseAuth();
   const authUser = useRecoilValue(authUserState);
   const userQuery = useUserQuery();
-  const navigation = useNavigation();
+  const navigation = useNavigation<MyPageScreenNavigationProp>();
   const [getRelationshipRequests, relationshipRequestsData] =
     useRelationshipRequestsLazyQuery({
       fetchPolicy: 'network-only',

src/components/pages/MyPage/index.tsx

@@ -1,20 +1,15 @@
 import React from 'react';
 import { RootStackParamList } from 'lib/navigation';
 import { RouteProp } from '@react-navigation/native';
-import {
-  StackNavigationProp,
-  createStackNavigator,
-} from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
 import theme from 'config/theme';
-import Login from 'components/pages/Login';
-import UpdateProfile from 'components/pages/UpdateProfile';
-import SettingAddShareUser from 'components/pages/Setting/AddShareUser';
-import SettingRelationshipRequests from 'components/pages/Setting/RelationshipRequests';
-import SettingAcceptedRelationship from 'components/pages/Setting/AcceptedRelationship';
 import useSentryBreadcrumb from 'hooks/useSentryBreadcrumb';
 import Connected from './Connected';
 
-type ScreenNavigationProp = StackNavigationProp<RootStackParamList, 'MyPage'>;
+export type ScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'MyPage'
+>;
 type ScreenRouteProp = RouteProp<RootStackParamList, 'MyPage'>;
 
 type Props = {
@@ -28,46 +23,7 @@ const MyPage: React.FC<Props> = () => {
   return <Connected />;
 };
 
-const Stack = createStackNavigator<RootStackParamList>();
-
-const RootStack = () => {
-  return (
-    <Stack.Navigator initialRouteName="MyPage">
-      <Stack.Screen
-        name="MyPage"
-        component={MyPage}
-        options={MyPageScreenOption('マイページ')}
-      />
-      <Stack.Screen
-        name="Login"
-        component={Login}
-        options={MyPageScreenOption('サインイン')}
-      />
-      <Stack.Screen
-        name="UpdateProfile"
-        component={UpdateProfile}
-        options={MyPageScreenOption('プロフィール編集')}
-      />
-      <Stack.Screen
-        name="SettingAddShareUser"
-        component={SettingAddShareUser}
-        options={MyPageScreenOption('共有メンバー追加')}
-      />
-      <Stack.Screen
-        name="SettingRelationshipRequests"
-        component={SettingRelationshipRequests}
-        options={MyPageScreenOption('共有メンバー申請')}
-      />
-      <Stack.Screen
-        name="SettingAcceptedRelationship"
-        component={SettingAcceptedRelationship}
-        options={MyPageScreenOption('')}
-      />
-    </Stack.Navigator>
-  );
-};
-
-const MyPageScreenOption = (title: string) => {
+export const MyPageScreenOption = (title: string) => {
   return {
     title,
     headerStyle: {
@@ -78,4 +34,4 @@ const MyPageScreenOption = (title: string) => {
   };
 };
 
-export default RootStack;
+export default MyPage;

src/components/pages/Setting/RelationshipRequests/Connected.tsx

@@ -9,6 +9,7 @@ import {
 import { v4 as uuidv4 } from 'uuid';
 import useRelationshipRequestsPaging from 'hooks/useRelationshipRequestsPaging';
 import Plain from './Plain';
+import { ScreenNavigationProp as RelationshipRequestsScreenNavigationProp } from './';
 
 export type Props = {
   onCallback: () => void;
@@ -25,7 +26,7 @@ export type ConnectedType = {
 const Connected: React.FC<Props> = (props) => {
   const [endCursor, setEndCursor] = useState('');
   const [reloadKey, setReloadKey] = useState('');
-  const navigation = useNavigation();
+  const navigation = useNavigation<RelationshipRequestsScreenNavigationProp>();
 
   const queryResult = useRelationshipRequestsQuery({
     variables: {

src/components/pages/Setting/RelationshipRequests/index.tsx

@@ -4,7 +4,7 @@ import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import Connected from './Connected';
 
-type ScreenNavigationProp = StackNavigationProp<
+export type ScreenNavigationProp = StackNavigationProp<
   RootStackParamList,
   'SettingRelationshipRequests'
 >;