deps: Upgrade @react-navigation/bottom-tabs to 6.5.20 (latest 6.x)

This unfortunately adds two more peer-dep warnings to the one that
appeared when we upgraded @react-navigation/material-top-tabs,
earlier in this series. Here are all three together:

  warning " > @react-navigation/bottom-tabs@6.5.20" has incorrect peer
    dependency "@react-navigation/native@^6.0.0".
  warning "@react-navigation/bottom-tabs >
    @react-navigation/elements@1.3.30" has incorrect peer dependency
    "@react-navigation/native@^6.0.0".
  warning " > @react-navigation/material-top-tabs@6.6.13" has
    incorrect peer dependency "@react-navigation/native@^6.0.0".

But again, no issues have appeared in manual testing; see note in
that earlier commit.

Changelog:
  https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/CHANGELOG.md

For why it's OK to abandon our own custom version of this
dependency, see the commit where we started using it:

c0b17bd
>  So this fix will become unnecessary when we're on React
>  Navigation 6

Done by reading and following the relevant parts of the React Nav
upgrade guide, including general information at the top and also the
section specific to Bottom Tabs:
  https://reactnavigation.org/docs/upgrading-from-5.x#bottom-tab-navigator

Done with the hope that it wouldn't take too much effort to get to
the finish line of the React Nav v6 upgrade, zulip#4936. But when I tried
upgrading @react-navigation/stack and @react-navigation/native, I
had a lot of trouble working out the right Flow types and TsFlower
patches, and this is a legacy codebase. But this part was doable.

Fixes-partly: zulip#4936

package.json

@@ -29,7 +29,7 @@
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "6.0.0",
     "@react-native-community/push-notification-ios": "^1.5.0",
-    "@react-navigation/bottom-tabs": "npm:@zulip/react-navigation-bottom-tabs@5.11.16-0.zulip.1",
+    "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/material-top-tabs": "^6.6.13",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "npm:@zulip/react-navigation-stack@5.14.10-0.zulip.1",

src/main/MainTabsScreen.js

@@ -10,7 +10,7 @@ import type { RouteProp, RouteParamsOf } from '../react-navigation';
 import { getUnreadHuddlesTotal, getUnreadPmsTotal } from '../selectors';
 import { useSelector } from '../react-redux';
 import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigator';
-import { bottomTabNavigatorConfig } from '../styles/tabs';
+import { bottomTabNavOptions } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
 import PmConversationsScreen from '../pm-conversations/PmConversationsScreen';
 import { IconInbox, IconStream, IconPeople } from '../common/Icons';
