@react-navigation/elements 2.9.41 → 2.9.43
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 +1 -3
- package/lib/module/SafeAreaProviderCompat.js.map +1 -1
- package/lib/module/useClientLayoutEffect.js +9 -0
- package/lib/module/useClientLayoutEffect.js.map +1 -0
- package/lib/module/useFrameSize.js +50 -3
- package/lib/module/useFrameSize.js.map +1 -1
- package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map +1 -1
- package/lib/typescript/src/useClientLayoutEffect.d.ts +6 -0
- package/lib/typescript/src/useClientLayoutEffect.d.ts.map +1 -0
- package/lib/typescript/src/useFrameSize.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/SafeAreaProviderCompat.tsx +1 -2
- package/src/useClientLayoutEffect.tsx +10 -0
- package/src/useFrameSize.tsx +61 -3
|
@@ -49,10 +49,8 @@ export function SafeAreaProviderCompat({
|
|
|
49
49
|
children: children
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
// SafeAreaProvider doesn't forward ref
|
|
54
|
-
// So we only pass onLayout to it
|
|
55
52
|
return /*#__PURE__*/_jsx(SafeAreaProvider, {
|
|
53
|
+
ref: ref,
|
|
56
54
|
initialMetrics: initialMetrics,
|
|
57
55
|
style: style,
|
|
58
56
|
onLayout: onLayout,
|
|
@@ -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","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
|
|
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,oBACEf,IAAA,CAACH,gBAAgB;QACfuB,GAAG,EAAEA,GAAI;QACThB,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":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Use `useEffect` during SSR and `useLayoutEffect` in the Browser & React Native to avoid warnings.
|
|
7
|
+
*/
|
|
8
|
+
export const useClientLayoutEffect = typeof document !== 'undefined' || typeof navigator !== 'undefined' && navigator.product === 'ReactNative' ? React.useLayoutEffect : React.useEffect;
|
|
9
|
+
//# sourceMappingURL=useClientLayoutEffect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useClientLayoutEffect","document","navigator","product","useLayoutEffect","useEffect"],"sourceRoot":"../../src","sources":["useClientLayoutEffect.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,GAChC,OAAOC,QAAQ,KAAK,WAAW,IAC9B,OAAOC,SAAS,KAAK,WAAW,IAAIA,SAAS,CAACC,OAAO,KAAK,aAAc,GACrEJ,KAAK,CAACK,eAAe,GACrBL,KAAK,CAACM,SAAS","ignoreList":[]}
|
|
@@ -5,6 +5,7 @@ import { Platform } from 'react-native';
|
|
|
5
5
|
import useLatestCallback from 'use-latest-callback';
|
|
6
6
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
7
7
|
import { getNamedContext } from "./getNamedContext.js";
|
|
8
|
+
import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
10
|
const FrameContext = getNamedContext('FrameContext', undefined);
|
|
10
11
|
export function useFrameSize(selector, throttle) {
|
|
@@ -12,7 +13,53 @@ export function useFrameSize(selector, throttle) {
|
|
|
12
13
|
if (context == null) {
|
|
13
14
|
throw new Error('useFrameSize must be used within a FrameSizeProvider');
|
|
14
15
|
}
|
|
15
|
-
const
|
|
16
|
+
const subscribe = throttle ? context.subscribeThrottled : context.subscribe;
|
|
17
|
+
const value = useSyncExternalStoreWithSelector(subscribe, context.getCurrent, context.getCurrent, selector);
|
|
18
|
+
|
|
19
|
+
// Record the frame at render time to compare in the layout effect.
|
|
20
|
+
const frame = context.getCurrent();
|
|
21
|
+
const [, forceUpdate] = React.useReducer(value => value + 1, 0);
|
|
22
|
+
const subscriptionRef = React.useRef(null);
|
|
23
|
+
const subscribedBeforeRef = React.useRef(false);
|
|
24
|
+
useClientLayoutEffect(() => {
|
|
25
|
+
// We have empty dependency array, but `Suspense` can replay the layout effect,
|
|
26
|
+
// So we need to explicitly check if we've subscribed before.
|
|
27
|
+
// Subsequent updates are handled by `useSyncExternalStoreWithSelector`.
|
|
28
|
+
// So we don't need to subscribe again.
|
|
29
|
+
if (subscribedBeforeRef.current) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const check = () => {
|
|
33
|
+
const nextFrame = context.getCurrent();
|
|
34
|
+
if (nextFrame !== frame && !Object.is(selector(nextFrame), value)) {
|
|
35
|
+
forceUpdate();
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// The sync external store subscription starts in a passive effect.
|
|
40
|
+
// So if layout was measured, we may not get it here before paint.
|
|
41
|
+
// We use a layout effect to check if it has changed since the last render,
|
|
42
|
+
// and force an update so it reflects the latest frame before the next paint.
|
|
43
|
+
const unsubscribe = subscribe(check);
|
|
44
|
+
subscriptionRef.current = unsubscribe;
|
|
45
|
+
check();
|
|
46
|
+
return unsubscribe;
|
|
47
|
+
|
|
48
|
+
// We only need to check for changes on initial render.
|
|
49
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
50
|
+
}, []);
|
|
51
|
+
React.useEffect(() => {
|
|
52
|
+
// We don't need to keep the subscription after passive effects run.
|
|
53
|
+
// At this point, `useSyncExternalStoreWithSelector` has already subscribed.
|
|
54
|
+
subscriptionRef.current?.();
|
|
55
|
+
subscriptionRef.current = null;
|
|
56
|
+
subscribedBeforeRef.current = true;
|
|
57
|
+
return () => {
|
|
58
|
+
// The layout effect should recheck when `Activity` becomes visible.
|
|
59
|
+
// So we clean this up when `Activity` becomes hidden.
|
|
60
|
+
subscribedBeforeRef.current = false;
|
|
61
|
+
};
|
|
62
|
+
}, []);
|
|
16
63
|
return value;
|
|
17
64
|
}
|
|
18
65
|
export function FrameSizeProvider({
|
|
@@ -81,7 +128,7 @@ export function FrameSizeProvider({
|
|
|
81
128
|
listeners.current.forEach(listener => listener());
|
|
82
129
|
});
|
|
83
130
|
const viewRef = React.useRef(null);
|
|
84
|
-
|
|
131
|
+
useClientLayoutEffect(() => {
|
|
85
132
|
if (Platform.OS === 'web') {
|
|
86
133
|
// We use ResizeObserver on web
|
|
87
134
|
return;
|
|
@@ -126,7 +173,7 @@ function FrameSizeListenerWeb({
|
|
|
126
173
|
onChange
|
|
127
174
|
}) {
|
|
128
175
|
const elementRef = React.useRef(null);
|
|
129
|
-
|
|
176
|
+
useClientLayoutEffect(() => {
|
|
130
177
|
if (elementRef.current == null) {
|
|
131
178
|
return;
|
|
132
179
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","useLatestCallback","useSyncExternalStoreWithSelector","getNamedContext","jsx","_jsx","jsxs","_jsxs","FrameContext","undefined","useFrameSize","selector","throttle","context","useContext","Error","
|
|
1
|
+
{"version":3,"names":["React","Platform","useLatestCallback","useSyncExternalStoreWithSelector","getNamedContext","useClientLayoutEffect","jsx","_jsx","jsxs","_jsxs","FrameContext","undefined","useFrameSize","selector","throttle","context","useContext","Error","subscribe","subscribeThrottled","value","getCurrent","frame","forceUpdate","useReducer","subscriptionRef","useRef","subscribedBeforeRef","current","check","nextFrame","Object","is","unsubscribe","useEffect","FrameSizeProvider","initialFrame","render","frameRef","width","height","listeners","Set","listener","add","delete","delay","timer","updated","waiting","throttledListener","clearTimeout","setTimeout","useMemo","onChange","forEach","viewRef","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,qBAmChE;yBAnCe,sBAAsB"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Use `useEffect` during SSR and `useLayoutEffect` in the Browser & React Native to avoid warnings.
|
|
4
|
+
*/
|
|
5
|
+
export declare const useClientLayoutEffect: typeof React.useLayoutEffect;
|
|
6
|
+
//# sourceMappingURL=useClientLayoutEffect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClientLayoutEffect.d.ts","sourceRoot":"","sources":["../../../src/useClientLayoutEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,qBAAqB,8BAIb,CAAC"}
|
|
@@ -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,EAAE,KAAK,iBAAiB,EAAY,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
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;AAOtE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,wBAAgB,YAAY,CAAC,CAAC,EAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,EAC7B,QAAQ,CAAC,EAAE,OAAO,GACjB,CAAC,CAwEH;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,qBAmHxB"}
|
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.9.
|
|
4
|
+
"version": "2.9.43",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"react-navigation",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@jest/globals": "^30.0.0",
|
|
51
51
|
"@react-native-masked-view/masked-view": "0.3.2",
|
|
52
|
-
"@react-navigation/native": "^7.4.
|
|
52
|
+
"@react-navigation/native": "^7.4.1",
|
|
53
53
|
"@testing-library/react-native": "^13.2.1",
|
|
54
54
|
"@types/react": "~19.2.4",
|
|
55
55
|
"@types/use-sync-external-store": "^1.5.0",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
64
64
|
"@react-native-masked-view/masked-view": ">= 0.2.0",
|
|
65
|
-
"@react-navigation/native": "^7.4.
|
|
65
|
+
"@react-navigation/native": "^7.4.1",
|
|
66
66
|
"react": ">= 18.2.0",
|
|
67
67
|
"react-native": "*",
|
|
68
68
|
"react-native-safe-area-context": ">= 4.0.0"
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
]
|
|
91
91
|
]
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "af1ea6efd22431d62141db20ee68577f78f4d828"
|
|
94
94
|
}
|
|
@@ -55,10 +55,9 @@ export function SafeAreaProviderCompat({ children, style }: Props) {
|
|
|
55
55
|
);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
// SafeAreaProvider doesn't forward ref
|
|
59
|
-
// So we only pass onLayout to it
|
|
60
58
|
return (
|
|
61
59
|
<SafeAreaProvider
|
|
60
|
+
ref={ref}
|
|
62
61
|
initialMetrics={initialMetrics}
|
|
63
62
|
style={style}
|
|
64
63
|
onLayout={onLayout}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Use `useEffect` during SSR and `useLayoutEffect` in the Browser & React Native to avoid warnings.
|
|
5
|
+
*/
|
|
6
|
+
export const useClientLayoutEffect =
|
|
7
|
+
typeof document !== 'undefined' ||
|
|
8
|
+
(typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
|
|
9
|
+
? React.useLayoutEffect
|
|
10
|
+
: React.useEffect;
|
package/src/useFrameSize.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import useLatestCallback from 'use-latest-callback';
|
|
|
4
4
|
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
|
|
5
5
|
|
|
6
6
|
import { getNamedContext } from './getNamedContext';
|
|
7
|
+
import { useClientLayoutEffect } from './useClientLayoutEffect';
|
|
7
8
|
|
|
8
9
|
type Frame = {
|
|
9
10
|
width: number;
|
|
@@ -35,13 +36,70 @@ export function useFrameSize<T>(
|
|
|
35
36
|
throw new Error('useFrameSize must be used within a FrameSizeProvider');
|
|
36
37
|
}
|
|
37
38
|
|
|
39
|
+
const subscribe = throttle ? context.subscribeThrottled : context.subscribe;
|
|
40
|
+
|
|
38
41
|
const value = useSyncExternalStoreWithSelector(
|
|
39
|
-
|
|
42
|
+
subscribe,
|
|
40
43
|
context.getCurrent,
|
|
41
44
|
context.getCurrent,
|
|
42
45
|
selector
|
|
43
46
|
);
|
|
44
47
|
|
|
48
|
+
// Record the frame at render time to compare in the layout effect.
|
|
49
|
+
const frame = context.getCurrent();
|
|
50
|
+
|
|
51
|
+
const [, forceUpdate] = React.useReducer((value: number) => value + 1, 0);
|
|
52
|
+
|
|
53
|
+
const subscriptionRef = React.useRef<RemoveListener | null>(null);
|
|
54
|
+
const subscribedBeforeRef = React.useRef(false);
|
|
55
|
+
|
|
56
|
+
useClientLayoutEffect(() => {
|
|
57
|
+
// We have empty dependency array, but `Suspense` can replay the layout effect,
|
|
58
|
+
// So we need to explicitly check if we've subscribed before.
|
|
59
|
+
// Subsequent updates are handled by `useSyncExternalStoreWithSelector`.
|
|
60
|
+
// So we don't need to subscribe again.
|
|
61
|
+
if (subscribedBeforeRef.current) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const check = () => {
|
|
66
|
+
const nextFrame = context.getCurrent();
|
|
67
|
+
|
|
68
|
+
if (nextFrame !== frame && !Object.is(selector(nextFrame), value)) {
|
|
69
|
+
forceUpdate();
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
// The sync external store subscription starts in a passive effect.
|
|
74
|
+
// So if layout was measured, we may not get it here before paint.
|
|
75
|
+
// We use a layout effect to check if it has changed since the last render,
|
|
76
|
+
// and force an update so it reflects the latest frame before the next paint.
|
|
77
|
+
const unsubscribe = subscribe(check);
|
|
78
|
+
|
|
79
|
+
subscriptionRef.current = unsubscribe;
|
|
80
|
+
|
|
81
|
+
check();
|
|
82
|
+
|
|
83
|
+
return unsubscribe;
|
|
84
|
+
|
|
85
|
+
// We only need to check for changes on initial render.
|
|
86
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
87
|
+
}, []);
|
|
88
|
+
|
|
89
|
+
React.useEffect(() => {
|
|
90
|
+
// We don't need to keep the subscription after passive effects run.
|
|
91
|
+
// At this point, `useSyncExternalStoreWithSelector` has already subscribed.
|
|
92
|
+
subscriptionRef.current?.();
|
|
93
|
+
subscriptionRef.current = null;
|
|
94
|
+
subscribedBeforeRef.current = true;
|
|
95
|
+
|
|
96
|
+
return () => {
|
|
97
|
+
// The layout effect should recheck when `Activity` becomes visible.
|
|
98
|
+
// So we clean this up when `Activity` becomes hidden.
|
|
99
|
+
subscribedBeforeRef.current = false;
|
|
100
|
+
};
|
|
101
|
+
}, []);
|
|
102
|
+
|
|
45
103
|
return value;
|
|
46
104
|
}
|
|
47
105
|
|
|
@@ -139,7 +197,7 @@ export function FrameSizeProvider({
|
|
|
139
197
|
|
|
140
198
|
const viewRef = React.useRef<View>(null);
|
|
141
199
|
|
|
142
|
-
|
|
200
|
+
useClientLayoutEffect(() => {
|
|
143
201
|
if (Platform.OS === 'web') {
|
|
144
202
|
// We use ResizeObserver on web
|
|
145
203
|
return;
|
|
@@ -182,7 +240,7 @@ function FrameSizeListenerWeb({
|
|
|
182
240
|
}) {
|
|
183
241
|
const elementRef = React.useRef<HTMLDivElement>(null);
|
|
184
242
|
|
|
185
|
-
|
|
243
|
+
useClientLayoutEffect(() => {
|
|
186
244
|
if (elementRef.current == null) {
|
|
187
245
|
return;
|
|
188
246
|
}
|