deps: Upgrade @react-navigation/{bottom,material-top}-tabs to 6.x

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

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

package.json

@@ -29,8 +29,8 @@
     "@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/material-top-tabs": "^5.2.19",
+    "@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",
     "@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",
@@ -93,7 +93,7 @@
     "@rollup/plugin-babel": "^5.2.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/react-native": "~0.67.6",
+    "@types/react-native": "^0.68.20",
     "@vusion/webfonts-generator": "^0.8.0",
     "ast-types": "^0.16.1",
     "babel-plugin-transform-flow-enums": "^0.0.2",

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/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
@@ -96,7 +95,6 @@ export default function MessageReactionsScreen(props: Props): Node {
               <Tab.Screen
                 key={aggregatedReaction.name}
                 name={aggregatedReaction.name}
-                component={() => <ReactionUserList reactedUserIds={aggregatedReaction.users} />}
                 options={{
                   tabBarLabel: () => (
                     <View style={styles.row}>
@@ -108,7 +106,9 @@ export default function MessageReactionsScreen(props: Props): Node {
                     </View>
                   ),
                 }}
-              />
+              >
+                {() => <ReactionUserList reactedUserIds={aggregatedReaction.users} />}
+              </Tab.Screen>
             ))}
           </Tab.Navigator>
         </View>

src/sharing/ShareWrapper.js

@@ -289,7 +289,7 @@ class ShareWrapperInner extends React.PureComponent<Props, State> {
     const { message, sending } = this.state;
 
     return (
-      <>
+      <ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps="handled">
         <ScrollView style={styles.wrapper} keyboardShouldPersistTaps="always" nestedScrollEnabled>
           <View style={styles.container}>
             {sharedData.type === 'file' && (
@@ -325,7 +325,7 @@ class ShareWrapperInner extends React.PureComponent<Props, State> {
             isPressHandledWhenDisabled
           />
         </View>
-      </>
+      </ScrollView>
     );
   }
 }

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';
@@ -63,8 +63,13 @@ export default function SharingScreen(props: Props): Node {
   }, [hasAuth, navigation]);
 
   return (
-    <Screen canGoBack={false} title="Share on Zulip" shouldShowLoadingBanner={false}>
-      <Tab.Navigator {...materialTopTabNavigatorConfig()} swipeEnabled>
+    <Screen
+      canGoBack={false}
+      title="Share on Zulip"
+      shouldShowLoadingBanner={false}
+      scrollEnabled={false}
+    >
+      <Tab.Navigator screenOptions={materialTopTabNavOptions()}>
         <Tab.Screen
           name="share-to-stream"
           component={useHaveServerDataGate(ShareToStream)}