Skip to content

Commit ae5b9b1

Browse files
chrisbobbechrisbobbe
committed
deps: Upgrade @react-navigation/material-top-tabs to 6.6.13 (latest 6.x)
This unfortunately causes a peer-dep warning: warning " > @react-navigation/[email protected]" 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
1 parent 9d45ae2 commit ae5b9b1

File tree

85 files changed

+979
-803
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+979
-803
lines changed

‎ios/Podfile.lock

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,8 @@ PODS:
254254
- React-Core
255255
- react-native-netinfo (6.0.0):
256256
- React-Core
257+
- react-native-pager-view (6.3.0):
258+
- React-Core
257259
- react-native-photo-view (1.5.3):
258260
- React-Core
259261
- react-native-safe-area-context (4.9.0):
@@ -340,35 +342,6 @@ PODS:
340342
- React-Core
341343
- RNGestureHandler (2.16.0):
342344
- React-Core
343-
- RNReanimated (2.2.4):
344-
- DoubleConversion
345-
- FBLazyVector
346-
- FBReactNativeSpec
347-
- glog
348-
- RCT-Folly
349-
- RCTRequired
350-
- RCTTypeSafety
351-
- React
352-
- React-callinvoker
353-
- React-Core
354-
- React-Core/DevSupport
355-
- React-Core/RCTWebSocket
356-
- React-CoreModules
357-
- React-cxxreact
358-
- React-jsi
359-
- React-jsiexecutor
360-
- React-jsinspector
361-
- React-RCTActionSheet
362-
- React-RCTAnimation
363-
- React-RCTBlob
364-
- React-RCTImage
365-
- React-RCTLinking
366-
- React-RCTNetwork
367-
- React-RCTSettings
368-
- React-RCTText
369-
- React-RCTVibration
370-
- ReactCommon/turbomodule/core
371-
- Yoga
372345
- RNScreens (3.29.0):
373346
- React-Core
374347
- React-RCTImage
@@ -421,6 +394,7 @@ DEPENDENCIES:
421394
- react-native-document-picker (from `../node_modules/react-native-document-picker`)
422395
- react-native-image-picker (from `../node_modules/react-native-image-picker`)
423396
- "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
397+
- react-native-pager-view (from `../node_modules/react-native-pager-view`)
424398
- react-native-photo-view (from `../node_modules/react-native-photo-view`)
425399
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
426400
- react-native-simple-toast (from `../node_modules/react-native-simple-toast`)
@@ -443,7 +417,6 @@ DEPENDENCIES:
443417
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
444418
- "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
445419
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
446-
- RNReanimated (from `../node_modules/react-native-reanimated`)
447420
- RNScreens (from `../node_modules/react-native-screens`)
448421
- "RNSentry (from `../node_modules/@sentry/react-native`)"
449422
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -527,6 +500,8 @@ EXTERNAL SOURCES:
527500
:path: "../node_modules/react-native-image-picker"
528501
react-native-netinfo:
529502
:path: "../node_modules/@react-native-community/netinfo"
503+
react-native-pager-view:
504+
:path: "../node_modules/react-native-pager-view"
530505
react-native-photo-view:
531506
:path: "../node_modules/react-native-photo-view"
532507
react-native-safe-area-context:
@@ -571,8 +546,6 @@ EXTERNAL SOURCES:
571546
:path: "../node_modules/@react-native-community/push-notification-ios"
572547
RNGestureHandler:
573548
:path: "../node_modules/react-native-gesture-handler"
574-
RNReanimated:
575-
:path: "../node_modules/react-native-reanimated"
576549
RNScreens:
577550
:path: "../node_modules/react-native-screens"
578551
RNSentry:
@@ -619,6 +592,7 @@ SPEC CHECKSUMS:
619592
react-native-document-picker: cd4d6b36a5207ad7a9e599ebb9eb0c2e84fa0b87
620593
react-native-image-picker: 3269f75c251cdcd61ab51b911dd30d6fff8c6169
621594
react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
595+
react-native-pager-view: 4b79dae76f46759f3cfbb94a7c7d587d9a2f89ee
622596
react-native-photo-view: ea0ec91bf5991a6843e740b1f47ab355171c996c
623597
react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
624598
react-native-simple-toast: 8ee5d23f0b92b935ab7434cdb65159ce12dfb4b7
@@ -641,7 +615,6 @@ SPEC CHECKSUMS:
641615
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
642616
RNCPushNotificationIOS: 64218f3c776c03d7408284a819b2abfda1834bc8
643617
RNGestureHandler: 998887f1b2c6098ffa2506402087c0e8ef5d69a1
644-
RNReanimated: e7d8afaf8fed4b3bf1a46e06adb2e04a2b248f1c
645618
RNScreens: fa9b582d85ae5d62c91c66003b5278458fed7aaa
646619
RNSentry: f30463ce11af9cfec0dde79265d29e10c3b902d7
647620
RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

