@react-navigation/elements 2.4.6 → 2.5.0

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.
Files changed (10) hide show
  1. package/lib/module/SafeAreaProviderCompat.js +1 -0
  2. package/lib/module/SafeAreaProviderCompat.js.map +1 -1
  3. package/lib/module/useFrameSize.js +46 -49
  4. package/lib/module/useFrameSize.js.map +1 -1
  5. package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map +1 -1
  6. package/lib/typescript/src/useFrameSize.d.ts +8 -4
  7. package/lib/typescript/src/useFrameSize.d.ts.map +1 -1
  8. package/package.json +4 -4
  9. package/src/SafeAreaProviderCompat.tsx +5 -1
  10. package/src/useFrameSize.tsx +79 -66
package/lib/module/SafeAreaProviderCompat.js CHANGED
@@ -33,6 +33,7 @@ export function SafeAreaProviderCompat({
33
33
  }) {
34
34
  const insets = React.useContext(SafeAreaInsetsContext);
35
35
  children = /*#__PURE__*/_jsx(FrameSizeProvider, {
36
+ initialFrame: initialMetrics.frame,
36
37
  children: children
37
38
  });
38
39
  if (insets) {
package/lib/module/SafeAreaProviderCompat.js.map CHANGED
@@ -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","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;EAEtDmB,QAAQ,gBAAGf,IAAA,CAACF,iBAAiB;IAAAiB,QAAA,EAAEA;EAAQ,CAAoB,CAAC;EAE5D,IAAIN,MAAM,EAAE;IACV;IACA;IACA;IACA,oBAAOT,IAAA,CAACN,IAAI;MAACsB,KAAK,EAAE,CAACE,MAAM,CAACC,SAAS,EAAEH,KAAK,CAAE;MAAAD,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAClE;EAEA,oBACEf,IAAA,CAACH,gBAAgB;IAACO,cAAc,EAAEA,cAAe;IAACY,KAAK,EAAEA,KAAM;IAAAD,QAAA,EAC5DA;EAAQ,CACO,CAAC;AAEvB;AAEAD,sBAAsB,CAACV,cAAc,GAAGA,cAAc;AAEtD,MAAMc,MAAM,GAAGzB,UAAU,CAAC2B,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
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;EAEtDmB,QAAQ,gBACNf,IAAA,CAACF,iBAAiB;IAACoB,YAAY,EAAEd,cAAc,CAACE,KAAM;IAAAS,QAAA,EACnDA;EAAQ,CACQ,CACpB;EAED,IAAIN,MAAM,EAAE;IACV;IACA;IACA;IACA,oBAAOT,IAAA,CAACN,IAAI;MAACsB,KAAK,EAAE,CAACG,MAAM,CAACC,SAAS,EAAEJ,KAAK,CAAE;MAAAD,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAClE;EAEA,oBACEf,IAAA,CAACH,gBAAgB;IAACO,cAAc,EAAEA,cAAe;IAACY,KAAK,EAAEA,KAAM;IAAAD,QAAA,EAC5DA;EAAQ,CACO,CAAC;AAEvB;AAEAD,sBAAsB,CAACV,cAAc,GAAGA,cAAc;AAEtD,MAAMe,MAAM,GAAG1B,UAAU,CAAC4B,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
package/lib/module/useFrameSize.js CHANGED
@@ -1,12 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  import * as React from 'react';
4
- import { Dimensions, Platform, StyleSheet } from 'react-native';
4
+ import { Platform, StyleSheet } from 'react-native';
5
+ import { SafeAreaListener,
5
6
  // eslint-disable-next-line no-restricted-imports
6
- import { useSafeAreaFrame } from 'react-native-safe-area-context';
7
+ useSafeAreaFrame } from 'react-native-safe-area-context';
7
8
  import useLatestCallback from 'use-latest-callback';
8
9
  import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
9
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
10
11
  const FrameContext = /*#__PURE__*/React.createContext(undefined);
11
12
  export function useFrameSize(selector, debounce) {
12
13
  const context = React.useContext(FrameContext);
@@ -17,6 +18,7 @@ export function useFrameSize(selector, debounce) {
17
18
  return value;
18
19
  }
19
20
  export function FrameSizeProvider({
21
+ initialFrame,
20
22
  children
21
23
  }) {
22
24
  const context = React.useContext(FrameContext);
@@ -25,20 +27,17 @@ export function FrameSizeProvider({
25
27
  return children;
26
28
  }
27
29
  return /*#__PURE__*/_jsx(FrameSizeProviderInner, {
30
+ initialFrame: initialFrame,
28
31
  children: children
29
32
  });
30
33
  }
31
34
  function FrameSizeProviderInner({
35
+ initialFrame,
32
36
  children
33
37
  }) {
38
+ const frameRef = React.useRef(initialFrame);
34
39
  const listeners = React.useRef(new Set());
35
- const {
36
- element,
37
- get
38
- } = useResizeListener(size => {
39
- listeners.current.forEach(listener => listener(size));
40
- });
41
- const getCurrent = useLatestCallback(get);
40
+ const getCurrent = useLatestCallback(() => frameRef.current);
42
41
  const subscribe = useLatestCallback(listener => {
43
42
  listeners.current.add(listener);
44
43
  return () => {
@@ -47,65 +46,67 @@ function FrameSizeProviderInner({
47
46
  });
48
47
  const subscribeDebounced = useLatestCallback(listener => {
49
48
  let timer;
50
- const debouncedListener = size => {
49
+ const debouncedListener = frame => {
51
50
  clearTimeout(timer);
52
51
  timer = setTimeout(() => {
53
- listener(size);
52
+ listener(frame);
54
53
  }, 100);
55
54
  };
56
- listeners.current.add(debouncedListener);
57
- return () => {
58
- clearTimeout(timer);
59
- listeners.current.delete(debouncedListener);
60
- };
55
+ return subscribe(debouncedListener);
61
56
  });
62
57
  const context = React.useMemo(() => ({
63
58
  getCurrent,
64
59
  subscribe,
65
60
  subscribeDebounced
66
61
  }), [subscribe, subscribeDebounced, getCurrent]);
67
- return /*#__PURE__*/_jsxs(FrameContext.Provider, {
68
- value: context,
69
- children: [element, children]
62
+ const onChange = useLatestCallback(frame => {
63
+ if (frameRef.current.height === frame.height && frameRef.current.width === frame.width) {
64
+ return;
65
+ }
66
+ listeners.current.forEach(listener => listener(frame));
67
+ frameRef.current = frame;
68
+ });
69
+ return /*#__PURE__*/_jsxs(_Fragment, {
70
+ children: [Platform.OS === 'web' ? /*#__PURE__*/_jsx(FrameSizeListenerWeb, {
71
+ onChange: onChange
72
+ }) : typeof SafeAreaListener === 'undefined' ? /*#__PURE__*/_jsx(FrameSizeListenerNativeFallback, {
73
+ onChange: onChange
74
+ }) : /*#__PURE__*/_jsx(SafeAreaListener, {
75
+ onChange: ({
76
+ frame
77
+ }) => onChange(frame),
78
+ style: StyleSheet.absoluteFill
79
+ }), /*#__PURE__*/_jsx(FrameContext.Provider, {
80
+ value: context,
81
+ children: children
82
+ })]
70
83
  });
71
84
  }
72
- const useResizeListener = Platform.OS === 'web' ? useResizeListenerWeb : useResizeListenerNative;
73
- function useResizeListenerNative(onChange) {
85
+
86
+ // SafeAreaListener is available only on newer versions
87
+ // Fallback to an effect-based shim for older versions
88
+ function FrameSizeListenerNativeFallback({
89
+ onChange
90
+ }) {
74
91
  const frame = useSafeAreaFrame();
75
92
  React.useLayoutEffect(() => {
76
93
  onChange(frame);
77
94
  }, [frame, onChange]);
78
- return {
79
- element: null,
80
- get: () => frame
81
- };
95
+ return null;
82
96
  }
83
- const {
84
- width = 0,
85
- height = 0
86
- } = Dimensions.get('window');
87
97
 
88
98
  // FIXME: On the Web, the safe area frame value doesn't update on resize
89
99
  // So we workaround this by measuring the frame on resize
90
- function useResizeListenerWeb(onChange) {
91
- const frameRef = React.useRef({
92
- width,
93
- height
94
- });
100
+ function FrameSizeListenerWeb({
101
+ onChange
102
+ }) {
95
103
  const elementRef = React.useRef(null);
96
104
  React.useEffect(() => {
97
105
  if (elementRef.current == null) {
98
106
  return;
99
107
  }
100
- const update = size => {
101
- if (frameRef.current.width === size.width && frameRef.current.height === size.height) {
102
- return;
103
- }
104
- frameRef.current = size;
105
- onChange(size);
106
- };
107
108
  const rect = elementRef.current.getBoundingClientRect();
108
- update({
109
+ onChange({
109
110
  width: rect.width,
110
111
  height: rect.height
111
112
  });
@@ -116,7 +117,7 @@ function useResizeListenerWeb(onChange) {
116
117
  width,
117
118
  height
118
119
  } = entry.contentRect;
119
- update({
120
+ onChange({
120
121
  width,
121
122
  height
122
123
  });
@@ -127,7 +128,7 @@ function useResizeListenerWeb(onChange) {
127
128
  observer.disconnect();
128
129
  };
129
130
  }, [onChange]);
130
- const element = /*#__PURE__*/_jsx("div", {
131
+ return /*#__PURE__*/_jsx("div", {
131
132
  ref: elementRef,
132
133
  style: {
133
134
  ...StyleSheet.absoluteFillObject,
@@ -135,9 +136,5 @@ function useResizeListenerWeb(onChange) {
135
136
  visibility: 'hidden'
136
137
  }
137
138
  });
138
- return {
139
- element,
140
- get: () => frameRef.current
141
- };
142
139
  }
143
140
  //# sourceMappingURL=useFrameSize.js.map
package/lib/module/useFrameSize.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","Dimensions","Platform","StyleSheet","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","jsxs","_jsxs","FrameContext","createContext","undefined","useFrameSize","selector","debounce","context","useContext","Error","value","subscribeDebounced","subscribe","getCurrent","FrameSizeProvider","children","FrameSizeProviderInner","listeners","useRef","Set","element","get","useResizeListener","size","current","forEach","listener","add","delete","timer","debouncedListener","clearTimeout","setTimeout","useMemo","Provider","OS","useResizeListenerWeb","useResizeListenerNative","onChange","frame","useLayoutEffect","width","height","frameRef","elementRef","useEffect","update","rect","getBoundingClientRect","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","ref","style","absoluteFillObject","pointerEvents","visibility"],"sourceRoot":"../../src","sources":["useFrameSize.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAC/D;AACA,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SAASC,gCAAgC,QAAQ,uCAAuC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBzF,MAAMC,YAAY,gBAAGX,KAAK,CAACY,aAAa,CACtCC,SACF,CAAC;AAED,OAAO,SAASC,YAAYA,CAC1BC,QAA2B,EAC3BC,QAAkB,EACf;EACH,MAAMC,OAAO,GAAGjB,KAAK,CAACkB,UAAU,CAACP,YAAY,CAAC;EAE9C,IAAIM,OAAO,IAAI,IAAI,EAAE;IACnB,MAAM,IAAIE,KAAK,CAAC,sDAAsD,CAAC;EACzE;EAEA,MAAMC,KAAK,GAAGd,gCAAgC,CAC5CU,QAAQ,GAAGC,OAAO,CAACI,kBAAkB,GAAGJ,OAAO,CAACK,SAAS,EACzDL,OAAO,CAACM,UAAU,EAClBN,OAAO,CAACM,UAAU,EAClBR,QACF,CAAC;EAED,OAAOK,KAAK;AACd;AAEA,OAAO,SAASI,iBAAiBA,CAAC;EAAEC;AAAwC,CAAC,EAAE;EAC7E,MAAMR,OAAO,GAAGjB,KAAK,CAACkB,UAAU,CAACP,YAAY,CAAC;EAE9C,IAAIM,OAAO,IAAI,IAAI,EAAE;IACnB;IACA,OAAOQ,QAAQ;EACjB;EAEA,oBAAOjB,IAAA,CAACkB,sBAAsB;IAAAD,QAAA,EAAEA;EAAQ,CAAyB,CAAC;AACpE;AAEA,SAASC,sBAAsBA,CAAC;EAC9BD;AAGF,CAAC,EAAqB;EACpB,MAAME,SAAS,GAAG3B,KAAK,CAAC4B,MAAM,CAAgB,IAAIC,GAAG,CAAC,CAAC,CAAC;EAExD,MAAM;IAAEC,OAAO;IAAEC;EAAI,CAAC,GAAGC,iBAAiB,CAAEC,IAAI,IAAK;IACnDN,SAAS,CAACO,OAAO,CAACC,OAAO,CAAEC,QAAQ,IAAKA,QAAQ,CAACH,IAAI,CAAC,CAAC;EACzD,CAAC,CAAC;EAEF,MAAMV,UAAU,GAAGlB,iBAAiB,CAAC0B,GAAG,CAAC;EAEzC,MAAMT,SAAS,GAAGjB,iBAAiB,CAAE+B,QAAkB,IAAqB;IAC1ET,SAAS,CAACO,OAAO,CAACG,GAAG,CAACD,QAAQ,CAAC;IAE/B,OAAO,MAAM;MACXT,SAAS,CAACO,OAAO,CAACI,MAAM,CAACF,QAAQ,CAAC;IACpC,CAAC;EACH,CAAC,CAAC;EAEF,MAAMf,kBAAkB,GAAGhB,iBAAiB,CACzC+B,QAAkB,IAAqB;IACtC,IAAIG,KAAoC;IAExC,MAAMC,iBAAiB,GAAIP,IAAU,IAAK;MACxCQ,YAAY,CAACF,KAAK,CAAC;MACnBA,KAAK,GAAGG,UAAU,CAAC,MAAM;QACvBN,QAAQ,CAACH,IAAI,CAAC;MAChB,CAAC,EAAE,GAAG,CAAC;IACT,CAAC;IAEDN,SAAS,CAACO,OAAO,CAACG,GAAG,CAACG,iBAAiB,CAAC;IAExC,OAAO,MAAM;MACXC,YAAY,CAACF,KAAK,CAAC;MACnBZ,SAAS,CAACO,OAAO,CAACI,MAAM,CAACE,iBAAiB,CAAC;IAC7C,CAAC;EACH,CACF,CAAC;EAED,MAAMvB,OAAO,GAAGjB,KAAK,CAAC2C,OAAO,CAC3B,OAAO;IACLpB,UAAU;IACVD,SAAS;IACTD;EACF,CAAC,CAAC,EACF,CAACC,SAAS,EAAED,kBAAkB,EAAEE,UAAU,CAC5C,CAAC;EAED,oBACEb,KAAA,CAACC,YAAY,CAACiC,QAAQ;IAACxB,KAAK,EAAEH,OAAQ;IAAAQ,QAAA,GACnCK,OAAO,EACPL,QAAQ;EAAA,CACY,CAAC;AAE5B;AAEA,MAAMO,iBAAiB,GACrB9B,QAAQ,CAAC2C,EAAE,KAAK,KAAK,GAAGC,oBAAoB,GAAGC,uBAAuB;AAExE,SAASA,uBAAuBA,CAACC,QAA8B,EAAE;EAC/D,MAAMC,KAAK,GAAG7C,gBAAgB,CAAC,CAAC;EAEhCJ,KAAK,CAACkD,eAAe,CAAC,MAAM;IAC1BF,QAAQ,CAACC,KAAK,CAAC;EACjB,CAAC,EAAE,CAACA,KAAK,EAAED,QAAQ,CAAC,CAAC;EAErB,OAAO;IACLlB,OAAO,EAAE,IAAI;IACbC,GAAG,EAAEA,CAAA,KAAMkB;EACb,CAAC;AACH;AAEA,MAAM;EAAEE,KAAK,GAAG,CAAC;EAAEC,MAAM,GAAG;AAAE,CAAC,GAAGnD,UAAU,CAAC8B,GAAG,CAAC,QAAQ,CAAC;;AAE1D;AACA;AACA,SAASe,oBAAoBA,CAACE,QAA8B,EAAE;EAC5D,MAAMK,QAAQ,GAAGrD,KAAK,CAAC4B,MAAM,CAAO;IAClCuB,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,MAAME,UAAU,GAAGtD,KAAK,CAAC4B,MAAM,CAAiB,IAAI,CAAC;EAErD5B,KAAK,CAACuD,SAAS,CAAC,MAAM;IACpB,IAAID,UAAU,CAACpB,OAAO,IAAI,IAAI,EAAE;MAC9B;IACF;IAEA,MAAMsB,MAAM,GAAIvB,IAAU,IAAK;MAC7B,IACEoB,QAAQ,CAACnB,OAAO,CAACiB,KAAK,KAAKlB,IAAI,CAACkB,KAAK,IACrCE,QAAQ,CAACnB,OAAO,CAACkB,MAAM,KAAKnB,IAAI,CAACmB,MAAM,EACvC;QACA;MACF;MAEAC,QAAQ,CAACnB,OAAO,GAAGD,IAAI;MACvBe,QAAQ,CAACf,IAAI,CAAC;IAChB,CAAC;IAED,MAAMwB,IAAI,GAAGH,UAAU,CAACpB,OAAO,CAACwB,qBAAqB,CAAC,CAAC;IAEvDF,MAAM,CAAC;MACLL,KAAK,EAAEM,IAAI,CAACN,KAAK;MACjBC,MAAM,EAAEK,IAAI,CAACL;IACf,CAAC,CAAC;IAEF,MAAMO,QAAQ,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;MAC/C,MAAMC,KAAK,GAAGD,OAAO,CAAC,CAAC,CAAC;MAExB,IAAIC,KAAK,EAAE;QACT,MAAM;UAAEX,KAAK;UAAEC;QAAO,CAAC,GAAGU,KAAK,CAACC,WAAW;QAE3CP,MAAM,CAAC;UAAEL,KAAK;UAAEC;QAAO,CAAC,CAAC;MAC3B;IACF,CAAC,CAAC;IAEFO,QAAQ,CAACK,OAAO,CAACV,UAAU,CAACpB,OAAO,CAAC;IAEpC,OAAO,MAAM;MACXyB,QAAQ,CAACM,UAAU,CAAC,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,CAACjB,QAAQ,CAAC,CAAC;EAEd,MAAMlB,OAAO,gBACXtB,IAAA;IACE0D,GAAG,EAAEZ,UAAW;IAChBa,KAAK,EAAE;MACL,GAAGhE,UAAU,CAACiE,kBAAkB;MAChCC,aAAa,EAAE,MAAM;MACrBC,UAAU,EAAE;IACd;EAAE,CACH,CACF;EAED,OAAO;IACLxC,OAAO;IACPC,GAAG,EAAEA,CAAA,KAAMsB,QAAQ,CAACnB;EACtB,CAAC;AACH","ignoreList":[]}
1
+ {"version":3,"names":["React","Platform","StyleSheet","SafeAreaListener","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FrameContext","createContext","undefined","useFrameSize","selector","debounce","context","useContext","Error","value","subscribeDebounced","subscribe","getCurrent","FrameSizeProvider","initialFrame","children","FrameSizeProviderInner","frameRef","useRef","listeners","Set","current","listener","add","delete","timer","debouncedListener","frame","clearTimeout","setTimeout","useMemo","onChange","height","width","forEach","OS","FrameSizeListenerWeb","FrameSizeListenerNativeFallback","style","absoluteFill","Provider","useLayoutEffect","elementRef","useEffect","rect","getBoundingClientRect","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","ref","absoluteFillObject","pointerEvents","visibility"],"sourceRoot":"../../src","sources":["useFrameSize.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map CHANGED
@@ -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,2CAiBhE;yBAjBe,sBAAsB"}
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,2CAqBhE;yBArBe,sBAAsB"}
package/lib/typescript/src/useFrameSize.d.ts CHANGED
@@ -1,11 +1,15 @@
1
1
  import * as React from 'react';
2
- type Size = {
2
+ import { type StyleProp, type ViewStyle } from 'react-native';
3
+ type Frame = {
3
4
  width: number;
4
5
  height: number;
5
6
  };
6
- export declare function useFrameSize<T>(selector: (size: Size) => T, debounce?: boolean): T;
7
- export declare function FrameSizeProvider({ children }: {
7
+ export declare function useFrameSize<T>(selector: (frame: Frame) => T, debounce?: boolean): T;
8
+ type FrameSizeProviderProps = {
9
+ initialFrame: Frame;
8
10
  children: React.ReactNode;
9
- }): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
11
+ style?: StyleProp<ViewStyle>;
12
+ };
13
+ export declare function FrameSizeProvider({ initialFrame, children, }: FrameSizeProviderProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
10
14
  export {};
11
15
  //# sourceMappingURL=useFrameSize.d.ts.map
package/lib/typescript/src/useFrameSize.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgBF,wBAAgB,YAAY,CAAC,CAAC,EAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,EAC3B,QAAQ,CAAC,EAAE,OAAO,GACjB,CAAC,CAeH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,yTAS5E"}
1
+ {"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,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,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,QAAQ,GACT,EAAE,sBAAsB,yTAaxB"}
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.4.6",
4
+ "version": "2.5.0",
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.1.13",
52
+ "@react-navigation/native": "^7.1.14",
53
53
  "@testing-library/react-native": "^13.2.0",
54
54
  "@types/react": "~19.0.10",
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.1.13",
65
+ "@react-navigation/native": "^7.1.14",
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": "0eea403da627af2624d8dc0d985d00d92c79f569"
93
+ "gitHead": "c059915c187967137f33b8931e6badcb0c604492"
94
94
  }
package/src/SafeAreaProviderCompat.tsx CHANGED
@@ -36,7 +36,11 @@ const initialMetrics =
36
36
  export function SafeAreaProviderCompat({ children, style }: Props) {
37
37
  const insets = React.useContext(SafeAreaInsetsContext);
38
38
 
39
- children = <FrameSizeProvider>{children}</FrameSizeProvider>;
39
+ children = (
40
+ <FrameSizeProvider initialFrame={initialMetrics.frame}>
41
+ {children}
42
+ </FrameSizeProvider>
43
+ );
40
44
 
41
45
  if (insets) {
42
46
  // If we already have insets, don't wrap the stack in another safe area provider
package/src/useFrameSize.tsx CHANGED
@@ -1,22 +1,30 @@
1
1
  import * as React from 'react';
2
- import { Dimensions, Platform, StyleSheet } from 'react-native';
3
- // eslint-disable-next-line no-restricted-imports
4
- import { useSafeAreaFrame } from 'react-native-safe-area-context';
2
+ import {
3
+ Platform,
4
+ type StyleProp,
5
+ StyleSheet,
6
+ type ViewStyle,
7
+ } from 'react-native';
8
+ import {
9
+ SafeAreaListener,
10
+ // eslint-disable-next-line no-restricted-imports
11
+ useSafeAreaFrame,
12
+ } from 'react-native-safe-area-context';
5
13
  import useLatestCallback from 'use-latest-callback';
6
14
  import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
7
15
 
8
- type Size = {
16
+ type Frame = {
9
17
  width: number;
10
18
  height: number;
11
19
  };
12
20
 
13
- type Listener = (size: Size) => void;
21
+ type Listener = (frame: Frame) => void;
14
22
 
15
23
  type RemoveListener = () => void;
16
24
 
17
25
  type FrameContextType = {
18
- getCurrent: () => Size;
19
- subscribe: (listener: Listener, debounce?: boolean) => RemoveListener;
26
+ getCurrent: () => Frame;
27
+ subscribe: (listener: Listener) => RemoveListener;
20
28
  subscribeDebounced: (listener: Listener) => RemoveListener;
21
29
  };
22
30
 
@@ -25,7 +33,7 @@ const FrameContext = React.createContext<FrameContextType | undefined>(
25
33
  );
26
34
 
27
35
  export function useFrameSize<T>(
28
- selector: (size: Size) => T,
36
+ selector: (frame: Frame) => T,
29
37
  debounce?: boolean
30
38
  ): T {
31
39
  const context = React.useContext(FrameContext);
@@ -44,7 +52,16 @@ export function useFrameSize<T>(
44
52
  return value;
45
53
  }
46
54
 
47
- export function FrameSizeProvider({ children }: { children: React.ReactNode }) {
55
+ type FrameSizeProviderProps = {
56
+ initialFrame: Frame;
57
+ children: React.ReactNode;
58
+ style?: StyleProp<ViewStyle>;
59
+ };
60
+
61
+ export function FrameSizeProvider({
62
+ initialFrame,
63
+ children,
64
+ }: FrameSizeProviderProps) {
48
65
  const context = React.useContext(FrameContext);
49
66
 
50
67
  if (context != null) {
@@ -52,21 +69,21 @@ export function FrameSizeProvider({ children }: { children: React.ReactNode }) {
52
69
  return children;
53
70
  }
54
71
 
55
- return <FrameSizeProviderInner>{children}</FrameSizeProviderInner>;
72
+ return (
73
+ <FrameSizeProviderInner initialFrame={initialFrame}>
74
+ {children}
75
+ </FrameSizeProviderInner>
76
+ );
56
77
  }
57
78
 
58
79
  function FrameSizeProviderInner({
80
+ initialFrame,
59
81
  children,
60
- }: {
61
- children: React.ReactNode;
62
- }): React.JSX.Element {
82
+ }: FrameSizeProviderProps) {
83
+ const frameRef = React.useRef<Frame>(initialFrame);
63
84
  const listeners = React.useRef<Set<Listener>>(new Set());
64
85
 
65
- const { element, get } = useResizeListener((size) => {
66
- listeners.current.forEach((listener) => listener(size));
67
- });
68
-
69
- const getCurrent = useLatestCallback(get);
86
+ const getCurrent = useLatestCallback(() => frameRef.current);
70
87
 
71
88
  const subscribe = useLatestCallback((listener: Listener): RemoveListener => {
72
89
  listeners.current.add(listener);
@@ -80,19 +97,14 @@ function FrameSizeProviderInner({
80
97
  (listener: Listener): RemoveListener => {
81
98
  let timer: ReturnType<typeof setTimeout>;
82
99
 
83
- const debouncedListener = (size: Size) => {
100
+ const debouncedListener = (frame: Frame) => {
84
101
  clearTimeout(timer);
85
102
  timer = setTimeout(() => {
86
- listener(size);
103
+ listener(frame);
87
104
  }, 100);
88
105
  };
89
106
 
90
- listeners.current.add(debouncedListener);
91
-
92
- return () => {
93
- clearTimeout(timer);
94
- listeners.current.delete(debouncedListener);
95
- };
107
+ return subscribe(debouncedListener);
96
108
  }
97
109
  );
98
110
 
@@ -105,40 +117,58 @@ function FrameSizeProviderInner({
105
117
  [subscribe, subscribeDebounced, getCurrent]
106
118
  );
107
119
 
120
+ const onChange = useLatestCallback((frame: Frame) => {
121
+ if (
122
+ frameRef.current.height === frame.height &&
123
+ frameRef.current.width === frame.width
124
+ ) {
125
+ return;
126
+ }
127
+
128
+ listeners.current.forEach((listener) => listener(frame));
129
+ frameRef.current = frame;
130
+ });
131
+
108
132
  return (
109
- <FrameContext.Provider value={context}>
110
- {element}
111
- {children}
112
- </FrameContext.Provider>
133
+ <>
134
+ {Platform.OS === 'web' ? (
135
+ <FrameSizeListenerWeb onChange={onChange} />
136
+ ) : typeof SafeAreaListener === 'undefined' ? (
137
+ <FrameSizeListenerNativeFallback onChange={onChange} />
138
+ ) : (
139
+ <SafeAreaListener
140
+ onChange={({ frame }) => onChange(frame)}
141
+ style={StyleSheet.absoluteFill}
142
+ />
143
+ )}
144
+ <FrameContext.Provider value={context}>{children}</FrameContext.Provider>
145
+ </>
113
146
  );
114
147
  }
115
148
 
116
- const useResizeListener =
117
- Platform.OS === 'web' ? useResizeListenerWeb : useResizeListenerNative;
118
-
119
- function useResizeListenerNative(onChange: (size: Size) => void) {
149
+ // SafeAreaListener is available only on newer versions
150
+ // Fallback to an effect-based shim for older versions
151
+ function FrameSizeListenerNativeFallback({
152
+ onChange,
153
+ }: {
154
+ onChange: (frame: Frame) => void;
155
+ }) {
120
156
  const frame = useSafeAreaFrame();
121
157
 
122
158
  React.useLayoutEffect(() => {
123
159
  onChange(frame);
124
160
  }, [frame, onChange]);
125
161
 
126
- return {
127
- element: null,
128
- get: () => frame,
129
- };
162
+ return null;
130
163
  }
131
164
 
132
- const { width = 0, height = 0 } = Dimensions.get('window');
133
-
134
165
  // FIXME: On the Web, the safe area frame value doesn't update on resize
135
166
  // So we workaround this by measuring the frame on resize
136
- function useResizeListenerWeb(onChange: (size: Size) => void) {
137
- const frameRef = React.useRef<Size>({
138
- width,
139
- height,
140
- });
141
-
167
+ function FrameSizeListenerWeb({
168
+ onChange,
169
+ }: {
170
+ onChange: (frame: Frame) => void;
171
+ }) {
142
172
  const elementRef = React.useRef<HTMLDivElement>(null);
143
173
 
144
174
  React.useEffect(() => {
@@ -146,21 +176,9 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
146
176
  return;
147
177
  }
148
178
 
149
- const update = (size: Size) => {
150
- if (
151
- frameRef.current.width === size.width &&
152
- frameRef.current.height === size.height
153
- ) {
154
- return;
155
- }
156
-
157
- frameRef.current = size;
158
- onChange(size);
159
- };
160
-
161
179
  const rect = elementRef.current.getBoundingClientRect();
162
180
 
163
- update({
181
+ onChange({
164
182
  width: rect.width,
165
183
  height: rect.height,
166
184
  });
@@ -171,7 +189,7 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
171
189
  if (entry) {
172
190
  const { width, height } = entry.contentRect;
173
191
 
174
- update({ width, height });
192
+ onChange({ width, height });
175
193
  }
176
194
  });
177
195
 
@@ -182,7 +200,7 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
182
200
  };
183
201
  }, [onChange]);
184
202
 
185
- const element = (
203
+ return (
186
204
  <div
187
205
  ref={elementRef}
188
206
  style={{
@@ -192,9 +210,4 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
192
210
  }}
193
211
  />
194
212
  );
195
-
196
- return {
197
- element,
198
- get: () => frameRef.current,
199
- };
200
213
  }