@@ -53,7 +53,7 @@ export default function MainTabsScreen(props: Props): Node {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
-      <Tab.Navigator {...bottomTabNavigatorConfig()} lazy={false} backBehavior="none">
+      <Tab.Navigator screenOptions={bottomTabNavOptions()} backBehavior="none">
         <Tab.Screen
           name="home"
           component={HomeScreen}

src/styles/tabs.js

@@ -1,35 +1,36 @@
 /* @flow strict-local */
 import { Platform } from 'react-native';
 import type { MaterialTopTabNavigationOptions } from '@react-navigation/material-top-tabs';
-import type { BottomTabBarOptions } from '@react-navigation/bottom-tabs';
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
 
 import { BRAND_COLOR } from './constants';
 
-export const bottomTabNavigatorConfig = (): {| tabBarOptions: BottomTabBarOptions |} => ({
-  tabBarOptions: {
-    // TODO: Find a way to tell if we're on an Android tablet,
-    //   and use that -- we don't want to assume Android users
-    //   aren't on tablets, but `isPad` is iOS only and `Platform`
-    //   doesn't have something else for Android (yet):
-    //   https://reactnative.dev/docs/platform#ispad-ios
-    showLabel: Platform.OS === 'ios' && Platform.isPad,
+export const bottomTabNavOptions = (): BottomTabNavigationOptions => ({
+  headerShown: false,
+  lazy: false,
 
-    activeTintColor: BRAND_COLOR,
-    inactiveTintColor: 'gray',
-    labelStyle: {
-      fontSize: 13,
-      margin: 0,
-    },
-    tabStyle: {
-      flex: 1,
-    },
-    style: {
-      backgroundColor: 'transparent',
+  // TODO: Find a way to tell if we're on an Android tablet,
+  //   and use that -- we don't want to assume Android users
+  //   aren't on tablets, but `isPad` is iOS only and `Platform`
+  //   doesn't have something else for Android (yet):
+  //   https://reactnative.dev/docs/platform#ispad-ios
+  tabBarShowLabel: Platform.OS === 'ios' && Platform.isPad,
 
-      // Fix a bug introduced in React Navigation v5 that is exposed
-      // by setting `backgroundColor` to 'transparent', as we do.
-      elevation: 0,
-    },
+  tabBarActiveTintColor: BRAND_COLOR,
+  tabBarInactiveTintColor: 'gray',
+  tabBarLabelStyle: {
+    fontSize: 13,
+    margin: 0,
+  },
+  tabBarItemStyle: {
+    flex: 1,
+  },
+  tabBarStyle: {
+    backgroundColor: 'transparent',
+
+    // Fix a bug introduced in React Navigation v5 that is exposed
+    // by setting `backgroundColor` to 'transparent', as we do.
+    elevation: 0,
   },
 });
 

tools/tsflower

@@ -194,7 +194,7 @@ run_only()
     run_on_package "${package}"
     format_dir "${rootdir}"/types/"${package}"
 
-    for package in @react-navigation/{routers,core,native,stack,bottom-tabs,material-top-tabs}; do
+    for package in @react-navigation/{routers,core,elements,native,stack,bottom-tabs,material-top-tabs}; do
         run_on_package "${package}"
         # TODO(tsflower): skip node_modules when acting on package,
         #   so we don't have to delete it here

types/@react-navigation/bottom-tabs/lib/typescript/src/index.js.flow

@@ -2,15 +2,17 @@
  * @generated by TsFlower
  */
 export { default as createBottomTabNavigator } from './navigators/createBottomTabNavigator';
-export { default as BottomTabView } from './views/BottomTabView';
 export { default as BottomTabBar } from './views/BottomTabBar';
+export { default as BottomTabView } from './views/BottomTabView';
+export { default as BottomTabBarHeightCallbackContext } from './utils/BottomTabBarHeightCallbackContext';
 export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
 export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
 export {
+  BottomTabBarButtonProps,
+  BottomTabBarProps,
+  BottomTabHeaderProps,
+  BottomTabNavigationEventMap,
   BottomTabNavigationOptions,
   BottomTabNavigationProp,
   BottomTabScreenProps,
-  BottomTabBarProps,
-  BottomTabBarOptions,
-  BottomTabBarButtonProps,
 } from './types';

types/@react-navigation/bottom-tabs/lib/typescript/src/navigators/createBottomTabNavigator.js.flow

@@ -1,5 +1,31 @@
 /* @flow
  * @generated by TsFlower
  */
-declare var _default: any;
+import type { TypedNavigator as $tsflower_import_type$_$_40_react_2d_navigation_2f_native$TypedNavigator } from '@react-navigation/native';
+import type { JSX$Element as $tsflower_subst$React$JSX$Element } from 'tsflower/subst/react';
+
+import {
+  type DefaultNavigatorOptions,
+  type ParamListBase,
+  type TabNavigationState,
+  type TabRouterOptions,
+} from '@react-navigation/native';
+
+import {
+  type BottomTabNavigationConfig,
+  type BottomTabNavigationEventMap,
+  type BottomTabNavigationOptions,
+} from '../types';
+
+type Props = TabRouterOptions & BottomTabNavigationConfig;
+declare function BottomTabNavigator(Props): $tsflower_subst$React$JSX$Element;
+declare var _default: <
+  ParamList: ParamListBase,
+>() => $tsflower_import_type$_$_40_react_2d_navigation_2f_native$TypedNavigator<
+  ParamList,
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap,
+  typeof BottomTabNavigator,
+>;
 export default _default;

types/@react-navigation/bottom-tabs/lib/typescript/src/types.js.flow

@@ -19,19 +19,28 @@ import type {
   MouseEvent as $tsflower_subst$React$MouseEvent,
 } from 'tsflower/subst/react';
 
-import * as React from 'react';
-import { typeof Animated } from 'react-native';
+import { type HeaderOptions } from '@react-navigation/elements';
 
 import {
+  type Descriptor,
   type NavigationHelpers,
   type NavigationProp,
   type ParamListBase,
-  type Descriptor,
-  type TabNavigationState,
-  type TabActionHelpers,
   type RouteProp,
+  type TabActionHelpers,
+  type TabNavigationState,
 } from '@react-navigation/native';
 
+import * as React from 'react';
+import { typeof Animated } from 'react-native';
+import { type EdgeInsets } from 'react-native-safe-area-context';
+
+export type Layout = {
+  width: number,
+  height: number,
+  ...
+};
+
 export type BottomTabNavigationEventMap = {|
   tabPress: {|
     data: void,
@@ -48,18 +57,24 @@ export type BottomTabNavigationHelpers = NavigationHelpers<
   TabActionHelpers<ParamListBase>;
 export type BottomTabNavigationProp<
   ParamList: ParamListBase,
-  +RouteName: $Keys<ParamList> = string,
+  +RouteName: $Keys<ParamList> = $Keys<ParamList>,
+  NavigatorID: string | void = void,
 > = NavigationProp<
   ParamList,
   RouteName,
+  NavigatorID,
   TabNavigationState<ParamList>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,
 > &
   TabActionHelpers<ParamList>;
 
-export type BottomTabScreenProps<ParamList: ParamListBase, RouteName: $Keys<ParamList> = string> = {
-  navigation: BottomTabNavigationProp<ParamList, RouteName>,
+export type BottomTabScreenProps<
+  ParamList: ParamListBase,
+  RouteName: $Keys<ParamList> = $Keys<ParamList>,
+  NavigatorID: string | void = void,
+> = {
+  navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>,
   route: RouteProp<ParamList, RouteName>,
   ...
 };
@@ -92,83 +107,90 @@ export type TabBarVisibilityAnimationConfig =
   | TimingKeyboardAnimationConfig
   | SpringKeyboardAnimationConfig;
 
-export type BottomTabNavigationOptions = {
+export type BottomTabNavigationOptions = {|
+  ...HeaderOptions,
   title?: string,
   tabBarLabel?:
     | string
     | ((props: {
         focused: boolean,
         color: string,
         position: LabelPosition,
+        children: string,
         ...
       }) => $tsflower_subst$React$ReactNode),
+  tabBarShowLabel?: boolean,
+  tabBarLabelPosition?: LabelPosition,
+  tabBarLabelStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$TextStyle>,
+  tabBarAllowFontScaling?: boolean,
   tabBarIcon?: (props: {
     focused: boolean,
     color: string,
     size: number,
     ...
   }) => $tsflower_subst$React$ReactNode,
+  tabBarIconStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$TextStyle>,
   tabBarBadge?: number | string,
   tabBarBadgeStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$TextStyle>,
   tabBarAccessibilityLabel?: string,
   tabBarTestID?: string,
-  tabBarVisible?: boolean,
+  tabBarButton?: (props: BottomTabBarButtonProps) => $tsflower_subst$React$ReactNode,
+  tabBarActiveTintColor?: string,
+  tabBarInactiveTintColor?: string,
+  tabBarActiveBackgroundColor?: string,
+  tabBarInactiveBackgroundColor?: string,
+  tabBarItemStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$ViewStyle>,
+  tabBarHideOnKeyboard?: boolean,
   tabBarVisibilityAnimationConfig?: {
     show?: TabBarVisibilityAnimationConfig,
     hide?: TabBarVisibilityAnimationConfig,
     ...
   },
-  tabBarButton?: (props: BottomTabBarButtonProps) => $tsflower_subst$React$ReactNode,
+  tabBarStyle?: $tsflower_subst$RN$Animated$WithAnimatedValue<
+    $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$ViewStyle>,
+  >,
+  tabBarBackground?: () => $tsflower_subst$React$ReactNode,
+  lazy?: boolean,
+  header?: (props: BottomTabHeaderProps) => $tsflower_subst$React$ReactNode,
+  headerShown?: boolean,
   unmountOnBlur?: boolean,
-  ...
-};
+  freezeOnBlur?: boolean,
+|};
 
 export type BottomTabDescriptor = Descriptor<
-  ParamListBase,
-  string,
-  TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions,
+  BottomTabNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>,
 >;
-export type BottomTabDescriptorMap = { [key: string]: BottomTabDescriptor, ... };
-
-export type BottomTabNavigationConfig<T = BottomTabBarOptions> = {
-  lazy?: boolean,
-  tabBar?: (props: BottomTabBarProps<T>) => $tsflower_subst$React$ReactNode,
-  tabBarOptions?: T,
-  detachInactiveScreens?: boolean,
-  sceneContainerStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$ViewStyle>,
-  ...
-};
+export type BottomTabDescriptorMap = { [key: string]: BottomTabDescriptor };
 
-export type BottomTabBarOptions = {|
-  keyboardHidesTabBar?: boolean,
-  activeTintColor?: string,
-  inactiveTintColor?: string,
-  activeBackgroundColor?: string,
-  inactiveBackgroundColor?: string,
-  allowFontScaling?: boolean,
-  showLabel?: boolean,
-  labelStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$TextStyle>,
-  iconStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$TextStyle>,
-  tabStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$ViewStyle>,
-  labelPosition?: LabelPosition,
-  adaptive?: boolean,
+export type BottomTabNavigationConfig = {
+  tabBar?: (props: BottomTabBarProps) => $tsflower_subst$React$ReactNode,
   safeAreaInsets?: {
     top?: number,
     right?: number,
     bottom?: number,
     left?: number,
     ...
   },
-  style?: $tsflower_subst$RN$Animated$WithAnimatedValue<
-    $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$ViewStyle>,
-  >,
-|};
+  detachInactiveScreens?: boolean,
+  sceneContainerStyle?: $tsflower_subst$RN$StyleProp<$tsflower_subst$RN$ViewStyle>,
+  ...
+};
+
+export type BottomTabHeaderProps = {
+  layout: Layout,
+  options: BottomTabNavigationOptions,
+  route: RouteProp<ParamListBase>,
+  navigation: BottomTabNavigationProp<ParamListBase>,
+  ...
+};
 
-export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
+export type BottomTabBarProps = {
   state: TabNavigationState<ParamListBase>,
   descriptors: BottomTabDescriptorMap,
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>,
+  insets: EdgeInsets,
   ...
 };
 

types/@react-navigation/bottom-tabs/lib/typescript/src/utils/useBottomTabBarHeight.js.flow

@@ -1,4 +1,4 @@
 /* @flow
  * @generated by TsFlower
  */
-declare export default function useFloatingBottomTabBarHeight(): number;
+declare export default function useBottomTabBarHeight(): number;