Skip to content

Commit dde1861

Browse files
gnpricechrisbobbe
authored andcommitted
deps: Upgrade react-native-safe-area-context and react-native-screens
These need an upgrade in order to upgrade react-navigation to 6.x: https://reactnavigation.org/docs/upgrading-from-5.x/#minimum-requirements The react-native-safe-area-context upgrade is also needed as part of the fix (found by Chris) for a conspicuous layout issue, where the recently-added app bar on the "streams" screen gets messed up on iOS: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Regression.20in.20.22Streams.22.20screen/near/1412459 Performed the upgrade with: $ yarn upgrade --latest react-native-safe-area-context react-native-screens followed by updating the react-native-safe-area-context type definitions like so: $ git commit -am 'wip partial upgrade' $ tools/tsflower unpack # … resolved a rebase conflict, fixed some new type errors … $ tools/tsflower pack $ git commit --amend Then in our own code, dropped enabling react-native-screens, because that's now done by default: https://github.com/software-mansion/react-native-screens/releases/tag/3.0.0
1 parent 09eee4e commit dde1861

File tree

38 files changed

+423
-80
lines changed

38 files changed

+423
-80
lines changed

ios/Podfile.lock

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,12 @@ PODS:
305305
- React-Core
306306
- react-native-photo-view (1.5.2):
307307
- React
308-
- react-native-safe-area-context (3.4.1):
309-
- React-Core
308+
- react-native-safe-area-context (4.3.1):
309+
- RCT-Folly
310+
- RCTRequired
311+
- RCTTypeSafety
312+
- React
313+
- ReactCommon/turbomodule/core
310314
- react-native-simple-toast (1.1.3):
311315
- React-Core
312316
- Toast (~> 4.0.0)
@@ -418,8 +422,9 @@ PODS:
418422
- React-RCTVibration
419423
- ReactCommon/turbomodule/core
420424
- Yoga
421-
- RNScreens (2.18.1):
425+
- RNScreens (3.13.1):
422426
- React-Core
427+
- React-RCTImage
423428
- RNSentry (3.4.3):
424429
- React-Core
425430
- Sentry (= 7.11.0)
@@ -704,7 +709,7 @@ SPEC CHECKSUMS:
704709
react-native-image-picker: cffb727cf2f59bd5c0408e30b3dbe0b935f88835
705710
react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
706711
react-native-photo-view: 63e9e61da873531f931008b545d8d10c5373ddf8
707-
react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
712+
react-native-safe-area-context: 6c12e3859b6f27b25de4fee8201cfb858432d8de
708713
react-native-simple-toast: bf002828cf816775a6809f7a9ec3907509bce11f
709714
react-native-webview: 159034a856a6e95995f5bf2eed40d70b103d6572
710715
React-perflogger: 0afaf2f01a47fd0fc368a93bfbb5bd3b26db6e7f
@@ -726,7 +731,7 @@ SPEC CHECKSUMS:
726731
RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa
727732
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
728733
RNReanimated: e28dfaa950064b674fde0a9b736e62b9dff500a7
729-
RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
734+
RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
730735
RNSentry: 85f6525b5fe8d2ada065858026b338605b3c09da
731736
RNVectorIcons: 7923e585eaeb139b9f4531d25a125a1500162a0b
732737
Sentry: 0c5cd63d714187b4a39c331c1f0eb04ba7868341

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@
6060
"react-native-image-picker": "^4.1.1",
6161
"react-native-photo-view": "alwx/react-native-photo-view#c58fd6b30",
6262
"react-native-reanimated": "^2.2.0 <2.3.0",
63-
"react-native-safe-area-context": "^3.1.7",
64-
"react-native-screens": "^2.10.1",
63+
"react-native-safe-area-context": "^4.3.1",
64+
"react-native-screens": "^3.13.1",
6565
"react-native-simple-toast": "^1.0.0",
6666
"react-native-tab-view": "^2.15.2",
6767
"react-native-url-polyfill": "^1.3.0",

src/ZulipMobile.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { Platform, UIManager } from 'react-native';
55
import 'react-native-url-polyfill/auto';
66
// $FlowFixMe[untyped-import]
77
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
8-
// $FlowFixMe[untyped-import]
9-
import { enableScreens } from 'react-native-screens';
108

119
import RootErrorBoundary from './RootErrorBoundary';
1210
import ZulipNavigationContainer from './nav/ZulipNavigationContainer';
@@ -22,8 +20,6 @@ import ZulipSafeAreaProvider from './boot/ZulipSafeAreaProvider';
2220

2321
initializeSentry();
2422

25-
enableScreens();
26-
2723
// $FlowFixMe[prop-missing]
2824
console.disableYellowBox = true; // eslint-disable-line
2925

