@react-navigation/elements 2.8.4 → 2.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/SafeAreaProviderCompat.js +26 -16
- package/lib/module/SafeAreaProviderCompat.js.map +1 -1
- package/lib/module/useFrameSize.js +34 -60
- package/lib/module/useFrameSize.js.map +1 -1
- package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map +1 -1
- package/lib/typescript/src/useFrameSize.d.ts +6 -4
- package/lib/typescript/src/useFrameSize.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/SafeAreaProviderCompat.tsx +31 -16
- package/src/useFrameSize.tsx +31 -79
|
@@ -32,23 +32,33 @@ export function SafeAreaProviderCompat({
|
|
|
32
32
|
style
|
|
33
33
|
}) {
|
|
34
34
|
const insets = React.useContext(SafeAreaInsetsContext);
|
|
35
|
-
|
|
35
|
+
return /*#__PURE__*/_jsx(FrameSizeProvider, {
|
|
36
36
|
initialFrame: initialMetrics.frame,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
37
|
+
render: ({
|
|
38
|
+
ref,
|
|
39
|
+
onLayout
|
|
40
|
+
}) => {
|
|
41
|
+
if (insets) {
|
|
42
|
+
// If we already have insets, don't wrap the stack in another safe area provider
|
|
43
|
+
// This avoids an issue with updates at the cost of potentially incorrect values
|
|
44
|
+
// https://github.com/react-navigation/react-navigation/issues/174
|
|
45
|
+
return /*#__PURE__*/_jsx(View, {
|
|
46
|
+
ref: ref,
|
|
47
|
+
onLayout: onLayout,
|
|
48
|
+
style: [styles.container, style],
|
|
49
|
+
children: children
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// SafeAreaProvider doesn't forward ref
|
|
54
|
+
// So we only pass onLayout to it
|
|
55
|
+
return /*#__PURE__*/_jsx(SafeAreaProvider, {
|
|
56
|
+
initialMetrics: initialMetrics,
|
|
57
|
+
style: style,
|
|
58
|
+
onLayout: onLayout,
|
|
59
|
+
children: children
|
|
60
|
+
});
|
|
61
|
+
}
|
|
52
62
|
});
|
|
53
63
|
}
|
|
54
64
|
SafeAreaProviderCompat.initialMetrics = initialMetrics;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Dimensions","Platform","StyleSheet","View","initialWindowMetrics","SafeAreaInsetsContext","SafeAreaProvider","FrameSizeProvider","jsx","_jsx","width","height","get","initialMetrics","OS","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","useContext","initialFrame","styles","container","create","flex"],"sourceRoot":"../../src","sources":["SafeAreaProviderCompat.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,EACVC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAEC,cAAc;AACrB,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,gBAAgB,QACX,gCAAgC;AAEvC,SAASC,iBAAiB,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOnD,MAAM;EAAEC,KAAK,GAAG,CAAC;EAAEC,MAAM,GAAG;AAAE,CAAC,GAAGX,UAAU,CAACY,GAAG,CAAC,QAAQ,CAAC;;AAE1D;AACA;AACA;AACA,MAAMC,cAAc,GAClBZ,QAAQ,CAACa,EAAE,KAAK,KAAK,IAAIV,oBAAoB,IAAI,IAAI,GACjD;EACEW,KAAK,EAAE;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEP,KAAK;IAAEC;EAAO,CAAC;EACpCO,MAAM,EAAE;IAAEC,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE;AACjD,CAAC,GACDlB,oBAAoB;AAE1B,OAAO,SAASmB,sBAAsBA,CAAC;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EACjE,MAAMP,MAAM,GAAGnB,KAAK,CAAC2B,UAAU,CAACrB,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"names":["React","Dimensions","Platform","StyleSheet","View","initialWindowMetrics","SafeAreaInsetsContext","SafeAreaProvider","FrameSizeProvider","jsx","_jsx","width","height","get","initialMetrics","OS","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","useContext","initialFrame","render","ref","onLayout","styles","container","create","flex"],"sourceRoot":"../../src","sources":["SafeAreaProviderCompat.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,EACVC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAEC,cAAc;AACrB,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,gBAAgB,QACX,gCAAgC;AAEvC,SAASC,iBAAiB,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOnD,MAAM;EAAEC,KAAK,GAAG,CAAC;EAAEC,MAAM,GAAG;AAAE,CAAC,GAAGX,UAAU,CAACY,GAAG,CAAC,QAAQ,CAAC;;AAE1D;AACA;AACA;AACA,MAAMC,cAAc,GAClBZ,QAAQ,CAACa,EAAE,KAAK,KAAK,IAAIV,oBAAoB,IAAI,IAAI,GACjD;EACEW,KAAK,EAAE;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEP,KAAK;IAAEC;EAAO,CAAC;EACpCO,MAAM,EAAE;IAAEC,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE;AACjD,CAAC,GACDlB,oBAAoB;AAE1B,OAAO,SAASmB,sBAAsBA,CAAC;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAE;EACjE,MAAMP,MAAM,GAAGnB,KAAK,CAAC2B,UAAU,CAACrB,qBAAqB,CAAC;EAEtD,oBACEI,IAAA,CAACF,iBAAiB;IAChBoB,YAAY,EAAEd,cAAc,CAACE,KAAM;IACnCa,MAAM,EAAEA,CAAC;MAAEC,GAAG;MAAEC;IAAS,CAAC,KAAK;MAC7B,IAAIZ,MAAM,EAAE;QACV;QACA;QACA;QACA,oBACET,IAAA,CAACN,IAAI;UACH0B,GAAG,EAAEA,GAAI;UACTC,QAAQ,EAAEA,QAAS;UACnBL,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,CAAE;UAAAD,QAAA,EAEhCA;QAAQ,CACL,CAAC;MAEX;;MAEA;MACA;MACA,oBACEf,IAAA,CAACH,gBAAgB;QACfO,cAAc,EAAEA,cAAe;QAC/BY,KAAK,EAAEA,KAAM;QACbK,QAAQ,EAAEA,QAAS;QAAAN,QAAA,EAElBA;MAAQ,CACO,CAAC;IAEvB;EAAE,CACH,CAAC;AAEN;AAEAD,sBAAsB,CAACV,cAAc,GAAGA,cAAc;AAEtD,MAAMkB,MAAM,GAAG7B,UAAU,CAAC+B,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { Platform
|
|
5
|
-
import {
|
|
6
|
-
// eslint-disable-next-line no-restricted-imports
|
|
7
|
-
useSafeAreaFrame } from 'react-native-safe-area-context';
|
|
4
|
+
import { Platform } from 'react-native';
|
|
8
5
|
import useLatestCallback from 'use-latest-callback';
|
|
9
6
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
10
|
-
|
|
11
|
-
// Load with require to avoid error from webpack due to missing export in older versions
|
|
12
|
-
// eslint-disable-next-line import-x/no-commonjs
|
|
13
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
const SafeAreaListener = require('react-native-safe-area-context').SafeAreaListener;
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
8
|
const FrameContext = /*#__PURE__*/React.createContext(undefined);
|
|
16
9
|
export function useFrameSize(selector, throttle) {
|
|
17
10
|
const context = React.useContext(FrameContext);
|
|
@@ -23,21 +16,7 @@ export function useFrameSize(selector, throttle) {
|
|
|
23
16
|
}
|
|
24
17
|
export function FrameSizeProvider({
|
|
25
18
|
initialFrame,
|
|
26
|
-
|
|
27
|
-
}) {
|
|
28
|
-
const context = React.useContext(FrameContext);
|
|
29
|
-
if (context != null) {
|
|
30
|
-
// If the context is already present, don't wrap again
|
|
31
|
-
return children;
|
|
32
|
-
}
|
|
33
|
-
return /*#__PURE__*/_jsx(FrameSizeProviderInner, {
|
|
34
|
-
initialFrame: initialFrame,
|
|
35
|
-
children: children
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
function FrameSizeProviderInner({
|
|
39
|
-
initialFrame,
|
|
40
|
-
children
|
|
19
|
+
render
|
|
41
20
|
}) {
|
|
42
21
|
const frameRef = React.useRef({
|
|
43
22
|
width: initialFrame.width,
|
|
@@ -100,47 +79,42 @@ function FrameSizeProviderInner({
|
|
|
100
79
|
};
|
|
101
80
|
listeners.current.forEach(listener => listener());
|
|
102
81
|
});
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
82
|
+
const viewRef = React.useRef(null);
|
|
83
|
+
React.useEffect(() => {
|
|
84
|
+
if (Platform.OS === 'web') {
|
|
85
|
+
// We use ResizeObserver on web
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
viewRef.current?.measure((_x, _y, width, height) => {
|
|
89
|
+
onChange({
|
|
90
|
+
width,
|
|
91
|
+
height
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
}, [onChange]);
|
|
95
|
+
const onLayout = event => {
|
|
96
|
+
const {
|
|
97
|
+
width,
|
|
98
|
+
height
|
|
99
|
+
} = event.nativeEvent.layout;
|
|
100
|
+
onChange({
|
|
101
|
+
width,
|
|
102
|
+
height
|
|
103
|
+
});
|
|
104
|
+
};
|
|
105
|
+
return /*#__PURE__*/_jsxs(FrameContext.Provider, {
|
|
106
|
+
value: context,
|
|
107
|
+
children: [Platform.OS === 'web' ? /*#__PURE__*/_jsx(FrameSizeListenerWeb, {
|
|
110
108
|
onChange: onChange
|
|
111
|
-
}) :
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
* Passing `pointerEvents="none"` to `SafeAreaListener` doesn't work
|
|
115
|
-
* So we wrap it in a `View` and disable pointer events on it
|
|
116
|
-
*/
|
|
117
|
-
_jsx(View, {
|
|
118
|
-
style: StyleSheet.absoluteFill,
|
|
119
|
-
pointerEvents: "none",
|
|
120
|
-
children: /*#__PURE__*/_jsx(SafeAreaListener, {
|
|
121
|
-
onChange: ({
|
|
122
|
-
frame
|
|
123
|
-
}) => onChange(frame),
|
|
124
|
-
style: StyleSheet.absoluteFill
|
|
125
|
-
})
|
|
109
|
+
}) : null, render({
|
|
110
|
+
ref: viewRef,
|
|
111
|
+
onLayout
|
|
126
112
|
})]
|
|
127
113
|
});
|
|
128
114
|
}
|
|
129
115
|
|
|
130
|
-
//
|
|
131
|
-
//
|
|
132
|
-
function FrameSizeListenerNativeFallback({
|
|
133
|
-
onChange
|
|
134
|
-
}) {
|
|
135
|
-
const frame = useSafeAreaFrame();
|
|
136
|
-
React.useLayoutEffect(() => {
|
|
137
|
-
onChange(frame);
|
|
138
|
-
}, [frame, onChange]);
|
|
139
|
-
return null;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
// FIXME: On the Web, the safe area frame value doesn't update on resize
|
|
143
|
-
// So we workaround this by measuring the frame on resize
|
|
116
|
+
// FIXME: On the Web, `onLayout` doesn't fire on resize
|
|
117
|
+
// So we workaround this by using ResizeObserver
|
|
144
118
|
function FrameSizeListenerWeb({
|
|
145
119
|
onChange
|
|
146
120
|
}) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","
|
|
1
|
+
{"version":3,"names":["React","Platform","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","jsxs","_jsxs","FrameContext","createContext","undefined","useFrameSize","selector","throttle","context","useContext","Error","value","subscribeThrottled","subscribe","getCurrent","FrameSizeProvider","initialFrame","render","frameRef","useRef","width","height","listeners","Set","current","listener","add","delete","delay","timer","updated","waiting","throttledListener","clearTimeout","setTimeout","unsubscribe","useMemo","onChange","frame","forEach","viewRef","useEffect","OS","measure","_x","_y","onLayout","event","nativeEvent","layout","Provider","children","FrameSizeListenerWeb","ref","elementRef","rect","getBoundingClientRect","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","style","position","left","right","top","bottom","pointerEvents","visibility"],"sourceRoot":"../../src","sources":["useFrameSize.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SafeAreaProviderCompat.d.ts","sourceRoot":"","sources":["../../../src/SafeAreaProviderCompat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"SafeAreaProviderCompat.d.ts","sourceRoot":"","sources":["../../../src/SafeAreaProviderCompat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,2CAoChE;yBApCe,sBAAsB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type LayoutChangeEvent, View } from 'react-native';
|
|
3
3
|
type Frame = {
|
|
4
4
|
width: number;
|
|
5
5
|
height: number;
|
|
@@ -7,9 +7,11 @@ type Frame = {
|
|
|
7
7
|
export declare function useFrameSize<T>(selector: (frame: Frame) => T, throttle?: boolean): T;
|
|
8
8
|
type FrameSizeProviderProps = {
|
|
9
9
|
initialFrame: Frame;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
render: (props: {
|
|
11
|
+
ref: React.RefObject<View | null>;
|
|
12
|
+
onLayout: (event: LayoutChangeEvent) => void;
|
|
13
|
+
}) => React.ReactNode;
|
|
12
14
|
};
|
|
13
|
-
export declare function FrameSizeProvider({ initialFrame,
|
|
15
|
+
export declare function FrameSizeProvider({ initialFrame, render, }: FrameSizeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export {};
|
|
15
17
|
//# sourceMappingURL=useFrameSize.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,iBAAiB,EAAY,IAAI,EAAE,MAAM,cAAc,CAAC;AAItE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgBF,wBAAgB,YAAY,CAAC,CAAC,EAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,EAC7B,QAAQ,CAAC,EAAE,OAAO,GACjB,CAAC,CAeH;AAED,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,KAAK,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;QAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC9C,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,MAAM,GACP,EAAE,sBAAsB,2CA4GxB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/elements",
|
|
3
3
|
"description": "UI Components for React Navigation",
|
|
4
|
-
"version": "2.8.
|
|
4
|
+
"version": "2.8.5",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"react-navigation",
|
|
@@ -91,5 +91,5 @@
|
|
|
91
91
|
]
|
|
92
92
|
]
|
|
93
93
|
},
|
|
94
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "279a532c6cba33899a7ff5e722dc7bbaf57a54df"
|
|
95
95
|
}
|
|
@@ -36,23 +36,38 @@ const initialMetrics =
|
|
|
36
36
|
export function SafeAreaProviderCompat({ children, style }: Props) {
|
|
37
37
|
const insets = React.useContext(SafeAreaInsetsContext);
|
|
38
38
|
|
|
39
|
-
children = (
|
|
40
|
-
<FrameSizeProvider initialFrame={initialMetrics.frame}>
|
|
41
|
-
{children}
|
|
42
|
-
</FrameSizeProvider>
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
if (insets) {
|
|
46
|
-
// If we already have insets, don't wrap the stack in another safe area provider
|
|
47
|
-
// This avoids an issue with updates at the cost of potentially incorrect values
|
|
48
|
-
// https://github.com/react-navigation/react-navigation/issues/174
|
|
49
|
-
return <View style={[styles.container, style]}>{children}</View>;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
39
|
return (
|
|
53
|
-
<
|
|
54
|
-
{
|
|
55
|
-
|
|
40
|
+
<FrameSizeProvider
|
|
41
|
+
initialFrame={initialMetrics.frame}
|
|
42
|
+
render={({ ref, onLayout }) => {
|
|
43
|
+
if (insets) {
|
|
44
|
+
// If we already have insets, don't wrap the stack in another safe area provider
|
|
45
|
+
// This avoids an issue with updates at the cost of potentially incorrect values
|
|
46
|
+
// https://github.com/react-navigation/react-navigation/issues/174
|
|
47
|
+
return (
|
|
48
|
+
<View
|
|
49
|
+
ref={ref}
|
|
50
|
+
onLayout={onLayout}
|
|
51
|
+
style={[styles.container, style]}
|
|
52
|
+
>
|
|
53
|
+
{children}
|
|
54
|
+
</View>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// SafeAreaProvider doesn't forward ref
|
|
59
|
+
// So we only pass onLayout to it
|
|
60
|
+
return (
|
|
61
|
+
<SafeAreaProvider
|
|
62
|
+
initialMetrics={initialMetrics}
|
|
63
|
+
style={style}
|
|
64
|
+
onLayout={onLayout}
|
|
65
|
+
>
|
|
66
|
+
{children}
|
|
67
|
+
</SafeAreaProvider>
|
|
68
|
+
);
|
|
69
|
+
}}
|
|
70
|
+
/>
|
|
56
71
|
);
|
|
57
72
|
}
|
|
58
73
|
|
package/src/useFrameSize.tsx
CHANGED
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
Platform,
|
|
4
|
-
type StyleProp,
|
|
5
|
-
StyleSheet,
|
|
6
|
-
View,
|
|
7
|
-
type ViewStyle,
|
|
8
|
-
} from 'react-native';
|
|
9
|
-
import {
|
|
10
|
-
// eslint-disable-next-line no-restricted-imports
|
|
11
|
-
useSafeAreaFrame,
|
|
12
|
-
} from 'react-native-safe-area-context';
|
|
2
|
+
import { type LayoutChangeEvent, Platform, View } from 'react-native';
|
|
13
3
|
import useLatestCallback from 'use-latest-callback';
|
|
14
4
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
15
5
|
|
|
16
|
-
// Load with require to avoid error from webpack due to missing export in older versions
|
|
17
|
-
// eslint-disable-next-line import-x/no-commonjs
|
|
18
|
-
const SafeAreaListener = require('react-native-safe-area-context')
|
|
19
|
-
.SafeAreaListener as
|
|
20
|
-
| typeof import('react-native-safe-area-context').SafeAreaListener
|
|
21
|
-
| undefined;
|
|
22
|
-
|
|
23
6
|
type Frame = {
|
|
24
7
|
width: number;
|
|
25
8
|
height: number;
|
|
@@ -61,31 +44,15 @@ export function useFrameSize<T>(
|
|
|
61
44
|
|
|
62
45
|
type FrameSizeProviderProps = {
|
|
63
46
|
initialFrame: Frame;
|
|
64
|
-
|
|
65
|
-
|
|
47
|
+
render: (props: {
|
|
48
|
+
ref: React.RefObject<View | null>;
|
|
49
|
+
onLayout: (event: LayoutChangeEvent) => void;
|
|
50
|
+
}) => React.ReactNode;
|
|
66
51
|
};
|
|
67
52
|
|
|
68
53
|
export function FrameSizeProvider({
|
|
69
54
|
initialFrame,
|
|
70
|
-
|
|
71
|
-
}: FrameSizeProviderProps) {
|
|
72
|
-
const context = React.useContext(FrameContext);
|
|
73
|
-
|
|
74
|
-
if (context != null) {
|
|
75
|
-
// If the context is already present, don't wrap again
|
|
76
|
-
return children;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
<FrameSizeProviderInner initialFrame={initialFrame}>
|
|
81
|
-
{children}
|
|
82
|
-
</FrameSizeProviderInner>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
function FrameSizeProviderInner({
|
|
87
|
-
initialFrame,
|
|
88
|
-
children,
|
|
55
|
+
render,
|
|
89
56
|
}: FrameSizeProviderProps) {
|
|
90
57
|
const frameRef = React.useRef<Frame>({
|
|
91
58
|
width: initialFrame.width,
|
|
@@ -167,52 +134,37 @@ function FrameSizeProviderInner({
|
|
|
167
134
|
listeners.current.forEach((listener) => listener());
|
|
168
135
|
});
|
|
169
136
|
|
|
137
|
+
const viewRef = React.useRef<View>(null);
|
|
138
|
+
|
|
139
|
+
React.useEffect(() => {
|
|
140
|
+
if (Platform.OS === 'web') {
|
|
141
|
+
// We use ResizeObserver on web
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
viewRef.current?.measure((_x, _y, width, height) => {
|
|
146
|
+
onChange({ width, height });
|
|
147
|
+
});
|
|
148
|
+
}, [onChange]);
|
|
149
|
+
|
|
150
|
+
const onLayout = (event: LayoutChangeEvent) => {
|
|
151
|
+
const { width, height } = event.nativeEvent.layout;
|
|
152
|
+
|
|
153
|
+
onChange({ width, height });
|
|
154
|
+
};
|
|
155
|
+
|
|
170
156
|
return (
|
|
171
|
-
|
|
172
|
-
<FrameContext.Provider value={context}>{children}</FrameContext.Provider>
|
|
173
|
-
{/**
|
|
174
|
-
* The frame size listener must come after the content
|
|
175
|
-
* This makes sure that any nested navigator is in the first descendant chain
|
|
176
|
-
* This heuristic is used by react-native-screens to find nested navigators
|
|
177
|
-
*/}
|
|
157
|
+
<FrameContext.Provider value={context}>
|
|
178
158
|
{Platform.OS === 'web' ? (
|
|
179
159
|
<FrameSizeListenerWeb onChange={onChange} />
|
|
180
|
-
) :
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Passing `pointerEvents="none"` to `SafeAreaListener` doesn't work
|
|
185
|
-
* So we wrap it in a `View` and disable pointer events on it
|
|
186
|
-
*/
|
|
187
|
-
<View style={StyleSheet.absoluteFill} pointerEvents="none">
|
|
188
|
-
<SafeAreaListener
|
|
189
|
-
onChange={({ frame }) => onChange(frame)}
|
|
190
|
-
style={StyleSheet.absoluteFill}
|
|
191
|
-
/>
|
|
192
|
-
</View>
|
|
193
|
-
)}
|
|
194
|
-
</>
|
|
160
|
+
) : null}
|
|
161
|
+
{render({ ref: viewRef, onLayout })}
|
|
162
|
+
</FrameContext.Provider>
|
|
195
163
|
);
|
|
196
164
|
}
|
|
197
165
|
|
|
198
|
-
//
|
|
199
|
-
//
|
|
200
|
-
function FrameSizeListenerNativeFallback({
|
|
201
|
-
onChange,
|
|
202
|
-
}: {
|
|
203
|
-
onChange: (frame: Frame) => void;
|
|
204
|
-
}) {
|
|
205
|
-
const frame = useSafeAreaFrame();
|
|
206
|
-
|
|
207
|
-
React.useLayoutEffect(() => {
|
|
208
|
-
onChange(frame);
|
|
209
|
-
}, [frame, onChange]);
|
|
210
|
-
|
|
211
|
-
return null;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
// FIXME: On the Web, the safe area frame value doesn't update on resize
|
|
215
|
-
// So we workaround this by measuring the frame on resize
|
|
166
|
+
// FIXME: On the Web, `onLayout` doesn't fire on resize
|
|
167
|
+
// So we workaround this by using ResizeObserver
|
|
216
168
|
function FrameSizeListenerWeb({
|
|
217
169
|
onChange,
|
|
218
170
|
}: {
|