@react-navigation/elements 1.3.26 → 1.3.28

package/lib/commonjs/SafeAreaProviderCompat.js

@@ -36,21 +36,86 @@ function SafeAreaProviderCompat(_ref) {
     children,
     style
   } = _ref;
-  return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaInsetsContext.Consumer, null, insets => {
-    if (insets) {
-      // If we already have insets, don't wrap the stack in another safe area provider
-      // This avoids an issue with updates at the cost of potentially incorrect values
-      // https://github.com/react-navigation/react-navigation/issues/174
-      return /*#__PURE__*/React.createElement(_reactNative.View, {
-        style: [styles.container, style]
-      }, children);
-    }
-    return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaProvider, {
-      initialMetrics: initialMetrics,
-      style: style
+  const insets = React.useContext(_reactNativeSafeAreaContext.SafeAreaInsetsContext);
+  if (insets) {
+    // If we already have insets, don't wrap the stack in another safe area provider
+    // This avoids an issue with updates at the cost of potentially incorrect values
+    // https://github.com/react-navigation/react-navigation/issues/174
+    return /*#__PURE__*/React.createElement(_reactNative.View, {
+      style: [styles.container, style]
+    }, children);
+  }
+  if (_reactNative.Platform.OS === 'web') {
+    children = /*#__PURE__*/React.createElement(SafeAreaFrameProvider, {
+      initialMetrics: initialMetrics
     }, children);
-  });
+  }
+  return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaProvider, {
+    initialMetrics: initialMetrics,
+    style: style
+  }, children);
 }
+
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+const SafeAreaFrameProvider = _ref2 => {
+  let {
+    initialMetrics,
+    children
+  } = _ref2;
+  const element = React.useRef(null);
+  const [frame, setFrame] = React.useState(initialMetrics.frame);
+  React.useEffect(() => {
+    if (element.current == null) {
+      return;
+    }
+    const rect = element.current.getBoundingClientRect();
+    setFrame({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height
+    });
+    let timeout;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        const {
+          x,
+          y,
+          width,
+          height
+        } = entry.contentRect;
+
+        // Debounce the frame updates to avoid too many updates in a short time
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          setFrame({
+            x,
+            y,
+            width,
+            height
+          });
+        }, 100);
+      }
+    });
+    observer.observe(element.current);
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaFrameContext.Provider, {
+    value: frame
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: element,
+    style: {
+      ..._reactNative.StyleSheet.absoluteFillObject,
+      pointerEvents: 'none',
+      visibility: 'hidden'
+    }
+  }), children);
+};
 SafeAreaProviderCompat.initialMetrics = initialMetrics;
 const styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/SafeAreaProviderCompat.js.map

@@ -1 +1 @@
-{"version":3,"names":["width","height","Dimensions","get","initialMetrics","Platform","OS","initialWindowMetrics","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","styles","container","StyleSheet","create","flex"],"sourceRoot":"../../src","sources":["SafeAreaProviderCompat.tsx"],"mappings":";;;;;;AAAA;AACA;AAQA;AAIwC;AAAA;AAOxC,MAAM;EAAEA,KAAK,GAAG,CAAC;EAAEC,MAAM,GAAG;AAAE,CAAC,GAAGC,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC;;AAE1D;AACA;AACA;AACA,MAAMC,cAAc,GAClBC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAIC,gDAAoB,IAAI,IAAI,GACjD;EACEC,KAAK,EAAE;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEV,KAAK;IAAEC;EAAO,CAAC;EACpCU,MAAM,EAAE;IAAEC,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE;AACjD,CAAC,GACDR,gDAAoB;AAEX,SAASS,sBAAsB,OAA6B;EAAA,IAA5B;IAAEC,QAAQ;IAAEC;EAAa,CAAC;EACvE,oBACE,oBAAC,iDAAqB,CAAC,QAAQ,QAC3BP,MAAM,IAAK;IACX,IAAIA,MAAM,EAAE;MACV;MACA;MACA;MACA,oBAAO,oBAAC,iBAAI;QAAC,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAS,EAAEF,KAAK;MAAE,GAAED,QAAQ,CAAQ;IAClE;IAEA,oBACE,oBAAC,4CAAgB;MAAC,cAAc,EAAEb,cAAe;MAAC,KAAK,EAAEc;IAAM,GAC5DD,QAAQ,CACQ;EAEvB,CAAC,CAC8B;AAErC;AAEAD,sBAAsB,CAACZ,cAAc,GAAGA,cAAc;AAEtD,MAAMe,MAAM,GAAGE,uBAAU,CAACC,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR;AACF,CAAC,CAAC"}
+{"version":3,"names":["width","height","Dimensions","get","initialMetrics","Platform","OS","initialWindowMetrics","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","React","useContext","SafeAreaInsetsContext","styles","container","SafeAreaFrameProvider","element","useRef","setFrame","useState","useEffect","current","rect","getBoundingClientRect","timeout","observer","ResizeObserver","entries","entry","contentRect","clearTimeout","setTimeout","observe","disconnect","StyleSheet","absoluteFillObject","pointerEvents","visibility","create","flex"],"sourceRoot":"../../src","sources":["SafeAreaProviderCompat.tsx"],"mappings":"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"}

