deps: Upgrade @react-navigation/material-top-tabs to 6.6.13 (latest 6.x)

This unfortunately causes a peer-dep warning: warning " > @react-navigation/material-top-tabs@6.6.13" has incorrect peer dependency "@react-navigation/native@^6.0.0". But no issues have yet appeared in manual testing, and that's consistent with the note on the React Navigation upgrade guide that says, "To make upgrading easier, it is possible to mix packages from the `6.x.x` and `5.x.x` version ranges.": https://reactnavigation.org/docs/upgrading-from-5.x#note-on-mixing-react-navigation-5-and-react-navigation-6-packages Changelog: https://github.com/react-navigation/react-navigation/blob/main/packages/material-top-tabs/CHANGELOG.md 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 Material Top Tabs: https://reactnavigation.org/docs/upgrading-from-5.x/#material-top-tab-navigator Done now because it lets us get rid of react-native-reanimated, as foreshadowed in our React Nav 6 upgrade issue: zulip#4936 (comment) That's helpful because the old version of react-native-reanimated that we're on uses a certain iOS API that Apple identifies as privacy-sensitive, triggering a "Privacy Manifest" requirement: software-mansion/react-native-reanimated#5819 For zulip#5847, we're working on reducing and handling such requirements. That API usage is removed in v2.9.0-rc.0 of Reanimated (see just-linked PR), but I didn't pursue upgrading it because that path seems to require abandoning remote JS debugging, at least according to a note from 2022. For details on that, search for "react-native-reanimated" here: zulip#5441 Related: zulip#5847 Fixes-partly: zulip#4936
chrisbobbe · Apr 15, 2024 · ae5b9b1 · ae5b9b1
1 parent 9d45ae2
commit ae5b9b1
Show file tree

Hide file tree

Showing 85 changed files with 979 additions and 803 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -254,6 +254,8 @@ PODS:
     - React-Core
   - react-native-netinfo (6.0.0):
     - React-Core
+  - react-native-pager-view (6.3.0):
+    - React-Core
   - react-native-photo-view (1.5.3):
     - React-Core
   - react-native-safe-area-context (4.9.0):
@@ -340,35 +342,6 @@ PODS:
     - React-Core
   - RNGestureHandler (2.16.0):
     - React-Core
-  - RNReanimated (2.2.4):
-    - DoubleConversion
-    - FBLazyVector
-    - FBReactNativeSpec
-    - glog
-    - RCT-Folly
-    - RCTRequired
-    - RCTTypeSafety
-    - React
-    - React-callinvoker
-    - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTBlob
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
-    - React-RCTVibration
-    - ReactCommon/turbomodule/core
-    - Yoga
   - RNScreens (3.29.0):
     - React-Core
     - React-RCTImage