types/patches/0002-tsflower-rnsac-Fix-ReadOnlyArray-reference-to-litera.patch

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,28 @@ TS references to `ReadonlyArray` to simply use the name
1313
`$ReadOnlyArray` directly, instead of using its general "subst"
1414
mechanism.
1515
---
16-
.../lib/typescript/src/SafeArea.types.js.flow | 3 +--
16+
.../lib/typescript/SafeArea.types.js.flow | 3 +--
1717
1 file changed, 1 insertion(+), 2 deletions(-)
1818

19-
diff --git types/react-native-safe-area-context/lib/typescript/src/SafeArea.types.js.flow types/react-native-safe-area-context/lib/typescript/src/SafeArea.types.js.flow
20-
index f3c41af41..e31ab1a65 100644
21-
--- types/react-native-safe-area-context/lib/typescript/src/SafeArea.types.js.flow
22-
+++ types/react-native-safe-area-context/lib/typescript/src/SafeArea.types.js.flow
23-
@@ -9,7 +9,6 @@ import type {
19+
diff --git types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow
20+
index c1d8cbafe..88ba6cc09 100644
21+
--- types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow
22+
+++ types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow
23+
@@ -7,7 +7,6 @@ import type {
2424
} from 'tsflower/subst/react-native';
2525

2626
import type { ReactNode as $tsflower_subst$React$ReactNode } from 'tsflower/subst/react';
2727
-import type { ReadonlyArray } from 'tsflower/subst/lib';
2828
import * as React from 'react';
2929
import 'react-native';
3030
export type Edge = 'top' | 'right' | 'bottom' | 'left';
31-
@@ -45,6 +44,6 @@ export interface NativeSafeAreaProviderProps {
32-
export type NativeSafeAreaViewProps = $tsflower_subst$RN$ViewProps & {
33-
children?: $tsflower_subst$React$ReactNode,
34-
mode?: 'padding' | 'margin',
35-
- edges?: ReadonlyArray<Edge>,
36-
+ edges?: $ReadOnlyArray<Edge>,
37-
...
38-
};
31+
@@ -42,5 +41,5 @@ export interface NativeSafeAreaProviderProps extends $tsflower_subst$RN$ViewProp
32+
export interface NativeSafeAreaViewProps extends $tsflower_subst$RN$ViewProps {
33+
children?: $tsflower_subst$React$ReactNode;
34+
mode?: 'padding' | 'margin';
35+
- edges?: ReadonlyArray<Edge>;
36+
+ edges?: $ReadOnlyArray<Edge>;
37+
}
3938
--
4039
2.32.0
4140

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
2+
From: Greg Price <[email protected]>
3+
Date: Tue, 7 Jun 2022 20:57:09 -0700
4+
Subject: [tsflower] Replace interface-extends with spread for non-interface
5+
bases
6+
MIME-Version: 1.0
7+
Content-Type: text/plain; charset=UTF-8
8+
Content-Transfer-Encoding: 8bit
9+
10+
In TypeScript, `interface T { … }` and `type T = { … }`, when there
11+
are no other type definitions for T, mean exactly the same thing.
12+
13+
In Flow, they're different -- an interface is a different kind of
14+
type from an object type. In particular, a further interface
15+
definition can extend an interface, but can't extend an object type.
16+
17+
Currently, TsFlower emits an interface when it sees an interface.
18+
That's good if the type definitions are going to go on to use that
19+
interface as the base for another interface, or for a class; it's
20+
bad if it was extending another type that turns out to be just an
21+
object type.
22+
23+
Probably an improvement to the heuristic would be to convert an
24+
interface declaration to an object type, with `extends` turned into
25+
a spread, when the base is an object type -- as it is in these
26+
examples.
27+
---
28+
.../lib/typescript/SafeArea.types.js.flow | 22 +++++++++++--------
29+
.../lib/typescript/SafeAreaContext.js.flow | 12 +++++-----
30+
.../specs/NativeSafeAreaProvider.js.flow | 8 ++++---
31+
.../specs/NativeSafeAreaView.js.flow | 10 +++++----
32+
4 files changed, 31 insertions(+), 21 deletions(-)
33+
34+
diff --git types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow
35+
index 88ba6cc09..056367669 100644
36+
--- types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow
37+
+++ types/react-native-safe-area-context/lib/typescript/SafeArea.types.js.flow
38+
@@ -33,13 +33,17 @@ export interface Metrics {
39+
export type InsetChangedEvent = $tsflower_subst$RN$NativeSyntheticEvent<Metrics>;
40+
export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;
41+
42+
-export interface NativeSafeAreaProviderProps extends $tsflower_subst$RN$ViewProps {
43+
- children?: $tsflower_subst$React$ReactNode;
44+
- onInsetsChange: InsetChangeNativeCallback;
45+
-}
46+
+export type NativeSafeAreaProviderProps = {
47+
+ ...$tsflower_subst$RN$ViewProps,
48+
+ children?: $tsflower_subst$React$ReactNode,
49+
+ onInsetsChange: InsetChangeNativeCallback,
50+
+ ...
51+
+};
52+
53+
-export interface NativeSafeAreaViewProps extends $tsflower_subst$RN$ViewProps {
54+
- children?: $tsflower_subst$React$ReactNode;
55+
- mode?: 'padding' | 'margin';
56+
- edges?: $ReadOnlyArray<Edge>;
57+
-}
58+
+export type NativeSafeAreaViewProps = {
59+
+ ...$tsflower_subst$RN$ViewProps,
60+
+ children?: $tsflower_subst$React$ReactNode,
61+
+ mode?: 'padding' | 'margin',
62+
+ edges?: $ReadOnlyArray<Edge>,
63+
+ ...
64+
+};
65+
diff --git types/react-native-safe-area-context/lib/typescript/SafeAreaContext.js.flow types/react-native-safe-area-context/lib/typescript/SafeAreaContext.js.flow
66+
index 7231a733b..5e7699444 100644
67+
--- types/react-native-safe-area-context/lib/typescript/SafeAreaContext.js.flow
68+
+++ types/react-native-safe-area-context/lib/typescript/SafeAreaContext.js.flow
69+
@@ -18,11 +18,13 @@ import { type EdgeInsets, type Metrics, type Rect } from './SafeArea.types';
70+
declare export var SafeAreaInsetsContext: $tsflower_subst$React$Context<EdgeInsets | null>;
71+
declare export var SafeAreaFrameContext: $tsflower_subst$React$Context<Rect | null>;
72+
73+
-export interface SafeAreaProviderProps extends $tsflower_subst$RN$ViewProps {
74+
- children?: $tsflower_subst$React$ReactNode;
75+
- initialMetrics?: Metrics | null;
76+
- initialSafeAreaInsets?: EdgeInsets | null;
77+
-}
78+
+export type SafeAreaProviderProps = {
79+
+ ...$tsflower_subst$RN$ViewProps,
80+
+ children?: $tsflower_subst$React$ReactNode,
81+
+ initialMetrics?: Metrics | null,
82+
+ initialSafeAreaInsets?: EdgeInsets | null,
83+
+ ...
84+
+};
85+
86+
declare export function SafeAreaProvider(SafeAreaProviderProps): $tsflower_subst$React$JSX$Element;
87+
declare export function useSafeAreaInsets(): EdgeInsets;
88+
diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow
89+
index 7a1594b3b..5d9e21df4 100644
90+
--- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow
91+
+++ types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow
92+
@@ -27,8 +27,10 @@ export type Event = Readonly<{
93+
...
94+
}>;
95+
96+
-export interface NativeProps extends $tsflower_subst$RN$ViewProps {
97+
- onInsetsChange?: DirectEventHandler<Event, 'paperInsetsChange'>;
98+
-}
99+
+export type NativeProps = {
100+
+ ...$tsflower_subst$RN$ViewProps,
101+
+ onInsetsChange?: DirectEventHandler<Event, 'paperInsetsChange'>,
102+
+ ...
103+
+};
104+
declare var _default: HostComponent<NativeProps>;
105+
export default _default;
106+
diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow
107+
index 6e8337b9b..300c246bb 100644
108+
--- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow
109+
+++ types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow
110+
@@ -5,10 +5,12 @@ import type { ViewProps as $tsflower_subst$RN$ViewProps } from 'tsflower/subst/r
111+
import { typeof WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
112+
import { type HostComponent } from 'react-native';
113+
114+
-export interface NativeProps extends $tsflower_subst$RN$ViewProps {
115+
- mode?: WithDefault<'padding' | 'margin', 'padding'>;
116+
- edges /* tsflower-warning: unimplemented: 'readonly' as type operator */?: string[] /* readonly string[] */;
117+
-}
118+
+export type NativeProps = {
119+
+ ...$tsflower_subst$RN$ViewProps,
120+
+ mode?: WithDefault<'padding' | 'margin', 'padding'>,
121+
+ edges /* tsflower-warning: unimplemented: 'readonly' as type operator */?: string[] /* readonly string[] */,
122+
+ ...
123+
+};
124+
125+
declare var _default: HostComponent<NativeProps>;
126+
export default _default;
127+
--
128+
2.32.0
129+
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
2+
From: Greg Price <[email protected]>
3+
Date: Tue, 7 Jun 2022 21:08:51 -0700
4+
Subject: [tsflower] Fix `import typeof` to `import type` for Flow-only types
5+
6+
I don't understand why TsFlower emitted `typeof` here; will have to
7+
debug.
8+
9+
Probably a key part of the story is that although upstream imports
10+
these as types, e.g.:
11+
12+
import type { DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
13+
14+
they don't actually exist in the TS type definitions in
15+
`@types/react-native`. They only exist as Flow definitions, in
16+
`.js` files in RN itself. This TsFlower behavior is what I'd expect
17+
to see if when it asks the TS type-checker about these symbols, it
18+
says that they *are* defined as values, but aren't as types.
19+
20+
(If that is the case, though, then I'd sure think these types aren't
21+
doing any good in the upstream type definitions. Perhaps they aren't?)
22+
---
23+
.../lib/typescript/specs/NativeSafeAreaContext.js.flow | 2 +-
24+
.../lib/typescript/specs/NativeSafeAreaProvider.js.flow | 5 +----
25+
.../lib/typescript/specs/NativeSafeAreaView.js.flow | 2 +-
26+
3 files changed, 3 insertions(+), 6 deletions(-)
27+
28+
diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
29+
index 4972a87fc..80f3194b4 100644
30+
--- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
31+
+++ types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
32+
@@ -1,7 +1,7 @@
33+
/* @flow
34+
* @generated by TsFlower
35+
*/
36+
-import { typeof Double } from 'react-native/Libraries/Types/CodegenTypes';
37+
+import { type Double } from 'react-native/Libraries/Types/CodegenTypes';
38+
import { typeof TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
39+
40+
export interface Spec extends TurboModule {
41+
diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow
42+
index 5d9e21df4..c7d784bd2 100644
43+
--- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow
44+
+++ types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaProvider.js.flow
45+
@@ -3,10 +3,7 @@
46+
*/
47+
import type { Readonly } from 'tsflower/subst/lib';
48+
import type { ViewProps as $tsflower_subst$RN$ViewProps } from 'tsflower/subst/react-native';
49+
-import {
50+
- typeof DirectEventHandler,
51+
- typeof Double,
52+
-} from 'react-native/Libraries/Types/CodegenTypes';
53+
+import { type DirectEventHandler, type Double } from 'react-native/Libraries/Types/CodegenTypes';
54+
import { type HostComponent } from 'react-native';
55+
56+
export type Event = Readonly<{
57+
diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow
58+
index 300c246bb..8095e858d 100644
59+
--- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow
60+
+++ types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaView.js.flow
61+
@@ -2,7 +2,7 @@
62+
* @generated by TsFlower
63+
*/
64+
import type { ViewProps as $tsflower_subst$RN$ViewProps } from 'tsflower/subst/react-native';
65+
-import { typeof WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
66+
+import { type WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
67+
import { type HostComponent } from 'react-native';
68+
69+
export type NativeProps = {
70+
--
71+
2.32.0
72+
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
2+
From: Greg Price <[email protected]>
3+
Date: Tue, 7 Jun 2022 21:19:03 -0700
4+
Subject: [tsflower] Substitute for react-native NativeMethods
5+
6+
Just a matter of importing from the appropriate specific module.
7+
---
8+
.../lib/typescript/SafeAreaView.js.flow | 2 +-
9+
.../lib/typescript/specs/NativeSafeAreaContext.js.flow | 2 +-
10+
2 files changed, 2 insertions(+), 2 deletions(-)
11+
12+
diff --git types/react-native-safe-area-context/lib/typescript/SafeAreaView.js.flow types/react-native-safe-area-context/lib/typescript/SafeAreaView.js.flow
13+
index 43be07963..3c9abf362 100644
14+
--- types/react-native-safe-area-context/lib/typescript/SafeAreaView.js.flow
15+
+++ types/react-native-safe-area-context/lib/typescript/SafeAreaView.js.flow
16+
@@ -1,7 +1,7 @@
17+
/* @flow
18+
* @generated by TsFlower
19+
*/
20+
-import type { NativeMethods as $tsflower_import_type$_$react_2d_native$NativeMethods } from 'react-native';
21+
+import type { NativeMethods as $tsflower_import_type$_$react_2d_native$NativeMethods } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
22+
23+
import type {
24+
ForwardRefExoticComponent as $tsflower_subst$React$ForwardRefExoticComponent,
25+
diff --git types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
26+
index 80f3194b4..58f386b04 100644
27+
--- types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
28+
+++ types/react-native-safe-area-context/lib/typescript/specs/NativeSafeAreaContext.js.flow
29+
@@ -2,7 +2,7 @@
30+
* @generated by TsFlower
31+
*/
32+
import { type Double } from 'react-native/Libraries/Types/CodegenTypes';
33+
-import { typeof TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
34+
+import { type TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
35+
36+
export interface Spec extends TurboModule {
37+
getConstants: () => {
38+
--
39+
2.32.0
40+

0 commit comments

Comments
 (0)