package/lib/module/SafeAreaProviderCompat.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dimensions, Platform, StyleSheet, View } from 'react-native';
-import { initialWindowMetrics, SafeAreaInsetsContext, SafeAreaProvider } from 'react-native-safe-area-context';
+import { initialWindowMetrics, SafeAreaFrameContext, SafeAreaInsetsContext, SafeAreaProvider } from 'react-native-safe-area-context';
 const {
   width = 0,
   height = 0
@@ -28,21 +28,86 @@ export default function SafeAreaProviderCompat(_ref) {
     children,
     style
   } = _ref;
-  return /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, insets => {
-    if (insets) {
-      // If we already have insets, don't wrap the stack in another safe area provider
-      // This avoids an issue with updates at the cost of potentially incorrect values
-      // https://github.com/react-navigation/react-navigation/issues/174
-      return /*#__PURE__*/React.createElement(View, {
-        style: [styles.container, style]
-      }, children);
-    }
-    return /*#__PURE__*/React.createElement(SafeAreaProvider, {
-      initialMetrics: initialMetrics,
-      style: style
+  const insets = React.useContext(SafeAreaInsetsContext);
+  if (insets) {
+    // If we already have insets, don't wrap the stack in another safe area provider
+    // This avoids an issue with updates at the cost of potentially incorrect values
+    // https://github.com/react-navigation/react-navigation/issues/174
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.container, style]
+    }, children);
+  }
+  if (Platform.OS === 'web') {
+    children = /*#__PURE__*/React.createElement(SafeAreaFrameProvider, {
+      initialMetrics: initialMetrics
     }, children);
-  });
+  }
+  return /*#__PURE__*/React.createElement(SafeAreaProvider, {
+    initialMetrics: initialMetrics,
+    style: style
+  }, children);
 }
+
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+const SafeAreaFrameProvider = _ref2 => {
+  let {
+    initialMetrics,
+    children
+  } = _ref2;
+  const element = React.useRef(null);
+  const [frame, setFrame] = React.useState(initialMetrics.frame);
+  React.useEffect(() => {
+    if (element.current == null) {
+      return;
+    }
+    const rect = element.current.getBoundingClientRect();
+    setFrame({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height
+    });
+    let timeout;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        const {
+          x,
+          y,
+          width,
+          height
+        } = entry.contentRect;
+
+        // Debounce the frame updates to avoid too many updates in a short time
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          setFrame({
+            x,
+            y,
+            width,
+            height
+          });
+        }, 100);
+      }
+    });
+    observer.observe(element.current);
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(SafeAreaFrameContext.Provider, {
+    value: frame
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: element,
+    style: {
+      ...StyleSheet.absoluteFillObject,
+      pointerEvents: 'none',
+      visibility: 'hidden'
+    }
+  }), children);
+};
 SafeAreaProviderCompat.initialMetrics = initialMetrics;
 const styles = StyleSheet.create({
   container: {

package/lib/module/SafeAreaProviderCompat.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Dimensions","Platform","StyleSheet","View","initialWindowMetrics","SafeAreaInsetsContext","SafeAreaProvider","width","height","get","initialMetrics","OS","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","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;AAOvC,MAAM;EAAEC,KAAK,GAAG,CAAC;EAAEC,MAAM,GAAG;AAAE,CAAC,GAAGR,UAAU,CAACS,GAAG,CAAC,QAAQ,CAAC;;AAE1D;AACA;AACA;AACA,MAAMC,cAAc,GAClBT,QAAQ,CAACU,EAAE,KAAK,KAAK,IAAIP,oBAAoB,IAAI,IAAI,GACjD;EACEQ,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,GACDf,oBAAoB;AAE1B,eAAe,SAASgB,sBAAsB,OAA6B;EAAA,IAA5B;IAAEC,QAAQ;IAAEC;EAAa,CAAC;EACvE,oBACE,oBAAC,qBAAqB,CAAC,QAAQ,QAC3BP,MAAM,IAAK;IACX,IAAIA,MAAM,EAAE;MACV;MACA;MACA;MACA,oBAAO,oBAAC,IAAI;QAAC,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAS,EAAEF,KAAK;MAAE,GAAED,QAAQ,CAAQ;IAClE;IAEA,oBACE,oBAAC,gBAAgB;MAAC,cAAc,EAAEX,cAAe;MAAC,KAAK,EAAEY;IAAM,GAC5DD,QAAQ,CACQ;EAEvB,CAAC,CAC8B;AAErC;AAEAD,sBAAsB,CAACV,cAAc,GAAGA,cAAc;AAEtD,MAAMa,MAAM,GAAGrB,UAAU,CAACuB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,IAAI,EAAE;EACR;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","Dimensions","Platform","StyleSheet","View","initialWindowMetrics","SafeAreaFrameContext","SafeAreaInsetsContext","SafeAreaProvider","width","height","get","initialMetrics","OS","frame","x","y","insets","top","left","right","bottom","SafeAreaProviderCompat","children","style","useContext","styles","container","SafeAreaFrameProvider","element","useRef","setFrame","useState","useEffect","current","rect","getBoundingClientRect","timeout","observer","ResizeObserver","entries","entry","contentRect","clearTimeout","setTimeout","observe","disconnect","absoluteFillObject","pointerEvents","visibility","create","flex"],"sourceRoot":"../../src","sources":["SafeAreaProviderCompat.tsx"],"mappings":"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"}

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

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import { type Metrics } from 'react-native-safe-area-context';
 type Props = {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 };
 declare function SafeAreaProviderCompat({ children, style }: Props): JSX.Element;
 declare namespace SafeAreaProviderCompat {
-    var initialMetrics: import("react-native-safe-area-context").Metrics;
+    var initialMetrics: Metrics;
 }
 export default SafeAreaProviderCompat;
 //# sourceMappingURL=SafeAreaProviderCompat.d.ts.map

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,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,iBAAwB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,eAmBxE;kBAnBuB,sBAAsB;;;eAAtB,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,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,KAAK,OAAO,EAIb,MAAM,gCAAgC,CAAC;AAExC,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,iBAAwB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,eAuBxE;kBAvBuB,sBAAsB;;;eAAtB,sBAAsB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.3.26",
+  "version": "1.3.28",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "0.2.9",
-    "@react-navigation/native": "^6.1.14",
+    "@react-navigation/native": "^6.1.15",
     "@testing-library/react-native": "^11.5.0",
     "@types/react": "~18.0.27",
     "@types/react-native": "~0.71.3",
@@ -68,5 +68,5 @@
       ]
     ]
   },