@@ -421,6 +394,7 @@ DEPENDENCIES:
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-photo-view (from `../node_modules/react-native-photo-view`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-simple-toast (from `../node_modules/react-native-simple-toast`)
@@ -443,7 +417,6 @@ DEPENDENCIES:
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -527,6 +500,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-image-picker"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-pager-view:
+    :path: "../node_modules/react-native-pager-view"
   react-native-photo-view:
     :path: "../node_modules/react-native-photo-view"
   react-native-safe-area-context:
@@ -571,8 +546,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/push-notification-ios"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
-  RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSentry:
@@ -619,6 +592,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: cd4d6b36a5207ad7a9e599ebb9eb0c2e84fa0b87
   react-native-image-picker: 3269f75c251cdcd61ab51b911dd30d6fff8c6169
   react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
+  react-native-pager-view: 4b79dae76f46759f3cfbb94a7c7d587d9a2f89ee
   react-native-photo-view: ea0ec91bf5991a6843e740b1f47ab355171c996c
   react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
   react-native-simple-toast: 8ee5d23f0b92b935ab7434cdb65159ce12dfb4b7
@@ -641,7 +615,6 @@ SPEC CHECKSUMS:
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNCPushNotificationIOS: 64218f3c776c03d7408284a819b2abfda1834bc8
   RNGestureHandler: 998887f1b2c6098ffa2506402087c0e8ef5d69a1
-  RNReanimated: e7d8afaf8fed4b3bf1a46e06adb2e04a2b248f1c
   RNScreens: fa9b582d85ae5d62c91c66003b5278458fed7aaa
   RNSentry: f30463ce11af9cfec0dde79265d29e10c3b902d7
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

diff --git a/jest/jestSetup.js b/jest/jestSetup.js
@@ -89,19 +89,6 @@ jest.mock('expo-sqlite', () => require('./mock-expo-sqlite'));
  * before mocking it here.
  */
 
-// As instructed at https://reactnavigation.org/docs/testing/.
-jest.mock('react-native-reanimated', () => {
-  /* $FlowIgnore[untyped-import] - This is just a mock setup file; no
-     need for a libdef. */
-  const Reanimated = require('react-native-reanimated/mock');
-
-  // The mock for `call` immediately calls the callback which is incorrect
-  // So we override it with a no-op
-  Reanimated.default.call = () => {};
-
-  return Reanimated;
-});
-
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
 
 // As instructed at

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@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/material-top-tabs": "^5.2.19",
+    "@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",
     "@sentry/react-native": "^5.9.2",
@@ -62,12 +62,12 @@
     "react-native-gesture-handler": "^2.8.0",
     "react-native-image-picker": "^5.3.1",
     "react-native-open-notification": "^0.1.4",
+    "react-native-pager-view": "^6.3.0",
     "react-native-photo-view": "alwx/react-native-photo-view#91b873c85",
-    "react-native-reanimated": "^2.2.0 <2.3.0",
     "react-native-safe-area-context": "^4.3.1",
     "react-native-screens": "^3.13.1 <3.30.0",
     "react-native-simple-toast": "^1.1.4",
-    "react-native-tab-view": "^2.15.2",
+    "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.6.4",

diff --git a/src/reactions/MessageReactionsScreen.js b/src/reactions/MessageReactionsScreen.js
@@ -15,7 +15,7 @@ import ZulipText from '../common/ZulipText';
 import { getOwnUserId } from '../selectors';
 import aggregateReactions from './aggregateReactions';
 import styles from '../styles';
-import { materialTopTabNavigatorConfig } from '../styles/tabs';
+import { materialTopTabNavOptions } from '../styles/tabs';
 import Emoji from '../emoji/Emoji';
 import { emojiTypeFromReactionType } from '../emoji/data';
 import { navigateBack } from '../nav/navActions';
@@ -84,8 +84,7 @@ export default function MessageReactionsScreen(props: Props): Node {
             initialRouteName={
               aggregatedReactions.some(aR => aR.name === reactionName) ? reactionName : undefined
             }
-            {...materialTopTabNavigatorConfig()}
-            swipeEnabled
+            screenOptions={materialTopTabNavOptions()}
           >
             {
               // Generate tabs for the reaction list. The tabs depend

diff --git a/src/sharing/SharingScreen.js b/src/sharing/SharingScreen.js
@@ -10,7 +10,7 @@ import type { RouteParamsOf, RouteProp } from '../react-navigation';
 import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigator';
 import type { SharedData } from './types';
 import { createStyleSheet } from '../styles';
-import { materialTopTabNavigatorConfig } from '../styles/tabs';
+import { materialTopTabNavOptions } from '../styles/tabs';
 import { useGlobalSelector } from '../react-redux';
 import ZulipTextIntl from '../common/ZulipTextIntl';
 import Screen from '../common/Screen';
@@ -69,7 +69,7 @@ export default function SharingScreen(props: Props): Node {
       shouldShowLoadingBanner={false}
       scrollEnabled={false}
     >
-      <Tab.Navigator {...materialTopTabNavigatorConfig()} swipeEnabled>
+      <Tab.Navigator screenOptions={materialTopTabNavOptions()}>
         <Tab.Screen
           name="share-to-stream"
           component={useHaveServerDataGate(ShareToStream)}

diff --git a/src/styles/tabs.js b/src/styles/tabs.js
@@ -1,6 +1,6 @@
 /* @flow strict-local */
 import { Platform } from 'react-native';
-import type { MaterialTopTabBarOptions } from '@react-navigation/material-top-tabs';
+import type { MaterialTopTabNavigationOptions } from '@react-navigation/material-top-tabs';
 import type { BottomTabBarOptions } from '@react-navigation/bottom-tabs';
 
 import { BRAND_COLOR } from './constants';
@@ -34,52 +34,52 @@ export const bottomTabNavigatorConfig = (): {| tabBarOptions: BottomTabBarOption
   },
 });
 
-export const materialTopTabNavigatorConfig = (): {| tabBarOptions: MaterialTopTabBarOptions |} => ({
-  tabBarOptions: {
-    showLabel: true,
-    showIcon: false,
-    activeTintColor: BRAND_COLOR,
-    inactiveTintColor: 'gray',
-    labelStyle: {
-      fontSize: 13,
-      margin: 0,
-    },
-    tabStyle: {
-      flex: 1,
-    },
+export const materialTopTabNavOptions = (): MaterialTopTabNavigationOptions => ({
+  swipeEnabled: true,
 
-    pressColor: BRAND_COLOR,
-    indicatorStyle: {
-      backgroundColor: BRAND_COLOR,
-    },
-    // TODO: `upperCaseLabel` vanished in react-navigation v5. We
-    // used to use `false` for this, but it appears that the
-    // effective default value is `true`, at least for material top
-    // tab navigators:
-    // https://github.com/react-navigation/react-navigation/issues/7952
-    //
-    // The coercion into uppercase only happens when the tab-bar
-    // label (whether that comes directly from
-    // `options.tabBarLabel`, or from `options.title`) is a string,
-    // not a more complex React node. It also doesn't seem to happen
-    // on bottom tab navigators, just material top ones; this
-    // difference seems to align with Material Design choices (see
-    // Greg's comment at
-    // https://github.com/zulip/zulip-mobile/pull/4393#discussion_r556949209f).
-    style: {
-      backgroundColor: 'transparent',
+  tabBarShowLabel: true,
+  tabBarShowIcon: false,
+  tabBarActiveTintColor: BRAND_COLOR,
+  tabBarInactiveTintColor: 'gray',
+  tabBarLabelStyle: {
+    fontSize: 13,
+    margin: 0,
+  },
+  tabBarItemStyle: {
+    flex: 1,
+  },
 
-      // Fix a bug introduced in React Navigation v5 that is exposed
-      // by setting `backgroundColor` to 'transparent', as we do.
-      elevation: 0,
+  tabBarPressColor: BRAND_COLOR,
+  tabBarIndicatorStyle: {
+    backgroundColor: BRAND_COLOR,
+  },
+  // TODO: `upperCaseLabel` vanished in react-navigation v5. We
+  // used to use `false` for this, but it appears that the
+  // effective default value is `true`, at least for material top
+  // tab navigators:
+  // https://github.com/react-navigation/react-navigation/issues/7952
+  //
+  // The coercion into uppercase only happens when the tab-bar
+  // label (whether that comes directly from
+  // `options.tabBarLabel`, or from `options.title`) is a string,
+  // not a more complex React node. It also doesn't seem to happen
+  // on bottom tab navigators, just material top ones; this
+  // difference seems to align with Material Design choices (see
+  // Greg's comment at
+  // https://github.com/zulip/zulip-mobile/pull/4393#discussion_r556949209f).
+  tabBarStyle: {
+    backgroundColor: 'transparent',
 
-      // Setting borderWidth and elevation to 0 works around an issue
-      // affecting react-navigation's createMaterialTopTabNavigator.
-      // https://github.com/zulip/zulip-mobile/issues/2065
-      // https://github.com/satya164/react-native-tab-view/pull/519#issuecomment-689724208
-      // TODO: Brief testing suggests this workaround isn't needed; confirm.
-      borderWidth: 0,
-      elevation: 0, // eslint-disable-line no-dupe-keys
-    },
+    // Fix a bug introduced in React Navigation v5 that is exposed
+    // by setting `backgroundColor` to 'transparent', as we do.
+    elevation: 0,
+
+    // Setting borderWidth and elevation to 0 works around an issue
+    // affecting react-navigation's createMaterialTopTabNavigator.
+    // https://github.com/zulip/zulip-mobile/issues/2065
+    // https://github.com/satya164/react-native-tab-view/pull/519#issuecomment-689724208
+    // TODO: Brief testing suggests this workaround isn't needed; confirm.
+    borderWidth: 0,
+    elevation: 0, // eslint-disable-line no-dupe-keys
   },
 });
diff --git a/tools/tsflower b/tools/tsflower
@@ -202,6 +202,10 @@ run_only()
     done
     format_dir "${rootdir}"/types/@react-navigation
 
+    package=react-native-pager-view
+    run_on_package "${package}"
+    format_dir "${rootdir}"/types/"${package}"
+
     package=react-native-tab-view
     run_on_package "${package}"
     # TODO: Send r-n-tab-view a .npmignore patch to stop shipping this directory.

diff --git a/types/@react-navigation/material-top-tabs/lib/typescript/src/index.js.flow b/types/@react-navigation/material-top-tabs/lib/typescript/src/index.js.flow
@@ -2,12 +2,12 @@
  * @generated by TsFlower
  */
 export { default as createMaterialTopTabNavigator } from './navigators/createMaterialTopTabNavigator';
-export { default as MaterialTopTabView } from './views/MaterialTopTabView';
 export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
+export { default as MaterialTopTabView } from './views/MaterialTopTabView';
 export {
+  MaterialTopTabBarProps,
+  MaterialTopTabNavigationEventMap,
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationProp,
   MaterialTopTabScreenProps,
-  MaterialTopTabBarProps,
-  MaterialTopTabBarOptions,
 } from './types';
diff --git a/...ion/material-top-tabs/lib/typescript/src/navigators/createMaterialTopTabNavigator.js.flow b/...ion/material-top-tabs/lib/typescript/src/navigators/createMaterialTopTabNavigator.js.flow
@@ -6,20 +6,21 @@ import type { JSX$Element as $tsflower_subst$React$JSX$Element } from 'tsflower/
 
 import {
   type DefaultNavigatorOptions,
-  type TabRouterOptions,
+  type ParamListBase,
   type TabNavigationState,
+  type TabRouterOptions,
 } from '@react-navigation/native';
 
 import {
   type MaterialTopTabNavigationConfig,
-  type MaterialTopTabNavigationOptions,
   type MaterialTopTabNavigationEventMap,
+  type MaterialTopTabNavigationOptions,
 } from '../types';
 
 type Props = TabRouterOptions & MaterialTopTabNavigationConfig;
 declare function MaterialTopTabNavigator(Props): $tsflower_subst$React$JSX$Element;
 declare var _default: <
-  ParamList: { +[key: string]: { ... } | void },
+  ParamList: ParamListBase,
 >() => $tsflower_import_type$_$_40_react_2d_navigation_2f_native$TypedNavigator<
   ParamList,
   TabNavigationState<ParamList>,