‎jest/jestSetup.js

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -89,19 +89,6 @@ jest.mock('expo-sqlite', () => require('./mock-expo-sqlite'));
8989
* before mocking it here.
9090
*/
9191

92-
// As instructed at https://reactnavigation.org/docs/testing/.
93-
jest.mock('react-native-reanimated', () => {
94-
/* $FlowIgnore[untyped-import] - This is just a mock setup file; no
95-
need for a libdef. */
96-
const Reanimated = require('react-native-reanimated/mock');
97-
98-
// The mock for `call` immediately calls the callback which is incorrect
99-
// So we override it with a no-op
100-
Reanimated.default.call = () => {};
101-
102-
return Reanimated;
103-
});
104-
10592
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
10693

10794
// As instructed at

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@react-native-community/netinfo": "6.0.0",
3131
"@react-native-community/push-notification-ios": "^1.5.0",
3232
"@react-navigation/bottom-tabs": "npm:@zulip/[email protected]",
33-
"@react-navigation/material-top-tabs": "^5.2.19",
33+
"@react-navigation/material-top-tabs": "^6.6.13",
3434
"@react-navigation/native": "^5.7.6",
3535
"@react-navigation/stack": "npm:@zulip/[email protected]",
3636
"@sentry/react-native": "^5.9.2",
@@ -62,12 +62,12 @@
6262
"react-native-gesture-handler": "^2.8.0",
6363
"react-native-image-picker": "^5.3.1",
6464
"react-native-open-notification": "^0.1.4",
65+
"react-native-pager-view": "^6.3.0",
6566
"react-native-photo-view": "alwx/react-native-photo-view#91b873c85",
66-
"react-native-reanimated": "^2.2.0 <2.3.0",
6767
"react-native-safe-area-context": "^4.3.1",
6868
"react-native-screens": "^3.13.1 <3.30.0",
6969
"react-native-simple-toast": "^1.1.4",
70-
"react-native-tab-view": "^2.15.2",
70+
"react-native-tab-view": "^3.5.2",
7171
"react-native-url-polyfill": "^1.3.0",
7272
"react-native-vector-icons": "^9.1.0",
7373
"react-native-webview": "^11.6.4",