-  "gitHead": "523fa4f3afb7c428a8370bfd83933c0163224e66"
+  "gitHead": "55671f1be1c068e95925c33aa171be3ec63ff97b"
 }

package/src/SafeAreaProviderCompat.tsx

@@ -9,6 +9,8 @@ import {
 } from 'react-native';
 import {
   initialWindowMetrics,
+  type Metrics,
+  SafeAreaFrameContext,
   SafeAreaInsetsContext,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
@@ -32,26 +34,95 @@ const initialMetrics =
     : initialWindowMetrics;
 
 export default function SafeAreaProviderCompat({ children, style }: Props) {
+  const insets = React.useContext(SafeAreaInsetsContext);
+
+  if (insets) {
+    // If we already have insets, don't wrap the stack in another safe area provider
+    // This avoids an issue with updates at the cost of potentially incorrect values
+    // https://github.com/react-navigation/react-navigation/issues/174
+    return <View style={[styles.container, style]}>{children}</View>;
+  }
+
+  if (Platform.OS === 'web') {
+    children = (
+      <SafeAreaFrameProvider initialMetrics={initialMetrics}>
+        {children}
+      </SafeAreaFrameProvider>
+    );
+  }
+
   return (
-    <SafeAreaInsetsContext.Consumer>
-      {(insets) => {
-        if (insets) {
-          // If we already have insets, don't wrap the stack in another safe area provider
-          // This avoids an issue with updates at the cost of potentially incorrect values
-          // https://github.com/react-navigation/react-navigation/issues/174
-          return <View style={[styles.container, style]}>{children}</View>;
-        }
-
-        return (
-          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
-            {children}
-          </SafeAreaProvider>
-        );
-      }}
-    </SafeAreaInsetsContext.Consumer>
+    <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
+      {children}
+    </SafeAreaProvider>
   );
 }
 
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+const SafeAreaFrameProvider = ({
+  initialMetrics,
+  children,
+}: {
+  initialMetrics: Metrics;
+  children: React.ReactNode;
+}) => {
+  const element = React.useRef<HTMLDivElement>(null);
+  const [frame, setFrame] = React.useState(initialMetrics.frame);
+
+  React.useEffect(() => {
+    if (element.current == null) {
+      return;
+    }
+
+    const rect = element.current.getBoundingClientRect();
+
+    setFrame({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+    });
+
+    let timeout: NodeJS.Timeout;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      if (entry) {
+        const { x, y, width, height } = entry.contentRect;
+
+        // Debounce the frame updates to avoid too many updates in a short time
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          setFrame({ x, y, width, height });
+        }, 100);
+      }
+    });
+
+    observer.observe(element.current);
+
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return (
+    <SafeAreaFrameContext.Provider value={frame}>
+      <div
+        ref={element}
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          pointerEvents: 'none',
+          visibility: 'hidden',
+        }}
+      />
+      {children}
+    </SafeAreaFrameContext.Provider>
+  );
+};
+
 SafeAreaProviderCompat.initialMetrics = initialMetrics;
 
 const styles = StyleSheet.create({