From b813fc627a9738a3dfc913edd2776e1a1739e961 Mon Sep 17 00:00:00 2001
From: creature-water-valley
 <83949308+creature-water-valley@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:22:06 +0900
Subject: [PATCH] Change from native stack to stack in bottom tabs

---
 .../src/@types/react-navigation.d.ts          |   9 +
 .../src/__snapshots__/App.test.tsx.snap       | 450 ++++++++++++++----
 .../src/navigation/HomeStackNav.tsx           |   9 +-
 .../src/navigation/TeamStackNav.tsx           |   9 +-
 .../src/screens/home/HomeScreen.tsx           |   2 +-
 .../src/screens/team/TeamDetailScreen.tsx     |   2 +-
 6 files changed, 378 insertions(+), 103 deletions(-)

diff --git a/example-app/SantokuApp/src/@types/react-navigation.d.ts b/example-app/SantokuApp/src/@types/react-navigation.d.ts
index 741026c227..0065eefb9d 100644
--- a/example-app/SantokuApp/src/@types/react-navigation.d.ts
+++ b/example-app/SantokuApp/src/@types/react-navigation.d.ts
@@ -4,8 +4,17 @@ import {NavigationState, RouteConfig, TabNavigationState} from '@react-navigatio
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
 import {NativeStackNavigationEventMap} from '@react-navigation/native-stack/lib/typescript/src/types';
 import type {ParamListBase} from '@react-navigation/routers';