‎src/reactions/MessageReactionsScreen.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import ZulipText from '../common/ZulipText';
1515
import { getOwnUserId } from '../selectors';
1616
import aggregateReactions from './aggregateReactions';
1717
import styles from '../styles';
18-
import { materialTopTabNavigatorConfig } from '../styles/tabs';
18+
import { materialTopTabNavOptions } from '../styles/tabs';
1919
import Emoji from '../emoji/Emoji';
2020
import { emojiTypeFromReactionType } from '../emoji/data';
2121
import { navigateBack } from '../nav/navActions';
@@ -84,8 +84,7 @@ export default function MessageReactionsScreen(props: Props): Node {
8484
initialRouteName={
8585
aggregatedReactions.some(aR => aR.name === reactionName) ? reactionName : undefined
8686
}
87-
{...materialTopTabNavigatorConfig()}
88-
swipeEnabled
87+
screenOptions={materialTopTabNavOptions()}
8988
>
9089
{
9190
// Generate tabs for the reaction list. The tabs depend

‎src/sharing/SharingScreen.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type { RouteParamsOf, RouteProp } from '../react-navigation';
1010
import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigator';
1111
import type { SharedData } from './types';
1212
import { createStyleSheet } from '../styles';
13-
import { materialTopTabNavigatorConfig } from '../styles/tabs';
13+
import { materialTopTabNavOptions } from '../styles/tabs';
1414
import { useGlobalSelector } from '../react-redux';
1515
import ZulipTextIntl from '../common/ZulipTextIntl';
1616
import Screen from '../common/Screen';
@@ -69,7 +69,7 @@ export default function SharingScreen(props: Props): Node {
6969
shouldShowLoadingBanner={false}
7070
scrollEnabled={false}
7171
>
72-
<Tab.Navigator {...materialTopTabNavigatorConfig()} swipeEnabled>
72+
<Tab.Navigator screenOptions={materialTopTabNavOptions()}>
7373
<Tab.Screen
7474
name="share-to-stream"
7575
component={useHaveServerDataGate(ShareToStream)}

‎src/styles/tabs.js

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* @flow strict-local */
22
import { Platform } from 'react-native';
3-
import type { MaterialTopTabBarOptions } from '@react-navigation/material-top-tabs';
3+
import type { MaterialTopTabNavigationOptions } from '@react-navigation/material-top-tabs';
44
import type { BottomTabBarOptions } from '@react-navigation/bottom-tabs';
55

66
import { BRAND_COLOR } from './constants';
@@ -34,52 +34,52 @@ export const bottomTabNavigatorConfig = (): {| tabBarOptions: BottomTabBarOption
3434
},
3535
});
3636

37-
export const materialTopTabNavigatorConfig = (): {| tabBarOptions: MaterialTopTabBarOptions |} => ({
38-
tabBarOptions: {
39-
showLabel: true,
40-
showIcon: false,
41-
activeTintColor: BRAND_COLOR,
42-
inactiveTintColor: 'gray',
43-
labelStyle: {
44-
fontSize: 13,
45-
margin: 0,
46-
},
47-
tabStyle: {
48-
flex: 1,
49-
},
37+
export const materialTopTabNavOptions = (): MaterialTopTabNavigationOptions => ({
38+
swipeEnabled: true,
5039

51-
pressColor: BRAND_COLOR,
52-
indicatorStyle: {
53-
backgroundColor: BRAND_COLOR,
54-
},
55-
// TODO: `upperCaseLabel` vanished in react-navigation v5. We
56-
// used to use `false` for this, but it appears that the
57-
// effective default value is `true`, at least for material top
58-
// tab navigators:
59-
// https://github.com/react-navigation/react-navigation/issues/7952
60-
//
61-
// The coercion into uppercase only happens when the tab-bar
62-
// label (whether that comes directly from
63-
// `options.tabBarLabel`, or from `options.title`) is a string,
64-
// not a more complex React node. It also doesn't seem to happen
65-
// on bottom tab navigators, just material top ones; this
66-
// difference seems to align with Material Design choices (see
67-
// Greg's comment at
68-
// https://github.com/zulip/zulip-mobile/pull/4393#discussion_r556949209f).
69-
style: {
70-
backgroundColor: 'transparent',
40+
tabBarShowLabel: true,
41+
tabBarShowIcon: false,
42+
tabBarActiveTintColor: BRAND_COLOR,
43+
tabBarInactiveTintColor: 'gray',
44+
tabBarLabelStyle: {
45+
fontSize: 13,
46+
margin: 0,
47+
},
48+
tabBarItemStyle: {
49+
flex: 1,
50+
},
7151

72-
// Fix a bug introduced in React Navigation v5 that is exposed
73-
// by setting `backgroundColor` to 'transparent', as we do.
74-
elevation: 0,
52+
tabBarPressColor: BRAND_COLOR,
53+
tabBarIndicatorStyle: {
54+
backgroundColor: BRAND_COLOR,
55+
},
56+
// TODO: `upperCaseLabel` vanished in react-navigation v5. We
57+
// used to use `false` for this, but it appears that the
58+
// effective default value is `true`, at least for material top
59+
// tab navigators:
60+
// https://github.com/react-navigation/react-navigation/issues/7952
61+
//
62+
// The coercion into uppercase only happens when the tab-bar
63+
// label (whether that comes directly from
64+
// `options.tabBarLabel`, or from `options.title`) is a string,
65+
// not a more complex React node. It also doesn't seem to happen
66+
// on bottom tab navigators, just material top ones; this
67+
// difference seems to align with Material Design choices (see
68+
// Greg's comment at
69+
// https://github.com/zulip/zulip-mobile/pull/4393#discussion_r556949209f).
70+
tabBarStyle: {
71+
backgroundColor: 'transparent',
7572

76-
// Setting borderWidth and elevation to 0 works around an issue
77-
// affecting react-navigation's createMaterialTopTabNavigator.
78-
// https://github.com/zulip/zulip-mobile/issues/2065
79-
// https://github.com/satya164/react-native-tab-view/pull/519#issuecomment-689724208
80-
// TODO: Brief testing suggests this workaround isn't needed; confirm.
81-
borderWidth: 0,
82-
elevation: 0, // eslint-disable-line no-dupe-keys
83-
},
73+
// Fix a bug introduced in React Navigation v5 that is exposed
74+
// by setting `backgroundColor` to 'transparent', as we do.
75+
elevation: 0,
76+
77+
// Setting borderWidth and elevation to 0 works around an issue
78+
// affecting react-navigation's createMaterialTopTabNavigator.
79+
// https://github.com/zulip/zulip-mobile/issues/2065
80+
// https://github.com/satya164/react-native-tab-view/pull/519#issuecomment-689724208
81+
// TODO: Brief testing suggests this workaround isn't needed; confirm.
82+
borderWidth: 0,
83+
elevation: 0, // eslint-disable-line no-dupe-keys
8484
},
8585
});

‎tools/tsflower

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,10 @@ run_only()
202202
done
203203
format_dir "${rootdir}"/types/@react-navigation
204204

205+
package=react-native-pager-view
206+
run_on_package "${package}"
207+
format_dir "${rootdir}"/types/"${package}"
208+
205209
package=react-native-tab-view
206210
run_on_package "${package}"
207211
# TODO: Send r-n-tab-view a .npmignore patch to stop shipping this directory.

‎types/@react-navigation/material-top-tabs/lib/typescript/src/index.js.flow

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
* @generated by TsFlower
33
*/
44
export { default as createMaterialTopTabNavigator } from './navigators/createMaterialTopTabNavigator';
5-
export { default as MaterialTopTabView } from './views/MaterialTopTabView';
65
export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
6+
export { default as MaterialTopTabView } from './views/MaterialTopTabView';
77
export {
8+
MaterialTopTabBarProps,
9+
MaterialTopTabNavigationEventMap,
810
MaterialTopTabNavigationOptions,
911
MaterialTopTabNavigationProp,
1012
MaterialTopTabScreenProps,
11-
MaterialTopTabBarProps,
12-
MaterialTopTabBarOptions,
1313
} from './types';

‎types/@react-navigation/material-top-tabs/lib/typescript/src/navigators/createMaterialTopTabNavigator.js.flow

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@ import type { JSX$Element as $tsflower_subst$React$JSX$Element } from 'tsflower/
66

77
import {
88
type DefaultNavigatorOptions,
9-
type TabRouterOptions,
9+
type ParamListBase,
1010
type TabNavigationState,
11+
type TabRouterOptions,
1112
} from '@react-navigation/native';
1213

1314
import {
1415
type MaterialTopTabNavigationConfig,
15-
type MaterialTopTabNavigationOptions,
1616
type MaterialTopTabNavigationEventMap,
17+
type MaterialTopTabNavigationOptions,
1718
} from '../types';
1819

1920
type Props = TabRouterOptions & MaterialTopTabNavigationConfig;
2021
declare function MaterialTopTabNavigator(Props): $tsflower_subst$React$JSX$Element;
2122
declare var _default: <
22-
ParamList: { +[key: string]: { ... } | void },
23+
ParamList: ParamListBase,
2324
>() => $tsflower_import_type$_$_40_react_2d_navigation_2f_native$TypedNavigator<
2425
ParamList,
2526
TabNavigationState<ParamList>,

0 commit comments

Comments
 (0)