explicit initial routes, enable legacy implicit nested navigation

This commit is contained in:
Samuel Newman
2025-05-28 16:13:43 +03:00
parent 2e260be80c
commit cad7db56cf
+22 -16
View File
@@ -499,6 +499,10 @@ function TabsNavigator() {
tabBar={tabBar}> tabBar={tabBar}>
<Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} /> <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
<Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} /> <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
<Tab.Screen
name="MessagesTab"
getComponent={() => MessagesTabNavigator}
/>
<Tab.Screen <Tab.Screen
name="NotificationsTab" name="NotificationsTab"
getComponent={() => NotificationsTabNavigator} getComponent={() => NotificationsTabNavigator}
@@ -507,10 +511,6 @@ function TabsNavigator() {
name="MyProfileTab" name="MyProfileTab"
getComponent={() => MyProfileTabNavigator} getComponent={() => MyProfileTabNavigator}
/> />
<Tab.Screen
name="MessagesTab"
getComponent={() => MessagesTabNavigator}
/>
</Tab.Navigator> </Tab.Navigator>
) )
} }
@@ -522,12 +522,12 @@ function HomeTabNavigator() {
<HomeTab.Navigator <HomeTab.Navigator
screenOptions={{ screenOptions={{
animationDuration: 285, animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
fullScreenGestureShadowEnabled: true, fullScreenGestureShadowEnabled: true,
headerShown: false, headerShown: false,
contentStyle: t.atoms.bg, contentStyle: t.atoms.bg,
}}> }}
initialRouteName="Home">
<HomeTab.Screen name="Home" getComponent={() => HomeScreen} /> <HomeTab.Screen name="Home" getComponent={() => HomeScreen} />
<HomeTab.Screen name="Start" getComponent={() => HomeScreen} /> <HomeTab.Screen name="Start" getComponent={() => HomeScreen} />
{commonScreens(HomeTab as typeof Flat)} {commonScreens(HomeTab as typeof Flat)}
@@ -541,12 +541,12 @@ function SearchTabNavigator() {
<SearchTab.Navigator <SearchTab.Navigator
screenOptions={{ screenOptions={{
animationDuration: 285, animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
fullScreenGestureShadowEnabled: true, fullScreenGestureShadowEnabled: true,
headerShown: false, headerShown: false,
contentStyle: t.atoms.bg, contentStyle: t.atoms.bg,
}}> }}
initialRouteName="Search">
<SearchTab.Screen name="Search" getComponent={() => SearchScreen} /> <SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
{commonScreens(SearchTab as typeof Flat)} {commonScreens(SearchTab as typeof Flat)}
</SearchTab.Navigator> </SearchTab.Navigator>
@@ -559,12 +559,12 @@ function NotificationsTabNavigator() {
<NotificationsTab.Navigator <NotificationsTab.Navigator
screenOptions={{ screenOptions={{
animationDuration: 285, animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
fullScreenGestureShadowEnabled: true, fullScreenGestureShadowEnabled: true,
headerShown: false, headerShown: false,
contentStyle: t.atoms.bg, contentStyle: t.atoms.bg,
}}> }}
initialRouteName="Notifications">
<NotificationsTab.Screen <NotificationsTab.Screen
name="Notifications" name="Notifications"
getComponent={() => NotificationsScreen} getComponent={() => NotificationsScreen}
@@ -581,12 +581,12 @@ function MyProfileTabNavigator() {
<MyProfileTab.Navigator <MyProfileTab.Navigator
screenOptions={{ screenOptions={{
animationDuration: 285, animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
fullScreenGestureShadowEnabled: true, fullScreenGestureShadowEnabled: true,
headerShown: false, headerShown: false,
contentStyle: t.atoms.bg, contentStyle: t.atoms.bg,
}}> }}
initialRouteName="MyProfile">
<MyProfileTab.Screen <MyProfileTab.Screen
// MyProfile is not in AllNavigationParams - asserting as Profile at least // MyProfile is not in AllNavigationParams - asserting as Profile at least
// gives us typechecking for initialParams -sfn // gives us typechecking for initialParams -sfn
@@ -605,12 +605,12 @@ function MessagesTabNavigator() {
<MessagesTab.Navigator <MessagesTab.Navigator
screenOptions={{ screenOptions={{
animationDuration: 285, animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
fullScreenGestureShadowEnabled: true, fullScreenGestureShadowEnabled: true,
headerShown: false, headerShown: false,
contentStyle: t.atoms.bg, contentStyle: t.atoms.bg,
}}> }}
initialRouteName="Messages">
<MessagesTab.Screen <MessagesTab.Screen
name="Messages" name="Messages"
getComponent={() => MessagesScreen} getComponent={() => MessagesScreen}
@@ -639,7 +639,6 @@ const FlatNavigator = () => {
screenListeners={screenListeners} screenListeners={screenListeners}
screenOptions={{ screenOptions={{
animationDuration: 285, animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true, fullScreenGestureEnabled: true,
fullScreenGestureShadowEnabled: true, fullScreenGestureShadowEnabled: true,
headerShown: false, headerShown: false,
@@ -777,7 +776,14 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
logModuleInitTime() logModuleInitTime()
onReady() onReady()
logger.metric('router:navigate', {}, {statsig: false}) logger.metric('router:navigate', {}, {statsig: false})
}}> }}
// WARNING: Implicit navigation to nested navigators is depreciated in React Navigation 7.x
// However, there's a fair amount of places we do that, especially in when popping to the top of stacks.
// See BottomBar.tsx for an example of how to handle nested navigators in the tabs correctly.
// I'm scared of missing a spot (esp. with push notifications etc) so let's enable this legacy behaviour for now.
// We will need to confirm we handle nested navigators correctly by the time we migrate to React Navigation 8.x
// -sfn
navigationInChildEnabled>
{children} {children}
</NavigationContainer> </NavigationContainer>
</> </>