+import {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack/lib/typescript/src/types';
 
 declare global {
+  type StackScreenConfig<ParamList extends ParamListBase, RouteName extends keyof ParamList> = RouteConfig<
+    ParamList,
+    RouteName,
+    NavigationState<ParamList>,
+    StackNavigationOptions,
+    StackNavigationEventMap
+  >;
+
   type NativeStackScreenConfig<ParamList extends ParamListBase, RouteName extends keyof ParamList> = RouteConfig<
     ParamList,
     RouteName,
diff --git a/example-app/SantokuApp/src/__snapshots__/App.test.tsx.snap b/example-app/SantokuApp/src/__snapshots__/App.test.tsx.snap
index 82f7ba37e5..c65c1a8393 100644
--- a/example-app/SantokuApp/src/__snapshots__/App.test.tsx.snap
+++ b/example-app/SantokuApp/src/__snapshots__/App.test.tsx.snap
@@ -207,163 +207,419 @@ exports[`App マウントされたときに正常にレンダリングされる
                           >
                             <View
                               style={
-                                Array [
-                                  Object {
-                                    "flex": 1,
-                                  },
-                                  undefined,
-                                ]
+                                Object {
+                                  "flex": 1,
+                                }
                               }
                             >
                               <View
                                 style={
-                                  Object {
-                                    "flex": 1,
-                                  }
+                                  Array [
+                                    Object {
+                                      "flex": 1,
+                                    },
+                                    undefined,
+                                  ]
                                 }
                               >
                                 <View
-                                  enabled={true}
-                                  isNativeStack={true}
-                                  onAppear={[Function]}
-                                  onDisappear={[Function]}
-                                  onDismissed={[Function]}
-                                  onWillDisappear={[Function]}
-                                  replaceAnimation="push"
-                                  stackPresentation="push"
                                   style={
-                                    Object {
-                                      "bottom": 0,
-                                      "left": 0,
-                                      "position": "absolute",
-                                      "right": 0,
-                                      "top": 0,
-                                    }
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "rgb(242, 242, 242)",
+                                        "flex": 1,
+                                      },
+                                      undefined,
+                                    ]
                                   }
                                 >
                                   <View
-                                    backButtonInCustomView={false}
-                                    backgroundColor="rgb(255, 255, 255)"
-                                    color="rgb(0, 122, 255)"
-                                    direction="ltr"
-                                    disableBackButtonMenu={false}
-                                    hidden={false}
-                                    hideBackButton={false}
-                                    largeTitleHideShadow={false}
-                                    title="ホーム"
-                                    titleColor="rgb(28, 28, 30)"
-                                    topInsetEnabled={false}
-                                    translucent={false}
+                                    collapsable={false}
+                                    pointerEvents="box-none"
+                                    style={
+                                      Object {
+                                        "zIndex": 1,
+                                      }
+                                    }
                                   >
-                                    <View>
+                                    <View
+                                      accessibilityElementsHidden={false}
+                                      importantForAccessibility="auto"
+                                      onLayout={[Function]}
+                                      pointerEvents="box-none"
+                                      style={null}
+                                    >
                                       <View
+                                        collapsable={false}
+                                        pointerEvents="box-none"
                                         style={
-                                          Array [
-                                            Object {
-                                              "borderRadius": 3,
-                                              "overflow": "hidden",
-                                            },
-                                            Object {
-                                              "borderRadius": 3,
-                                            },
+                                          Object {
+                                            "bottom": 0,
+                                            "left": 0,
+                                            "opacity": 1,
+                                            "position": "absolute",
+                                            "right": 0,
+                                            "top": 0,
+                                            "zIndex": 0,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          collapsable={false}
+                                          style={
                                             Object {
-                                              "borderRadius": 8,
-                                              "width": 90,
-                                            },
-                                            false,
-                                          ]
+                                              "backgroundColor": "rgb(255, 255, 255)",
+                                              "borderBottomColor": "rgb(216, 216, 216)",
+                                              "flex": 1,
+                                              "shadowColor": "rgb(216, 216, 216)",
+                                              "shadowOffset": Object {
+                                                "height": 0.5,
+                                                "width": 0,
+                                              },
+                                              "shadowOpacity": 0.85,
+                                              "shadowRadius": 0,
+                                            }
+                                          }
+                                        />
+                                      </View>
+                                      <View
+                                        collapsable={false}
+                                        pointerEvents="box-none"
+                                        style={
+                                          Object {
+                                            "height": 44,
+                                            "maxHeight": undefined,
+                                            "minHeight": undefined,
+                                            "opacity": undefined,
+                                            "transform": undefined,
+                                          }
                                         }
                                       >
                                         <View
-                                          accessibilityRole="button"
-                                          accessibilityState={
+                                          pointerEvents="none"
+                                          style={
                                             Object {
-                                              "busy": false,
-                                              "disabled": false,
+                                              "height": 0,
                                             }
                                           }
-                                          accessible={true}
-                                          collapsable={false}
-                                          focusable={true}
-                                          onClick={[Function]}
-                                          onResponderGrant={[Function]}
-                                          onResponderMove={[Function]}
-                                          onResponderRelease={[Function]}
-                                          onResponderTerminate={[Function]}
-                                          onResponderTerminationRequest={[Function]}
-                                          onStartShouldSetResponder={[Function]}
+                                        />
+                                        <View
+                                          pointerEvents="box-none"
                                           style={
                                             Object {
-                                              "opacity": 1,
+                                              "alignItems": "stretch",
+                                              "flex": 1,
+                                              "flexDirection": "row",
                                             }
                                           }
                                         >
                                           <View
+                                            collapsable={false}
+                                            pointerEvents="box-none"
+                                            style={
+                                              Object {
+                                                "alignItems": "flex-start",
+                                                "flexBasis": 0,
+                                                "flexGrow": 1,
+                                                "justifyContent": "center",
+                                                "marginStart": 0,
+                                                "opacity": 1,
+                                              }
+                                            }
+                                          />
+                                          <View
+                                            collapsable={false}
+                                            pointerEvents="box-none"
                                             style={
                                               Object {
-                                                "alignItems": "center",
-                                                "backgroundColor": "transparent",
-                                                "borderColor": "#2089dc",
-                                                "borderRadius": 8,
-                                                "borderWidth": 0,
-                                                "flexDirection": "row",
-                                                "height": undefined,
                                                 "justifyContent": "center",
-                                                "padding": 8,
-                                                "width": 90,
+                                                "marginHorizontal": 16,
+                                                "maxWidth": 288,
+                                                "opacity": 1,
                                               }
                                             }
                                           >
                                             <Text
+                                              accessibilityRole="header"
+                                              aria-level="1"
+                                              collapsable={false}
+                                              numberOfLines={1}
+                                              onLayout={[Function]}
                                               style={
                                                 Object {
-                                                  "color": "#4b6bbd",
-                                                  "fontSize": 14,
-                                                  "paddingVertical": 1,
-                                                  "textAlign": "center",
+                                                  "color": "rgb(28, 28, 30)",
+                                                  "fontSize": 17,
+                                                  "fontWeight": "600",
                                                 }
                                               }
                                             >
-                                              ログアウト
+                                              ホーム
                                             </Text>
                                           </View>
+                                          <View
+                                            collapsable={false}
+                                            pointerEvents="box-none"
+                                            style={
+                                              Object {
+                                                "alignItems": "flex-end",
+                                                "flexBasis": 0,
+                                                "flexGrow": 1,
+                                                "justifyContent": "center",
+                                                "marginEnd": 0,
+                                                "opacity": 1,
+                                              }
+                                            }
+                                          >
+                                            <View
+                                              style={
+                                                Array [
+                                                  Object {
+                                                    "borderRadius": 3,
+                                                    "overflow": "hidden",
+                                                  },
+                                                  Object {
+                                                    "borderRadius": 3,
+                                                  },
+                                                  Object {
+                                                    "borderRadius": 8,
+                                                    "width": 90,
+                                                  },
+                                                  false,
+                                                ]
+                                              }
+                                            >
+                                              <View
+                                                accessibilityRole="button"
+                                                accessibilityState={
+                                                  Object {
+                                                    "busy": false,
+                                                    "disabled": false,
+                                                  }
+                                                }
+                                                accessible={true}
+                                                collapsable={false}
+                                                focusable={true}
+                                                onClick={[Function]}
+                                                onResponderGrant={[Function]}
+                                                onResponderMove={[Function]}
+                                                onResponderRelease={[Function]}
+                                                onResponderTerminate={[Function]}
+                                                onResponderTerminationRequest={[Function]}
+                                                onStartShouldSetResponder={[Function]}
+                                                style={
+                                                  Object {
+                                                    "opacity": 1,
+                                                  }
+                                                }
+                                              >
+                                                <View
+                                                  style={
+                                                    Object {
+                                                      "alignItems": "center",
+                                                      "backgroundColor": "transparent",
+                                                      "borderColor": "#2089dc",
+                                                      "borderRadius": 8,
+                                                      "borderWidth": 0,
+                                                      "flexDirection": "row",
+                                                      "height": undefined,
+                                                      "justifyContent": "center",
+                                                      "padding": 8,
+                                                      "width": 90,
+                                                    }
+                                                  }
+                                                >
+                                                  <Text
+                                                    style={
+                                                      Object {
+                                                        "color": "#4b6bbd",
+                                                        "fontSize": 14,
+                                                        "paddingVertical": 1,
+                                                        "textAlign": "center",
+                                                      }
+                                                    }
+                                                  >
+                                                    ログアウト
+                                                  </Text>
+                                                </View>
+                                              </View>
+                                            </View>
+                                          </View>
                                         </View>
                                       </View>
                                     </View>
                                   </View>
                                   <View
+                                    enabled={true}
+                                    onLayout={[Function]}
                                     style={
-                                      Array [
-                                        Object {
-                                          "flex": 1,
-                                        },
-                                        Object {
-                                          "backgroundColor": "rgb(242, 242, 242)",
-                                        },
-                                        undefined,
-                                      ]
+                                      Object {
+                                        "flex": 1,
+                                      }
                                     }
                                   >
                                     <View
+                                      activityState={2}
+                                      enabled={true}
+                                      pointerEvents="box-none"
                                       style={
                                         Object {
-                                          "alignItems": "center",
-                                          "flex": 1,
-                                          "justifyContent": "center",
+                                          "bottom": 0,
+                                          "left": 0,
+                                          "position": "absolute",
+                                          "right": 0,
+                                          "top": 0,
                                         }
                                       }
-                                      testID="HomeScreen"
                                     >
-                                      <Text
+                                      <View
+                                        collapsable={false}
                                         style={
                                           Object {
-                                            "color": "#000000",
-                                            "fontSize": 43.714285714285715,
+                                            "opacity": 1,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        accessibilityElementsHidden={false}
+                                        closing={false}
+                                        gestureVelocityImpact={0.3}
+                                        importantForAccessibility="auto"
+                                        onClose={[Function]}
+                                        onGestureBegin={[Function]}
+                                        onGestureCanceled={[Function]}
+                                        onGestureEnd={[Function]}
+                                        onOpen={[Function]}
+                                        onTransition={[Function]}
+                                        pointerEvents="box-none"
+                                        style={
+                                          Array [
+                                            Object {
+                                              "display": "flex",
+                                              "overflow": undefined,
+                                            },
+                                            Object {
+                                              "bottom": 0,
+                                              "left": 0,
+                                              "position": "absolute",
+                                              "right": 0,
+                                              "top": 0,
+                                            },
+                                          ]
+                                        }
+                                        transitionSpec={
+                                          Object {
+                                            "close": Object {
+                                              "animation": "spring",
+                                              "config": Object {
+                                                "damping": 500,
+                                                "mass": 3,
+                                                "overshootClamping": true,
+                                                "restDisplacementThreshold": 10,
+                                                "restSpeedThreshold": 10,
+                                                "stiffness": 1000,
+                                              },
+                                            },
+                                            "open": Object {
+                                              "animation": "spring",
+                                              "config": Object {
+                                                "damping": 500,
+                                                "mass": 3,
+                                                "overshootClamping": true,
+                                                "restDisplacementThreshold": 10,
+                                                "restSpeedThreshold": 10,
+                                                "stiffness": 1000,
+                                              },
+                                            },
                                           }
                                         }
                                       >
-                                        開発中
-                                      </Text>
+                                        <View
+                                          collapsable={false}
+                                          pointerEvents="box-none"
+                                          style={
+                                            Object {
+                                              "flex": 1,
+                                            }
+                                          }
+                                        >
+                                          <View
+                                            collapsable={false}
+                                            forwardedRef={[Function]}
+                                            needsOffscreenAlphaCompositing={false}
+                                            onGestureHandlerEvent={[Function]}
+                                            onGestureHandlerStateChange={[Function]}
+                                            style={
+                                              Object {
+                                                "flex": 1,
+                                                "transform": Array [
+                                                  Object {
+                                                    "translateX": 0,
+                                                  },
+                                                  Object {
+                                                    "translateX": 0,
+                                                  },
+                                                ],
+                                              }
+                                            }
+                                          >
+                                            <View
+                                              style={
+                                                Array [
+                                                  Object {
+                                                    "flex": 1,
+                                                    "overflow": "hidden",
+                                                  },
+                                                  Array [
+                                                    Object {
+                                                      "backgroundColor": "rgb(242, 242, 242)",
+                                                    },
+                                                    undefined,
+                                                  ],
+                                                ]
+                                              }
+                                            >
+                                              <View
+                                                style={
+                                                  Object {
+                                                    "flex": 1,
+                                                    "flexDirection": "column-reverse",
+                                                  }
+                                                }
+                                              >
+                                                <View
+                                                  style={
+                                                    Object {
+                                                      "flex": 1,
+                                                    }
+                                                  }
+                                                >
+                                                  <View
+                                                    style={
+                                                      Object {
+                                                        "alignItems": "center",
+                                                        "flex": 1,
+                                                        "justifyContent": "center",
+                                                      }
+                                                    }
+                                                    testID="HomeScreen"
+                                                  >
+                                                    <Text
+                                                      style={
+                                                        Object {
+                                                          "color": "#000000",
+                                                          "fontSize": 43.714285714285715,
+                                                        }
+                                                      }
+                                                    >
+                                                      開発中
+                                                    </Text>
+                                                  </View>
+                                                </View>
+                                              </View>
+                                            </View>
+                                          </View>
+                                        </View>
+                                      </View>
                                     </View>
                                   </View>
                                 </View>
diff --git a/example-app/SantokuApp/src/navigation/HomeStackNav.tsx b/example-app/SantokuApp/src/navigation/HomeStackNav.tsx
index 0908ae4672..02ad09f8cd 100644
--- a/example-app/SantokuApp/src/navigation/HomeStackNav.tsx
+++ b/example-app/SantokuApp/src/navigation/HomeStackNav.tsx
@@ -1,12 +1,17 @@
 import {Ionicons} from '@expo/vector-icons';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import {HomeScreen} from 'screens';
 
 import {HomeStackParamList, MainTabParamList} from './types';
 import {useLogoutButton} from './useLogoutButton';
 
-const nav = createNativeStackNavigator<HomeStackParamList>();
+// FIXME: Bottom Tabs + Native Stackでは、Androidで画面がチカチカする事象が発生したため、Stackを使用しています。
+// （以下のissueではiOSでも発生すると記載されているので、確認できていないだけでiOSでも発生する可能性があります。）
+// https://github.com/react-navigation/react-navigation/issues/10175
+// https://github.com/software-mansion/react-native-screens/issues/1276
+// https://github.com/software-mansion/react-native-screens/issues/1251
+const nav = createStackNavigator<HomeStackParamList>();
 
 const ScreenName = 'HomeStackNav';
 const Screen: React.FC = () => {
diff --git a/example-app/SantokuApp/src/navigation/TeamStackNav.tsx b/example-app/SantokuApp/src/navigation/TeamStackNav.tsx
index 253527d559..f6d7261658 100644
--- a/example-app/SantokuApp/src/navigation/TeamStackNav.tsx
+++ b/example-app/SantokuApp/src/navigation/TeamStackNav.tsx
@@ -1,12 +1,17 @@
 import {MaterialIcons} from '@expo/vector-icons';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import {TeamDetailScreen} from 'screens';
 
 import {MainTabParamList, TeamStackParamList} from './types';
 import {useLogoutButton} from './useLogoutButton';
 
-const nav = createNativeStackNavigator<TeamStackParamList>();
+// FIXME: Bottom Tabs + Native Stackでは、Androidで画面がチカチカする事象が発生したため、Stackを使用しています。
+// （以下のissueではiOSでも発生すると記載されているので、確認できていないだけでiOSでも発生する可能性があります。）
+// https://github.com/react-navigation/react-navigation/issues/10175
+// https://github.com/software-mansion/react-native-screens/issues/1276
+// https://github.com/software-mansion/react-native-screens/issues/1251
+const nav = createStackNavigator<TeamStackParamList>();
 
 const ScreenName = 'TeamStackNav';
 const Screen: React.FC = () => {
diff --git a/example-app/SantokuApp/src/screens/home/HomeScreen.tsx b/example-app/SantokuApp/src/screens/home/HomeScreen.tsx
index bfc24cbec1..28995784e8 100644
--- a/example-app/SantokuApp/src/screens/home/HomeScreen.tsx
+++ b/example-app/SantokuApp/src/screens/home/HomeScreen.tsx
@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
 });
 
 // Navigatorに登録する情報
-export const HomeScreen: NativeStackScreenConfig<HomeStackParamList, typeof ScreenName> = {
+export const HomeScreen: StackScreenConfig<HomeStackParamList, typeof ScreenName> = {
   component: Screen,
   name: ScreenName,
   options: () => ({
diff --git a/example-app/SantokuApp/src/screens/team/TeamDetailScreen.tsx b/example-app/SantokuApp/src/screens/team/TeamDetailScreen.tsx
index 205c4a958d..14cb88776f 100644
--- a/example-app/SantokuApp/src/screens/team/TeamDetailScreen.tsx
+++ b/example-app/SantokuApp/src/screens/team/TeamDetailScreen.tsx
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const TeamDetailScreen: NativeStackScreenConfig<TeamStackParamList, typeof ScreenName> = {
+export const TeamDetailScreen: StackScreenConfig<TeamStackParamList, typeof ScreenName> = {
   component: Screen,
   name: ScreenName,
   options: () => ({