@react-navigation/elements 2.4.6 → 2.5.1

package/lib/module/SafeAreaProviderCompat.js

@@ -33,6 +33,7 @@ export function SafeAreaProviderCompat({
 }) {
   const insets = React.useContext(SafeAreaInsetsContext);
   children = /*#__PURE__*/_jsx(FrameSizeProvider, {
+    initialFrame: initialMetrics.frame,
     children: children
   });
   if (insets) {

package/lib/module/SafeAreaProviderCompat.js.map

@@ -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":[]}
+{"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

@@ -1,22 +1,24 @@
 "use strict";
 
 import * as React from 'react';
-import { Dimensions, Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import { SafeAreaListener,
 // eslint-disable-next-line no-restricted-imports
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
+useSafeAreaFrame } from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const FrameContext = /*#__PURE__*/React.createContext(undefined);
-export function useFrameSize(selector, debounce) {
+export function useFrameSize(selector, throttle) {
   const context = React.useContext(FrameContext);
   if (context == null) {
     throw new Error('useFrameSize must be used within a FrameSizeProvider');
   }
-  const value = useSyncExternalStoreWithSelector(debounce ? context.subscribeDebounced : context.subscribe, context.getCurrent, context.getCurrent, selector);
+  const value = useSyncExternalStoreWithSelector(throttle ? context.subscribeThrottled : context.subscribe, context.getCurrent, context.getCurrent, selector);
   return value;
 }
 export function FrameSizeProvider({
+  initialFrame,
   children
 }) {
   const context = React.useContext(FrameContext);
@@ -25,87 +27,116 @@ export function FrameSizeProvider({
     return children;
   }
   return /*#__PURE__*/_jsx(FrameSizeProviderInner, {
+    initialFrame: initialFrame,
     children: children
   });
 }
 function FrameSizeProviderInner({
+  initialFrame,
   children
 }) {
-  const listeners = React.useRef(new Set());
-  const {
-    element,
-    get
-  } = useResizeListener(size => {
-    listeners.current.forEach(listener => listener(size));
+  const frameRef = React.useRef({
+    width: initialFrame.width,
+    height: initialFrame.height
   });
-  const getCurrent = useLatestCallback(get);
+  const listeners = React.useRef(new Set());
+  const getCurrent = useLatestCallback(() => frameRef.current);
   const subscribe = useLatestCallback(listener => {
     listeners.current.add(listener);
     return () => {
       listeners.current.delete(listener);
     };
   });
-  const subscribeDebounced = useLatestCallback(listener => {
+  const subscribeThrottled = useLatestCallback(listener => {
+    const delay = 100; // Throttle delay in milliseconds
+
     let timer;
-    const debouncedListener = size => {
+    let updated = false;
+    let waiting = false;
+    const throttledListener = () => {
       clearTimeout(timer);
-      timer = setTimeout(() => {
-        listener(size);
-      }, 100);
+      updated = true;
+      if (waiting) {
+        // Schedule a timer to call the listener at the end
+        timer = setTimeout(() => {
+          if (updated) {
+            updated = false;
+            listener();
+          }
+        }, delay);
+      } else {
+        waiting = true;
+        setTimeout(function () {
+          waiting = false;
+        }, delay);
+
+        // Call the listener immediately at start
+        updated = false;
+        listener();
+      }
     };
-    listeners.current.add(debouncedListener);
+    const unsubscribe = subscribe(throttledListener);
     return () => {
+      unsubscribe();
       clearTimeout(timer);
-      listeners.current.delete(debouncedListener);
     };
   });
   const context = React.useMemo(() => ({
     getCurrent,
     subscribe,
-    subscribeDebounced
-  }), [subscribe, subscribeDebounced, getCurrent]);
-  return /*#__PURE__*/_jsxs(FrameContext.Provider, {
-    value: context,
-    children: [element, children]
+    subscribeThrottled
+  }), [subscribe, subscribeThrottled, getCurrent]);
+  const onChange = useLatestCallback(frame => {
+    if (frameRef.current.height === frame.height && frameRef.current.width === frame.width) {
+      return;
+    }
+    frameRef.current = {
+      width: frame.width,
+      height: frame.height
+    };
+    listeners.current.forEach(listener => listener());
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [Platform.OS === 'web' ? /*#__PURE__*/_jsx(FrameSizeListenerWeb, {
+      onChange: onChange
+    }) : typeof SafeAreaListener === 'undefined' ? /*#__PURE__*/_jsx(FrameSizeListenerNativeFallback, {
+      onChange: onChange
+    }) : /*#__PURE__*/_jsx(SafeAreaListener, {
+      onChange: ({
+        frame
+      }) => onChange(frame),
+      style: StyleSheet.absoluteFill
+    }), /*#__PURE__*/_jsx(FrameContext.Provider, {
+      value: context,
+      children: children
+    })]
   });
 }
-const useResizeListener = Platform.OS === 'web' ? useResizeListenerWeb : useResizeListenerNative;
-function useResizeListenerNative(onChange) {
+
+// SafeAreaListener is available only on newer versions
+// Fallback to an effect-based shim for older versions
+function FrameSizeListenerNativeFallback({
+  onChange
+}) {
   const frame = useSafeAreaFrame();
   React.useLayoutEffect(() => {
     onChange(frame);
   }, [frame, onChange]);
-  return {
-    element: null,
-    get: () => frame
-  };
+  return null;
 }
-const {
-  width = 0,
-  height = 0
-} = Dimensions.get('window');
 
 // FIXME: On the Web, the safe area frame value doesn't update on resize
 // So we workaround this by measuring the frame on resize
-function useResizeListenerWeb(onChange) {
-  const frameRef = React.useRef({
-    width,
-    height
-  });
+function FrameSizeListenerWeb({
+  onChange
+}) {
   const elementRef = React.useRef(null);
   React.useEffect(() => {
     if (elementRef.current == null) {
       return;
     }
-    const update = size => {
-      if (frameRef.current.width === size.width && frameRef.current.height === size.height) {
-        return;
-      }
-      frameRef.current = size;
-      onChange(size);
-    };
     const rect = elementRef.current.getBoundingClientRect();
-    update({
+    onChange({
       width: rect.width,
       height: rect.height
     });
@@ -116,7 +147,7 @@ function useResizeListenerWeb(onChange) {
           width,
           height
         } = entry.contentRect;
-        update({
+        onChange({
           width,
           height
         });
@@ -127,7 +158,7 @@ function useResizeListenerWeb(onChange) {
       observer.disconnect();
     };
   }, [onChange]);
-  const element = /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx("div", {
     ref: elementRef,
     style: {
       ...StyleSheet.absoluteFillObject,
@@ -135,9 +166,5 @@ function useResizeListenerWeb(onChange) {
       visibility: 'hidden'
     }
   });
-  return {
-    element,
-    get: () => frameRef.current
-  };
 }
 //# sourceMappingURL=useFrameSize.js.map

package/lib/module/useFrameSize.js.map

@@ -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":"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","ignoreList":[]}
+{"version":3,"names":["React","Platform","StyleSheet","SafeAreaListener","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FrameContext","createContext","undefined","useFrameSize","selector","throttle","context","useContext","Error","value","subscribeThrottled","subscribe","getCurrent","FrameSizeProvider","initialFrame","children","FrameSizeProviderInner","frameRef","useRef","width","height","listeners","Set","current","listener","add","delete","delay","timer","updated","waiting","throttledListener","clearTimeout","setTimeout","unsubscribe","useMemo","onChange","frame","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":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EAERC,UAAU,QAEL,cAAc;AACrB,SACEC,gBAAgB;AAChB;AACAC,gBAAgB,QACX,gCAAgC;AACvC,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SAASC,gCAAgC,QAAQ,uCAAuC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBzF,MAAMC,YAAY,gBAAGb,KAAK,CAACc,aAAa,CACtCC,SACF,CAAC;AAED,OAAO,SAASC,YAAYA,CAC1BC,QAA6B,EAC7BC,QAAkB,EACf;EACH,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAACP,YAAY,CAAC;EAE9C,IAAIM,OAAO,IAAI,IAAI,EAAE;IACnB,MAAM,IAAIE,KAAK,CAAC,sDAAsD,CAAC;EACzE;EAEA,MAAMC,KAAK,GAAGhB,gCAAgC,CAC5CY,QAAQ,GAAGC,OAAO,CAACI,kBAAkB,GAAGJ,OAAO,CAACK,SAAS,EACzDL,OAAO,CAACM,UAAU,EAClBN,OAAO,CAACM,UAAU,EAClBR,QACF,CAAC;EAED,OAAOK,KAAK;AACd;AAQA,OAAO,SAASI,iBAAiBA,CAAC;EAChCC,YAAY;EACZC;AACsB,CAAC,EAAE;EACzB,MAAMT,OAAO,GAAGnB,KAAK,CAACoB,UAAU,CAACP,YAAY,CAAC;EAE9C,IAAIM,OAAO,IAAI,IAAI,EAAE;IACnB;IACA,OAAOS,QAAQ;EACjB;EAEA,oBACEpB,IAAA,CAACqB,sBAAsB;IAACF,YAAY,EAAEA,YAAa;IAAAC,QAAA,EAChDA;EAAQ,CACa,CAAC;AAE7B;AAEA,SAASC,sBAAsBA,CAAC;EAC9BF,YAAY;EACZC;AACsB,CAAC,EAAE;EACzB,MAAME,QAAQ,GAAG9B,KAAK,CAAC+B,MAAM,CAAQ;IACnCC,KAAK,EAAEL,YAAY,CAACK,KAAK;IACzBC,MAAM,EAAEN,YAAY,CAACM;EACvB,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAGlC,KAAK,CAAC+B,MAAM,CAAgB,IAAII,GAAG,CAAC,CAAC,CAAC;EAExD,MAAMV,UAAU,GAAGpB,iBAAiB,CAAC,MAAMyB,QAAQ,CAACM,OAAO,CAAC;EAE5D,MAAMZ,SAAS,GAAGnB,iBAAiB,CAAEgC,QAAkB,IAAqB;IAC1EH,SAAS,CAACE,OAAO,CAACE,GAAG,CAACD,QAAQ,CAAC;IAE/B,OAAO,MAAM;MACXH,SAAS,CAACE,OAAO,CAACG,MAAM,CAACF,QAAQ,CAAC;IACpC,CAAC;EACH,CAAC,CAAC;EAEF,MAAMd,kBAAkB,GAAGlB,iBAAiB,CACzCgC,QAAkB,IAAqB;IACtC,MAAMG,KAAK,GAAG,GAAG,CAAC,CAAC;;IAEnB,IAAIC,KAAoC;IACxC,IAAIC,OAAO,GAAG,KAAK;IACnB,IAAIC,OAAO,GAAG,KAAK;IAEnB,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;MAC9BC,YAAY,CAACJ,KAAK,CAAC;MAEnBC,OAAO,GAAG,IAAI;MAEd,IAAIC,OAAO,EAAE;QACX;QACAF,KAAK,GAAGK,UAAU,CAAC,MAAM;UACvB,IAAIJ,OAAO,EAAE;YACXA,OAAO,GAAG,KAAK;YACfL,QAAQ,CAAC,CAAC;UACZ;QACF,CAAC,EAAEG,KAAK,CAAC;MACX,CAAC,MAAM;QACLG,OAAO,GAAG,IAAI;QACdG,UAAU,CAAC,YAAY;UACrBH,OAAO,GAAG,KAAK;QACjB,CAAC,EAAEH,KAAK,CAAC;;QAET;QACAE,OAAO,GAAG,KAAK;QACfL,QAAQ,CAAC,CAAC;MACZ;IACF,CAAC;IAED,MAAMU,WAAW,GAAGvB,SAAS,CAACoB,iBAAiB,CAAC;IAEhD,OAAO,MAAM;MACXG,WAAW,CAAC,CAAC;MACbF,YAAY,CAACJ,KAAK,CAAC;IACrB,CAAC;EACH,CACF,CAAC;EAED,MAAMtB,OAAO,GAAGnB,KAAK,CAACgD,OAAO,CAC3B,OAAO;IACLvB,UAAU;IACVD,SAAS;IACTD;EACF,CAAC,CAAC,EACF,CAACC,SAAS,EAAED,kBAAkB,EAAEE,UAAU,CAC5C,CAAC;EAED,MAAMwB,QAAQ,GAAG5C,iBAAiB,CAAE6C,KAAY,IAAK;IACnD,IACEpB,QAAQ,CAACM,OAAO,CAACH,MAAM,KAAKiB,KAAK,CAACjB,MAAM,IACxCH,QAAQ,CAACM,OAAO,CAACJ,KAAK,KAAKkB,KAAK,CAAClB,KAAK,EACtC;MACA;IACF;IAEAF,QAAQ,CAACM,OAAO,GAAG;MAAEJ,KAAK,EAAEkB,KAAK,CAAClB,KAAK;MAAEC,MAAM,EAAEiB,KAAK,CAACjB;IAAO,CAAC;IAC/DC,SAAS,CAACE,OAAO,CAACe,OAAO,CAAEd,QAAQ,IAAKA,QAAQ,CAAC,CAAC,CAAC;EACrD,CAAC,CAAC;EAEF,oBACEzB,KAAA,CAAAF,SAAA;IAAAkB,QAAA,GACG3B,QAAQ,CAACmD,EAAE,KAAK,KAAK,gBACpB5C,IAAA,CAAC6C,oBAAoB;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAC,GAC1C,OAAO9C,gBAAgB,KAAK,WAAW,gBACzCK,IAAA,CAAC8C,+BAA+B;MAACL,QAAQ,EAAEA;IAAS,CAAE,CAAC,gBAEvDzC,IAAA,CAACL,gBAAgB;MACf8C,QAAQ,EAAEA,CAAC;QAAEC;MAAM,CAAC,KAAKD,QAAQ,CAACC,KAAK,CAAE;MACzCK,KAAK,EAAErD,UAAU,CAACsD;IAAa,CAChC,CACF,eACDhD,IAAA,CAACK,YAAY,CAAC4C,QAAQ;MAACnC,KAAK,EAAEH,OAAQ;MAAAS,QAAA,EAAEA;IAAQ,CAAwB,CAAC;EAAA,CACzE,CAAC;AAEP;;AAEA;AACA;AACA,SAAS0B,+BAA+BA,CAAC;EACvCL;AAGF,CAAC,EAAE;EACD,MAAMC,KAAK,GAAG9C,gBAAgB,CAAC,CAAC;EAEhCJ,KAAK,CAAC0D,eAAe,CAAC,MAAM;IAC1BT,QAAQ,CAACC,KAAK,CAAC;EACjB,CAAC,EAAE,CAACA,KAAK,EAAED,QAAQ,CAAC,CAAC;EAErB,OAAO,IAAI;AACb;;AAEA;AACA;AACA,SAASI,oBAAoBA,CAAC;EAC5BJ;AAGF,CAAC,EAAE;EACD,MAAMU,UAAU,GAAG3D,KAAK,CAAC+B,MAAM,CAAiB,IAAI,CAAC;EAErD/B,KAAK,CAAC4D,SAAS,CAAC,MAAM;IACpB,IAAID,UAAU,CAACvB,OAAO,IAAI,IAAI,EAAE;MAC9B;IACF;IAEA,MAAMyB,IAAI,GAAGF,UAAU,CAACvB,OAAO,CAAC0B,qBAAqB,CAAC,CAAC;IAEvDb,QAAQ,CAAC;MACPjB,KAAK,EAAE6B,IAAI,CAAC7B,KAAK;MACjBC,MAAM,EAAE4B,IAAI,CAAC5B;IACf,CAAC,CAAC;IAEF,MAAM8B,QAAQ,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;MAC/C,MAAMC,KAAK,GAAGD,OAAO,CAAC,CAAC,CAAC;MAExB,IAAIC,KAAK,EAAE;QACT,MAAM;UAAElC,KAAK;UAAEC;QAAO,CAAC,GAAGiC,KAAK,CAACC,WAAW;QAE3ClB,QAAQ,CAAC;UAAEjB,KAAK;UAAEC;QAAO,CAAC,CAAC;MAC7B;IACF,CAAC,CAAC;IAEF8B,QAAQ,CAACK,OAAO,CAACT,UAAU,CAACvB,OAAO,CAAC;IAEpC,OAAO,MAAM;MACX2B,QAAQ,CAACM,UAAU,CAAC,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,CAACpB,QAAQ,CAAC,CAAC;EAEd,oBACEzC,IAAA;IACE8D,GAAG,EAAEX,UAAW;IAChBJ,KAAK,EAAE;MACL,GAAGrD,UAAU,CAACqE,kBAAkB;MAChCC,aAAa,EAAE,MAAM;MACrBC,UAAU,EAAE;IACd;EAAE,CACH,CAAC;AAEN","ignoreList":[]}

package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map

@@ -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"}
+{"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

@@ -1,11 +1,15 @@
 import * as React from 'react';
-type Size = {
+import { type StyleProp, type ViewStyle } from 'react-native';
+type Frame = {
     width: number;
     height: number;
 };
-export declare function useFrameSize<T>(selector: (size: Size) => T, debounce?: boolean): T;
-export declare function FrameSizeProvider({ children }: {
+export declare function useFrameSize<T>(selector: (frame: Frame) => T, throttle?: boolean): T;
+type FrameSizeProviderProps = {
+    initialFrame: Frame;
     children: React.ReactNode;
-}): 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;
+    style?: StyleProp<ViewStyle>;
+};
+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;
 export {};
 //# sourceMappingURL=useFrameSize.d.ts.map

package/lib/typescript/src/useFrameSize.d.ts.map

@@ -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"}
+{"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

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.4.6",
+  "version": "2.5.1",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@react-native-masked-view/masked-view": "0.3.2",
-    "@react-navigation/native": "^7.1.13",
+    "@react-navigation/native": "^7.1.14",
     "@testing-library/react-native": "^13.2.0",
     "@types/react": "~19.0.10",
     "@types/use-sync-external-store": "^1.5.0",
@@ -62,7 +62,7 @@
   },
   "peerDependencies": {
     "@react-native-masked-view/masked-view": ">= 0.2.0",
-    "@react-navigation/native": "^7.1.13",
+    "@react-navigation/native": "^7.1.14",
     "react": ">= 18.2.0",
     "react-native": "*",
     "react-native-safe-area-context": ">= 4.0.0"
@@ -90,5 +90,5 @@
       ]
     ]
   },
-  "gitHead": "0eea403da627af2624d8dc0d985d00d92c79f569"
+  "gitHead": "0508fba46d6ea4823de28f35e981d5cc8f15e93a"
 }

package/src/SafeAreaProviderCompat.tsx

@@ -36,7 +36,11 @@ const initialMetrics =
 export function SafeAreaProviderCompat({ children, style }: Props) {
   const insets = React.useContext(SafeAreaInsetsContext);
 
-  children = <FrameSizeProvider>{children}</FrameSizeProvider>;
+  children = (
+    <FrameSizeProvider initialFrame={initialMetrics.frame}>
+      {children}
+    </FrameSizeProvider>
+  );
 
   if (insets) {
     // If we already have insets, don't wrap the stack in another safe area provider

package/src/useFrameSize.tsx

@@ -1,23 +1,31 @@
 import * as React from 'react';
-import { Dimensions, Platform, StyleSheet } from 'react-native';
-// eslint-disable-next-line no-restricted-imports
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+import {
+  SafeAreaListener,
+  // eslint-disable-next-line no-restricted-imports
+  useSafeAreaFrame,
+} from 'react-native-safe-area-context';
 import useLatestCallback from 'use-latest-callback';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
 
-type Size = {
+type Frame = {
   width: number;
   height: number;
 };
 
-type Listener = (size: Size) => void;
+type Listener = () => void;
 
 type RemoveListener = () => void;
 
 type FrameContextType = {
-  getCurrent: () => Size;
-  subscribe: (listener: Listener, debounce?: boolean) => RemoveListener;
-  subscribeDebounced: (listener: Listener) => RemoveListener;
+  getCurrent: () => Frame;
+  subscribe: (listener: Listener) => RemoveListener;
+  subscribeThrottled: (listener: Listener) => RemoveListener;
 };
 
 const FrameContext = React.createContext<FrameContextType | undefined>(
@@ -25,8 +33,8 @@ const FrameContext = React.createContext<FrameContextType | undefined>(
 );
 
 export function useFrameSize<T>(
-  selector: (size: Size) => T,
-  debounce?: boolean
+  selector: (frame: Frame) => T,
+  throttle?: boolean
 ): T {
   const context = React.useContext(FrameContext);
 
@@ -35,7 +43,7 @@ export function useFrameSize<T>(
   }
 
   const value = useSyncExternalStoreWithSelector(
-    debounce ? context.subscribeDebounced : context.subscribe,
+    throttle ? context.subscribeThrottled : context.subscribe,
     context.getCurrent,
     context.getCurrent,
     selector
@@ -44,7 +52,16 @@ export function useFrameSize<T>(
   return value;
 }
 
-export function FrameSizeProvider({ children }: { children: React.ReactNode }) {
+type FrameSizeProviderProps = {
+  initialFrame: Frame;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function FrameSizeProvider({
+  initialFrame,
+  children,
+}: FrameSizeProviderProps) {
   const context = React.useContext(FrameContext);
 
   if (context != null) {
@@ -52,21 +69,25 @@ export function FrameSizeProvider({ children }: { children: React.ReactNode }) {
     return children;
   }
 
-  return <FrameSizeProviderInner>{children}</FrameSizeProviderInner>;
+  return (
+    <FrameSizeProviderInner initialFrame={initialFrame}>
+      {children}
+    </FrameSizeProviderInner>
+  );
 }
 
 function FrameSizeProviderInner({
+  initialFrame,
   children,
-}: {
-  children: React.ReactNode;
-}): React.JSX.Element {
-  const listeners = React.useRef<Set<Listener>>(new Set());
-
-  const { element, get } = useResizeListener((size) => {
-    listeners.current.forEach((listener) => listener(size));
+}: FrameSizeProviderProps) {
+  const frameRef = React.useRef<Frame>({
+    width: initialFrame.width,
+    height: initialFrame.height,
   });
 
-  const getCurrent = useLatestCallback(get);
+  const listeners = React.useRef<Set<Listener>>(new Set());
+
+  const getCurrent = useLatestCallback(() => frameRef.current);
 
   const subscribe = useLatestCallback((listener: Listener): RemoveListener => {
     listeners.current.add(listener);
@@ -76,22 +97,44 @@ function FrameSizeProviderInner({
     };
   });
 
-  const subscribeDebounced = useLatestCallback(
+  const subscribeThrottled = useLatestCallback(
     (listener: Listener): RemoveListener => {
+      const delay = 100; // Throttle delay in milliseconds
+
       let timer: ReturnType<typeof setTimeout>;
+      let updated = false;
+      let waiting = false;
 
-      const debouncedListener = (size: Size) => {
+      const throttledListener = () => {
         clearTimeout(timer);
-        timer = setTimeout(() => {
-          listener(size);
-        }, 100);
+
+        updated = true;
+
+        if (waiting) {
+          // Schedule a timer to call the listener at the end
+          timer = setTimeout(() => {
+            if (updated) {
+              updated = false;
+              listener();
+            }
+          }, delay);
+        } else {
+          waiting = true;
+          setTimeout(function () {
+            waiting = false;
+          }, delay);
+
+          // Call the listener immediately at start
+          updated = false;
+          listener();
+        }
       };
 
-      listeners.current.add(debouncedListener);
+      const unsubscribe = subscribe(throttledListener);
 
       return () => {
+        unsubscribe();
         clearTimeout(timer);
-        listeners.current.delete(debouncedListener);
       };
     }
   );
@@ -100,45 +143,63 @@ function FrameSizeProviderInner({
     () => ({
       getCurrent,
       subscribe,
-      subscribeDebounced,
+      subscribeThrottled,
     }),
-    [subscribe, subscribeDebounced, getCurrent]
+    [subscribe, subscribeThrottled, getCurrent]
   );
 
+  const onChange = useLatestCallback((frame: Frame) => {
+    if (
+      frameRef.current.height === frame.height &&
+      frameRef.current.width === frame.width
+    ) {
+      return;
+    }
+
+    frameRef.current = { width: frame.width, height: frame.height };
+    listeners.current.forEach((listener) => listener());
+  });
+
   return (
-    <FrameContext.Provider value={context}>
-      {element}
-      {children}
-    </FrameContext.Provider>
+    <>
+      {Platform.OS === 'web' ? (
+        <FrameSizeListenerWeb onChange={onChange} />
+      ) : typeof SafeAreaListener === 'undefined' ? (
+        <FrameSizeListenerNativeFallback onChange={onChange} />
+      ) : (
+        <SafeAreaListener
+          onChange={({ frame }) => onChange(frame)}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+      <FrameContext.Provider value={context}>{children}</FrameContext.Provider>
+    </>
   );
 }
 
-const useResizeListener =
-  Platform.OS === 'web' ? useResizeListenerWeb : useResizeListenerNative;
-
-function useResizeListenerNative(onChange: (size: Size) => void) {
+// SafeAreaListener is available only on newer versions
+// Fallback to an effect-based shim for older versions
+function FrameSizeListenerNativeFallback({
+  onChange,
+}: {
+  onChange: (frame: Frame) => void;
+}) {
   const frame = useSafeAreaFrame();
 
   React.useLayoutEffect(() => {
     onChange(frame);
   }, [frame, onChange]);
 
-  return {
-    element: null,
-    get: () => frame,
-  };
+  return null;
 }
 
-const { width = 0, height = 0 } = Dimensions.get('window');
-
 // FIXME: On the Web, the safe area frame value doesn't update on resize
 // So we workaround this by measuring the frame on resize
-function useResizeListenerWeb(onChange: (size: Size) => void) {
-  const frameRef = React.useRef<Size>({
-    width,
-    height,
-  });
-
+function FrameSizeListenerWeb({
+  onChange,
+}: {
+  onChange: (frame: Frame) => void;
+}) {
   const elementRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
@@ -146,21 +207,9 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
       return;
     }
 
-    const update = (size: Size) => {
-      if (
-        frameRef.current.width === size.width &&
-        frameRef.current.height === size.height
-      ) {
-        return;
-      }
-
-      frameRef.current = size;
-      onChange(size);
-    };
-
     const rect = elementRef.current.getBoundingClientRect();
 
-    update({
+    onChange({
       width: rect.width,
       height: rect.height,
     });
@@ -171,7 +220,7 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
       if (entry) {
         const { width, height } = entry.contentRect;
 
-        update({ width, height });
+        onChange({ width, height });
       }
     });
 
@@ -182,7 +231,7 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
     };
   }, [onChange]);
 
-  const element = (
+  return (
     <div
       ref={elementRef}
       style={{
@@ -192,9 +241,4 @@ function useResizeListenerWeb(onChange: (size: Size) => void) {
       }}
     />
   );
-
-  return {
-    element,
-    get: () => frameRef.current,
-  };
 }