react-native-safe-area-context - npm Package Compare versions

Comparing version 4.3.3 to 4.7.2

lib/commonjs/CompatNativeSafeAreaProvider.js

@@ -7,11 +7,6 @@ "use strict";
 exports.CompatNativeSafeAreaProvider = CompatNativeSafeAreaProvider;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function CompatNativeSafeAreaProvider(_ref) {
@@ -36,4 +31,4 @@ let {
       height: window.height
-    }; // @ts-ignore: missing properties
-
+    };
+    // @ts-ignore: missing properties
     onInsetsChange({
@@ -40,0 +35,0 @@ nativeEvent: {

lib/commonjs/index.js

@@ -6,5 +6,3 @@ "use strict";
 });
-
 var _SafeAreaContext = require("./SafeAreaContext");
-
 Object.keys(_SafeAreaContext).forEach(function (key) {
@@ -20,5 +18,3 @@ if (key === "default" || key === "__esModule") return;
 });
-
 var _SafeAreaView = require("./SafeAreaView");
-
 Object.keys(_SafeAreaView).forEach(function (key) {
@@ -34,5 +30,3 @@ if (key === "default" || key === "__esModule") return;
 });
-
 var _InitialWindow = require("./InitialWindow");
-
 Object.keys(_InitialWindow).forEach(function (key) {
@@ -48,5 +42,3 @@ if (key === "default" || key === "__esModule") return;
 });
-
 var _SafeArea = require("./SafeArea.types");
-
 Object.keys(_SafeArea).forEach(function (key) {
@@ -53,0 +45,0 @@ if (key === "default" || key === "__esModule") return;

lib/commonjs/InitialWindow.js

@@ -8,6 +8,6 @@ "use strict";
 const initialWindowMetrics = null;
+
 /**
  * @deprecated
  */
-
 exports.initialWindowMetrics = initialWindowMetrics;
@@ -14,0 +14,0 @@ const initialWindowSafeAreaInsets = null;

lib/commonjs/InitialWindow.native.js

@@ -7,14 +7,10 @@ "use strict";
 exports.initialWindowSafeAreaInsets = exports.initialWindowMetrics = void 0;
-
 var _NativeSafeAreaContext = _interopRequireDefault(require("./specs/NativeSafeAreaContext"));
-
 var _NativeSafeAreaContex, _NativeSafeAreaContex2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const initialWindowMetrics = (_NativeSafeAreaContext.default === null || _NativeSafeAreaContext.default === void 0 ? void 0 : (_NativeSafeAreaContex = _NativeSafeAreaContext.default.getConstants) === null || _NativeSafeAreaContex === void 0 ? void 0 : (_NativeSafeAreaContex2 = _NativeSafeAreaContex.call(_NativeSafeAreaContext.default)) === null || _NativeSafeAreaContex2 === void 0 ? void 0 : _NativeSafeAreaContex2.initialWindowMetrics) ?? null;
 
-const initialWindowMetrics = (_NativeSafeAreaContex = _NativeSafeAreaContext.default === null || _NativeSafeAreaContext.default === void 0 ? void 0 : (_NativeSafeAreaContex2 = _NativeSafeAreaContext.default.getConstants()) === null || _NativeSafeAreaContex2 === void 0 ? void 0 : _NativeSafeAreaContex2.initialWindowMetrics) !== null && _NativeSafeAreaContex !== void 0 ? _NativeSafeAreaContex : null;
 /**
  * @deprecated
  */
-
 exports.initialWindowMetrics = initialWindowMetrics;
@@ -21,0 +17,0 @@ const initialWindowSafeAreaInsets = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets;

lib/commonjs/NativeSafeAreaProvider.js

@@ -12,6 +12,4 @@ "use strict";
 });
-
 var _NativeSafeAreaProvider = _interopRequireDefault(require("./specs/NativeSafeAreaProvider"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=NativeSafeAreaProvider.js.map

lib/commonjs/NativeSafeAreaProvider.macos.js

@@ -12,4 +12,3 @@ "use strict";
 });
-
 var _CompatNativeSafeAreaProvider = require("./CompatNativeSafeAreaProvider");
 //# sourceMappingURL=NativeSafeAreaProvider.macos.js.map

lib/commonjs/NativeSafeAreaProvider.web.js

@@ -7,11 +7,6 @@ "use strict";
 exports.NativeSafeAreaProvider = NativeSafeAreaProvider;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /* eslint-env browser */
@@ -26,2 +21,3 @@
  */
+
 const CSSTransitions = {
@@ -34,3 +30,2 @@ WebkitTransition: 'webkitTransitionEnd',
 };
-
 function NativeSafeAreaProvider(_ref) {
@@ -47,6 +42,4 @@ let {
     }
-
     const element = createContextElement();
     document.body.appendChild(element);
-
     const onEnd = () => {
@@ -70,4 +63,4 @@ const {
         height: document.documentElement.offsetHeight
-      }; // @ts-ignore: missing properties
-
+      };
+      // @ts-ignore: missing properties
       onInsetsChange({
@@ -80,3 +73,2 @@ nativeEvent: {
     };
-
     element.addEventListener(getSupportedTransitionEvent(), onEnd);
@@ -93,5 +85,3 @@ onEnd();
 }
-
 let _supportedTransitionEvent = null;
-
 function getSupportedTransitionEvent() {
@@ -101,6 +91,4 @@ if (_supportedTransitionEvent != null) {
   }
-
   const element = document.createElement('invalidtype');
   _supportedTransitionEvent = CSSTransitions.Transition;
-
   for (const key in CSSTransitions) {
@@ -112,8 +100,5 @@ if (element.style[key] !== undefined) {
   }
-
   return _supportedTransitionEvent;
 }
-
 let _supportedEnv = null;
-
 function getSupportedEnv() {
@@ -123,7 +108,5 @@ if (_supportedEnv !== null) {
   }
-
   const {
     CSS
   } = window;
-
   if (CSS && CSS.supports && CSS.supports('top: constant(safe-area-inset-top)')) {
@@ -134,10 +117,7 @@ _supportedEnv = 'constant';
   }
-
   return _supportedEnv;
 }
-
 function getInset(side) {
   return `${getSupportedEnv()}(safe-area-inset-${side})`;
 }
-
 function createContextElement() {
@@ -155,4 +135,4 @@ const element = document.createElement('div');
   style.overflow = 'hidden';
-  style.visibility = 'hidden'; // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
-
+  style.visibility = 'hidden';
+  // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
   style.transitionDuration = '0.05s';
@@ -159,0 +139,0 @@ style.transitionProperty = 'padding';

lib/commonjs/NativeSafeAreaProvider.windows.js

@@ -12,4 +12,3 @@ "use strict";
 });
-
 var _CompatNativeSafeAreaProvider = require("./CompatNativeSafeAreaProvider");
 //# sourceMappingURL=NativeSafeAreaProvider.windows.js.map

lib/commonjs/SafeAreaContext.js

@@ -12,33 +12,20 @@ "use strict";
 exports.withSafeAreaInsets = withSafeAreaInsets;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 var _NativeSafeAreaProvider = require("./NativeSafeAreaProvider");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 const isDev = process.env.NODE_ENV !== 'production';
 const SafeAreaInsetsContext = /*#__PURE__*/React.createContext(null);
 exports.SafeAreaInsetsContext = SafeAreaInsetsContext;
-
 if (isDev) {
   SafeAreaInsetsContext.displayName = 'SafeAreaInsetsContext';
 }
-
 const SafeAreaFrameContext = /*#__PURE__*/React.createContext(null);
 exports.SafeAreaFrameContext = SafeAreaFrameContext;
-
 if (isDev) {
   SafeAreaFrameContext.displayName = 'SafeAreaFrameContext';
 }
-
 function SafeAreaProvider(_ref) {
-  var _ref2, _ref3, _initialMetrics$inset, _ref4, _initialMetrics$frame;
-
   let {
@@ -53,4 +40,4 @@ children,
   const parentFrame = useParentSafeAreaFrame();
-  const [insets, setInsets] = React.useState((_ref2 = (_ref3 = (_initialMetrics$inset = initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.insets) !== null && _initialMetrics$inset !== void 0 ? _initialMetrics$inset : initialSafeAreaInsets) !== null && _ref3 !== void 0 ? _ref3 : parentInsets) !== null && _ref2 !== void 0 ? _ref2 : null);
-  const [frame, setFrame] = React.useState((_ref4 = (_initialMetrics$frame = initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.frame) !== null && _initialMetrics$frame !== void 0 ? _initialMetrics$frame : parentFrame) !== null && _ref4 !== void 0 ? _ref4 : {
+  const [insets, setInsets] = React.useState((initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.insets) ?? initialSafeAreaInsets ?? parentInsets ?? null);
+  const [frame, setFrame] = React.useState((initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.frame) ?? parentFrame ?? {
     // Backwards compat so we render anyway if we don't have frame.
@@ -69,14 +56,21 @@ x: 0,
     } = event;
-
-    if ( // Backwards compat with old native code that won't send frame.
-    nextFrame && (nextFrame.height !== frame.height || nextFrame.width !== frame.width || nextFrame.x !== frame.x || nextFrame.y !== frame.y)) {
-      setFrame(nextFrame);
-    }
-
-    if (!insets || nextInsets.bottom !== insets.bottom || nextInsets.left !== insets.left || nextInsets.right !== insets.right || nextInsets.top !== insets.top) {
-      setInsets(nextInsets);
-    }
-  }, [frame, insets]);
+    setFrame(frame => {
+      if (
+      // Backwards compat with old native code that won't send frame.
+      nextFrame && (nextFrame.height !== frame.height || nextFrame.width !== frame.width || nextFrame.x !== frame.x || nextFrame.y !== frame.y)) {
+        return nextFrame;
+      } else {
+        return frame;
+      }
+    });
+    setInsets(insets => {
+      if (!insets || nextInsets.bottom !== insets.bottom || nextInsets.left !== insets.left || nextInsets.right !== insets.right || nextInsets.top !== insets.top) {
+        return nextInsets;
+      } else {
+        return insets;
+      }
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(_NativeSafeAreaProvider.NativeSafeAreaProvider, _extends({
-    style: [styles.fill, style],
+    style: _reactNative.StyleSheet.compose(styles.fill, style),
     onInsetsChange: onInsetsChange
@@ -89,3 +83,2 @@ }, others), insets != null ? /*#__PURE__*/React.createElement(SafeAreaFrameContext.Provider, {
 }
-
 const styles = _reactNative.StyleSheet.create({
@@ -96,39 +89,26 @@ fill: {
 });
-
 function useParentSafeAreaInsets() {
   return React.useContext(SafeAreaInsetsContext);
 }
-
 function useParentSafeAreaFrame() {
   return React.useContext(SafeAreaFrameContext);
 }
-
 const NO_INSETS_ERROR = 'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.';
-
 function useSafeAreaInsets() {
-  const safeArea = React.useContext(SafeAreaInsetsContext);
-
-  if (safeArea == null) {
+  const insets = React.useContext(SafeAreaInsetsContext);
+  if (insets == null) {
     throw new Error(NO_INSETS_ERROR);
   }
-
-  return safeArea;
+  return insets;
 }
-
 function useSafeAreaFrame() {
   const frame = React.useContext(SafeAreaFrameContext);
-
   if (frame == null) {
     throw new Error(NO_INSETS_ERROR);
   }
-
   return frame;
 }
-
 function withSafeAreaInsets(WrappedComponent) {
-  return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, insets => {
-    if (insets == null) {
-      throw new Error(NO_INSETS_ERROR);
-    }
-
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
+    const insets = useSafeAreaInsets();
     return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
@@ -138,22 +118,20 @@ insets: insets,
     }));
-  }));
+  });
 }
+
 /**
  * @deprecated
  */
-
-
 function useSafeArea() {
   return useSafeAreaInsets();
 }
+
 /**
  * @deprecated
  */
+const SafeAreaConsumer = SafeAreaInsetsContext.Consumer;
 
-
-const SafeAreaConsumer = SafeAreaInsetsContext.Consumer;
 /**
  * @deprecated
  */
-
 exports.SafeAreaConsumer = SafeAreaConsumer;
@@ -160,0 +138,0 @@ const SafeAreaContext = SafeAreaInsetsContext;

lib/commonjs/SafeAreaView.js

@@ -7,15 +7,14 @@ "use strict";
 exports.SafeAreaView = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _NativeSafeAreaView = _interopRequireDefault(require("./specs/NativeSafeAreaView"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+const defaultEdges = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive'
+};
 const SafeAreaView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -26,6 +25,24 @@ let {
   } = _ref;
+  const nativeEdges = (0, React.useMemo)(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+    const edgesObj = Array.isArray(edges) ? edges.reduce((acc, edge) => {
+      acc[edge] = 'additive';
+      return acc;
+    }, {}) :
+    // ts has trouble with refining readonly arrays.
+    edges;
+
+    // make sure that we always pass all edges, required for fabric
+    const requiredEdges = {
+      top: edgesObj.top ?? 'off',
+      right: edgesObj.right ?? 'off',
+      bottom: edgesObj.bottom ?? 'off',
+      left: edgesObj.left ?? 'off'
+    };
+    return requiredEdges;
+  }, [edges]);
   return /*#__PURE__*/React.createElement(_NativeSafeAreaView.default, _extends({}, props, {
-    // Codegen doesn't support default values for array types so
-    // set it here.
-    edges: edges !== null && edges !== void 0 ? edges : ['bottom', 'left', 'right', 'top'],
+    edges: nativeEdges,
     ref: ref
@@ -32,0 +49,0 @@ }));

lib/commonjs/SafeAreaView.macos.js

@@ -7,7 +7,5 @@ "use strict";
 exports.SafeAreaView = void 0;
-
 var _reactNative = require("react-native");
-
 const SafeAreaView = _reactNative.View;
 exports.SafeAreaView = SafeAreaView;
 //# sourceMappingURL=SafeAreaView.macos.js.map

lib/commonjs/SafeAreaView.web.js

@@ -6,22 +6,16 @@ "use strict";
 });
-exports.SafeAreaView = SafeAreaView;
-
+exports.SafeAreaView = void 0;
 var React = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 var _SafeAreaContext = require("./SafeAreaContext");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 // prettier-ignore
 const TOP = 0b1000,
-      RIGHT = 0b0100,
-      BOTTOM = 0b0010,
-      LEFT = 0b0001,
-      ALL = 0b1111;
+  RIGHT = 0b0100,
+  BOTTOM = 0b0010,
+  LEFT = 0b0001,
+  ALL = 0b1111;
+
 /* eslint-disable no-bitwise */
@@ -35,4 +29,3 @@
 };
-
-function SafeAreaView(_ref) {
+const SafeAreaView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -45,3 +38,3 @@ style = {},
   const insets = (0, _SafeAreaContext.useSafeAreaInsets)();
-  const edgeBitmask = edges != null ? edges.reduce((accum, edge) => accum | edgeBitmaskMap[edge], 0) : ALL;
+  const edgeBitmask = edges != null ? Array.isArray(edges) ? edges.reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : Object.keys(edges).reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : ALL;
   const appliedStyle = React.useMemo(() => {
@@ -52,5 +45,3 @@ const insetTop = edgeBitmask & TOP ? insets.top : 0;
     const insetLeft = edgeBitmask & LEFT ? insets.left : 0;
-
     const flatStyle = _reactNative.StyleSheet.flatten(style);
-
     if (mode === 'margin') {
@@ -94,4 +85,7 @@ const {
     style: appliedStyle
-  }, rest));
-}
+  }, rest, {
+    ref: ref
+  }));
+});
+exports.SafeAreaView = SafeAreaView;
 //# sourceMappingURL=SafeAreaView.web.js.map

lib/commonjs/SafeAreaView.windows.js

@@ -7,7 +7,5 @@ "use strict";
 exports.SafeAreaView = void 0;
-
 var _reactNative = require("react-native");
-
 const SafeAreaView = _reactNative.View;
 exports.SafeAreaView = SafeAreaView;
 //# sourceMappingURL=SafeAreaView.windows.js.map

lib/commonjs/specs/NativeSafeAreaContext.js

@@ -7,15 +7,5 @@ "use strict";
 exports.default = void 0;
-
-var TurboModuleRegistry = _interopRequireWildcard(require("react-native/Libraries/TurboModule/TurboModuleRegistry"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// @ts-expect-error: missing type definition for module
-// @ts-expect-error: missing type definition for module
-// @ts-expect-error: missing type definition for module
-var _default = TurboModuleRegistry.get('RNCSafeAreaContext');
-
+var _reactNative = require("react-native");
+var _default = _reactNative.TurboModuleRegistry.get('RNCSafeAreaContext');
 exports.default = _default;
 //# sourceMappingURL=NativeSafeAreaContext.js.map

lib/commonjs/specs/NativeSafeAreaProvider.js

@@ -7,11 +7,6 @@ "use strict";
 exports.default = void 0;
-
 var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// @ts-expect-error: missing type definition for module
 var _default = (0, _codegenNativeComponent.default)('RNCSafeAreaProvider');
-
 exports.default = _default;
 //# sourceMappingURL=NativeSafeAreaProvider.js.map

lib/commonjs/specs/NativeSafeAreaView.js

@@ -7,13 +7,8 @@ "use strict";
 exports.default = void 0;
-
 var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// @ts-expect-error: missing type definition for module
 var _default = (0, _codegenNativeComponent.default)('RNCSafeAreaView', {
   interfaceOnly: true
 });
-
 exports.default = _default;
 //# sourceMappingURL=NativeSafeAreaView.js.map

lib/module/CompatNativeSafeAreaProvider.js

@@ -22,4 +22,4 @@ import * as React from 'react';
       height: window.height
-    }; // @ts-ignore: missing properties
-
+    };
+    // @ts-ignore: missing properties
     onInsetsChange({
@@ -26,0 +26,0 @@ nativeEvent: {

lib/module/InitialWindow.js

 export const initialWindowMetrics = null;
+
 /**
  * @deprecated
  */
-
 export const initialWindowSafeAreaInsets = null;
 //# sourceMappingURL=InitialWindow.js.map

lib/module/InitialWindow.native.js

 var _NativeSafeAreaContex, _NativeSafeAreaContex2;
+import NativeSafeAreaContext from './specs/NativeSafeAreaContext';
+export const initialWindowMetrics = (NativeSafeAreaContext === null || NativeSafeAreaContext === void 0 ? void 0 : (_NativeSafeAreaContex = NativeSafeAreaContext.getConstants) === null || _NativeSafeAreaContex === void 0 ? void 0 : (_NativeSafeAreaContex2 = _NativeSafeAreaContex.call(NativeSafeAreaContext)) === null || _NativeSafeAreaContex2 === void 0 ? void 0 : _NativeSafeAreaContex2.initialWindowMetrics) ?? null;
 
-import NativeSafeAreaContext from './specs/NativeSafeAreaContext';
-export const initialWindowMetrics = (_NativeSafeAreaContex = NativeSafeAreaContext === null || NativeSafeAreaContext === void 0 ? void 0 : (_NativeSafeAreaContex2 = NativeSafeAreaContext.getConstants()) === null || _NativeSafeAreaContex2 === void 0 ? void 0 : _NativeSafeAreaContex2.initialWindowMetrics) !== null && _NativeSafeAreaContex !== void 0 ? _NativeSafeAreaContex : null;
 /**
  * @deprecated
  */
-
 export const initialWindowSafeAreaInsets = initialWindowMetrics === null || initialWindowMetrics === void 0 ? void 0 : initialWindowMetrics.insets;
 //# sourceMappingURL=InitialWindow.native.js.map

lib/module/NativeSafeAreaProvider.web.js

 /* eslint-env browser */
+
 import * as React from 'react';
 import { View } from 'react-native';
-
 /**
@@ -12,2 +12,3 @@ * TODO:
  */
+
 const CSSTransitions = {
@@ -31,6 +32,4 @@ WebkitTransition: 'webkitTransitionEnd',
     }
-
     const element = createContextElement();
     document.body.appendChild(element);
-
     const onEnd = () => {
@@ -54,4 +53,4 @@ const {
         height: document.documentElement.offsetHeight
-      }; // @ts-ignore: missing properties
-
+      };
+      // @ts-ignore: missing properties
       onInsetsChange({
@@ -64,3 +63,2 @@ nativeEvent: {
     };
-
     element.addEventListener(getSupportedTransitionEvent(), onEnd);
@@ -78,3 +76,2 @@ onEnd();
 let _supportedTransitionEvent = null;
-
 function getSupportedTransitionEvent() {
@@ -84,6 +81,4 @@ if (_supportedTransitionEvent != null) {
   }
-
   const element = document.createElement('invalidtype');
   _supportedTransitionEvent = CSSTransitions.Transition;
-
   for (const key in CSSTransitions) {
@@ -95,8 +90,5 @@ if (element.style[key] !== undefined) {
   }
-
   return _supportedTransitionEvent;
 }
-
 let _supportedEnv = null;
-
 function getSupportedEnv() {
@@ -106,7 +98,5 @@ if (_supportedEnv !== null) {
   }
-
   const {
     CSS
   } = window;
-
   if (CSS && CSS.supports && CSS.supports('top: constant(safe-area-inset-top)')) {
@@ -117,10 +107,7 @@ _supportedEnv = 'constant';
   }
-
   return _supportedEnv;
 }
-
 function getInset(side) {
   return `${getSupportedEnv()}(safe-area-inset-${side})`;
 }
-
 function createContextElement() {
@@ -138,4 +125,4 @@ const element = document.createElement('div');
   style.overflow = 'hidden';
-  style.visibility = 'hidden'; // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
-
+  style.visibility = 'hidden';
+  // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
   style.transitionDuration = '0.05s';
@@ -142,0 +129,0 @@ style.transitionProperty = 'padding';

lib/module/SafeAreaContext.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import * as React from 'react';
@@ -8,16 +7,10 @@ import { Dimensions, StyleSheet } from 'react-native';
 export const SafeAreaInsetsContext = /*#__PURE__*/React.createContext(null);
-
 if (isDev) {
   SafeAreaInsetsContext.displayName = 'SafeAreaInsetsContext';
 }
-
 export const SafeAreaFrameContext = /*#__PURE__*/React.createContext(null);
-
 if (isDev) {
   SafeAreaFrameContext.displayName = 'SafeAreaFrameContext';
 }
-
 export function SafeAreaProvider(_ref) {
-  var _ref2, _ref3, _initialMetrics$inset, _ref4, _initialMetrics$frame;
-
   let {
@@ -32,4 +25,4 @@ children,
   const parentFrame = useParentSafeAreaFrame();
-  const [insets, setInsets] = React.useState((_ref2 = (_ref3 = (_initialMetrics$inset = initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.insets) !== null && _initialMetrics$inset !== void 0 ? _initialMetrics$inset : initialSafeAreaInsets) !== null && _ref3 !== void 0 ? _ref3 : parentInsets) !== null && _ref2 !== void 0 ? _ref2 : null);
-  const [frame, setFrame] = React.useState((_ref4 = (_initialMetrics$frame = initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.frame) !== null && _initialMetrics$frame !== void 0 ? _initialMetrics$frame : parentFrame) !== null && _ref4 !== void 0 ? _ref4 : {
+  const [insets, setInsets] = React.useState((initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.insets) ?? initialSafeAreaInsets ?? parentInsets ?? null);
+  const [frame, setFrame] = React.useState((initialMetrics === null || initialMetrics === void 0 ? void 0 : initialMetrics.frame) ?? parentFrame ?? {
     // Backwards compat so we render anyway if we don't have frame.
@@ -48,14 +41,21 @@ x: 0,
     } = event;
-
-    if ( // Backwards compat with old native code that won't send frame.
-    nextFrame && (nextFrame.height !== frame.height || nextFrame.width !== frame.width || nextFrame.x !== frame.x || nextFrame.y !== frame.y)) {
-      setFrame(nextFrame);
-    }
-
-    if (!insets || nextInsets.bottom !== insets.bottom || nextInsets.left !== insets.left || nextInsets.right !== insets.right || nextInsets.top !== insets.top) {
-      setInsets(nextInsets);
-    }
-  }, [frame, insets]);
+    setFrame(frame => {
+      if (
+      // Backwards compat with old native code that won't send frame.
+      nextFrame && (nextFrame.height !== frame.height || nextFrame.width !== frame.width || nextFrame.x !== frame.x || nextFrame.y !== frame.y)) {
+        return nextFrame;
+      } else {
+        return frame;
+      }
+    });
+    setInsets(insets => {
+      if (!insets || nextInsets.bottom !== insets.bottom || nextInsets.left !== insets.left || nextInsets.right !== insets.right || nextInsets.top !== insets.top) {
+        return nextInsets;
+      } else {
+        return insets;
+      }
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(NativeSafeAreaProvider, _extends({
-    style: [styles.fill, style],
+    style: StyleSheet.compose(styles.fill, style),
     onInsetsChange: onInsetsChange
@@ -73,36 +73,26 @@ }, others), insets != null ? /*#__PURE__*/React.createElement(SafeAreaFrameContext.Provider, {
 });
-
 function useParentSafeAreaInsets() {
   return React.useContext(SafeAreaInsetsContext);
 }
-
 function useParentSafeAreaFrame() {
   return React.useContext(SafeAreaFrameContext);
 }
-
 const NO_INSETS_ERROR = 'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.';
 export function useSafeAreaInsets() {
-  const safeArea = React.useContext(SafeAreaInsetsContext);
-
-  if (safeArea == null) {
+  const insets = React.useContext(SafeAreaInsetsContext);
+  if (insets == null) {
     throw new Error(NO_INSETS_ERROR);
   }
-
-  return safeArea;
+  return insets;
 }
 export function useSafeAreaFrame() {
   const frame = React.useContext(SafeAreaFrameContext);
-
   if (frame == null) {
     throw new Error(NO_INSETS_ERROR);
   }
-
   return frame;
 }
 export function withSafeAreaInsets(WrappedComponent) {
-  return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, insets => {
-    if (insets == null) {
-      throw new Error(NO_INSETS_ERROR);
-    }
-
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
+    const insets = useSafeAreaInsets();
     return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
@@ -112,21 +102,21 @@ insets: insets,
     }));
-  }));
+  });
 }
+
 /**
  * @deprecated
  */
-
 export function useSafeArea() {
   return useSafeAreaInsets();
 }
+
 /**
  * @deprecated
  */
+export const SafeAreaConsumer = SafeAreaInsetsContext.Consumer;
 
-export const SafeAreaConsumer = SafeAreaInsetsContext.Consumer;
 /**
  * @deprecated
  */
-
 export const SafeAreaContext = SafeAreaInsetsContext;
 //# sourceMappingURL=SafeAreaContext.js.map

lib/module/SafeAreaView.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import * as React from 'react';
 import NativeSafeAreaView from './specs/NativeSafeAreaView';
+import { useMemo } from 'react';
+const defaultEdges = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive'
+};
 export const SafeAreaView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -10,6 +16,24 @@ let {
   } = _ref;
+  const nativeEdges = useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+    const edgesObj = Array.isArray(edges) ? edges.reduce((acc, edge) => {
+      acc[edge] = 'additive';
+      return acc;
+    }, {}) :
+    // ts has trouble with refining readonly arrays.
+    edges;
+
+    // make sure that we always pass all edges, required for fabric
+    const requiredEdges = {
+      top: edgesObj.top ?? 'off',
+      right: edgesObj.right ?? 'off',
+      bottom: edgesObj.bottom ?? 'off',
+      left: edgesObj.left ?? 'off'
+    };
+    return requiredEdges;
+  }, [edges]);
   return /*#__PURE__*/React.createElement(NativeSafeAreaView, _extends({}, props, {
-    // Codegen doesn't support default values for array types so
-    // set it here.
-    edges: edges !== null && edges !== void 0 ? edges : ['bottom', 'left', 'right', 'top'],
+    edges: nativeEdges,
     ref: ref
@@ -16,0 +40,0 @@ }));

lib/module/SafeAreaView.web.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import * as React from 'react';
@@ -8,6 +7,7 @@ import { View, StyleSheet } from 'react-native';
 const TOP = 0b1000,
-      RIGHT = 0b0100,
-      BOTTOM = 0b0010,
-      LEFT = 0b0001,
-      ALL = 0b1111;
+  RIGHT = 0b0100,
+  BOTTOM = 0b0010,
+  LEFT = 0b0001,
+  ALL = 0b1111;
+
 /* eslint-disable no-bitwise */
@@ -21,3 +21,3 @@
 };
-export function SafeAreaView(_ref) {
+export const SafeAreaView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -30,3 +30,3 @@ style = {},
   const insets = useSafeAreaInsets();
-  const edgeBitmask = edges != null ? edges.reduce((accum, edge) => accum | edgeBitmaskMap[edge], 0) : ALL;
+  const edgeBitmask = edges != null ? Array.isArray(edges) ? edges.reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : Object.keys(edges).reduce((acc, edge) => acc | edgeBitmaskMap[edge], 0) : ALL;
   const appliedStyle = React.useMemo(() => {
@@ -38,3 +38,2 @@ const insetTop = edgeBitmask & TOP ? insets.top : 0;
     const flatStyle = StyleSheet.flatten(style);
-
     if (mode === 'margin') {
@@ -78,4 +77,6 @@ const {
     style: appliedStyle
-  }, rest));
-}
+  }, rest, {
+    ref: ref
+  }));
+});
 //# sourceMappingURL=SafeAreaView.web.js.map

lib/module/specs/NativeSafeAreaContext.js

@@ -1,6 +0,3 @@
-// @ts-expect-error: missing type definition for module
-// @ts-expect-error: missing type definition for module
-// @ts-expect-error: missing type definition for module
-import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
+import { TurboModuleRegistry } from 'react-native';
 export default TurboModuleRegistry.get('RNCSafeAreaContext');
 //# sourceMappingURL=NativeSafeAreaContext.js.map

lib/module/specs/NativeSafeAreaProvider.js

@@ -1,4 +0,3 @@
-// @ts-expect-error: missing type definition for module
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 export default codegenNativeComponent('RNCSafeAreaProvider');
 //# sourceMappingURL=NativeSafeAreaProvider.js.map

lib/module/specs/NativeSafeAreaView.js

@@ -1,4 +0,2 @@
-// @ts-expect-error: missing type definition for module
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; // @ts-expect-error: missing type definition for module
-
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 export default codegenNativeComponent('RNCSafeAreaView', {
@@ -5,0 +3,0 @@ interfaceOnly: true

package.json

 {
   "name": "react-native-safe-area-context",
-  "version": "4.3.3",
+  "version": "4.7.2",
   "description": "A flexible way to handle safe area, also works on Android and web.",
@@ -8,3 +8,3 @@ "main": "lib/commonjs/index.js",
   "react-native": "src/index.tsx",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "source": "src/index.tsx",
@@ -32,9 +32,15 @@ "sideEffects": false,
     "start": "react-native start",
-    "test": "yarn validate:prettier && yarn validate:eslint && yarn validate:typescript && yarn validate:jest",
-    "validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" \"fabric-example/**/*.{js,ts,tsx}\"",
+    "test": "yarn format:check && yarn validate:eslint && yarn validate:typescript && yarn validate:jest",
+    "validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\"",
     "validate:typescript": "tsc --project ./ --noEmit",
-    "validate:prettier": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" \"fabric-example/**/*.{js,ts,tsx}\" --check",
     "validate:jest": "jest",
+    "format:prettier:check": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check",
+    "format:prettier:write": "yarn format:prettier:check --write",
+    "format:clang:check": "clang-format --dry-run --Werror --glob='{ios,android,common}/**/*.{h,cpp,m,mm}'",
+    "format:clang:write": "clang-format -i --glob='{ios,android,common}/**/*.{h,hpp,cpp,m,mm}'",
+    "format:spotless:check": "cd android && ./gradlew spotlessCheck",
+    "format:spotless:write": "cd android && ./gradlew spotlessApply",
+    "format:check": "yarn format:prettier:check && yarn format:clang:check && yarn format:spotless:check",
+    "format:write": "yarn format:prettier:write && yarn format:clang:write && yarn format:spotless:write",
     "release": "release-it",
-    "prepublish": "yarn test",
     "prepare": "bob build"
@@ -58,29 +64,29 @@ },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.0.3",
-    "@react-native-community/eslint-config": "^3.0.2",
-    "@react-native/eslint-plugin-specs": "^0.0.3",
-    "@release-it/conventional-changelog": "^5.1.0",
-    "@types/jest": "^28.1.1",
-    "@types/react": "^18.0.11",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-native": "^0.67.8",
+    "@commitlint/config-conventional": "^17.6.1",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/eslint-plugin-specs": "^0.73.0",
+    "@release-it/conventional-changelog": "^5.1.1",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "commitlint": "^17.0.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^8.0.1",
-    "jest": "^28.1.0",
-    "metro-react-native-babel-preset": "^0.71.0",
-    "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-native": "0.69.0-rc.6",
-    "react-native-builder-bob": "^0.18.2",
-    "react-test-renderer": "^18.1.0",
-    "release-it": "^15.3.0",
-    "typescript": "^4.7.3"
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "clang-format": "^1.8.0",
+    "commitlint": "^17.6.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "metro-react-native-babel-preset": "0.76.5",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.72.1",
+    "react-native-builder-bob": "^0.20.4",
+    "react-test-renderer": "^18.2.0",
+    "release-it": "^15.10.1",
+    "typescript": "^5.0.4"
   },
@@ -131,15 +137,9 @@ "repository": {
   "codegenConfig": {
-    "libraries": [
-      {
-        "name": "SafeAreaContextSpec",
-        "type": "modules",
-        "jsSrcsDir": "./src"
-      },
-      {
-        "name": "safeareacontext",
-        "type": "components",
-        "jsSrcsDir": "./src"
-      }
-    ]
+    "android": {
+      "javaPackageName": "com.th3rdwave.safeareacontext"
+    },
+    "name": "safeareacontext",
+    "type": "all",
+    "jsSrcsDir": "./src/specs"
   }
 }

react-native.config.js

@@ -0,4 +1,25 @@
+let supportsCodegenConfig = false;
+try {
+  const rnCliAndroidVersion = require.main.require(
+    '@react-native-community/cli-platform-android/package.json',
+  ).version;
+  const [major] = rnCliAndroidVersion.split('.');
+  supportsCodegenConfig = major >= 9;
+} catch (e) {
+  // ignore
+}
+
 module.exports = {
   dependency: {
     platforms: {
+      android: supportsCodegenConfig
+        ? {
+            libraryName: 'safeareacontext',
+            componentDescriptors: [
+              'RNCSafeAreaProviderComponentDescriptor',
+              'RNCSafeAreaViewComponentDescriptor',
+            ],
+            cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+          }
+        : {},
       macos: null,
@@ -5,0 +26,0 @@ windows: null,

README.md

@@ -11,5 +11,8 @@ # react-native-safe-area-context
 
-```
+```bash
 npm install react-native-safe-area-context
 ```
+```bash
+yarn add react-native-safe-area-context
+```
 
@@ -32,2 +35,4 @@ You then need to link the native parts of the library for the platforms you are using.
 
+You will need to be on 4.4.0 and react-native 0.70+.
+
 ## Usage
@@ -113,2 +118,8 @@
 
+Optionally it can be set to an object `{ top?: EdgeMode, right?: EdgeMode, bottom?: EdgeMode, left?: EdgeMode }` where `EdgeMode = 'off' | 'additive' | 'maximum'`. Additive is a default mode and is the same as passing and edge in the array: `finalPadding = safeArea + padding`. Maximum mode will use safe area inset or padding/margin (depends on `mode`) if safe area is less: `finalPadding = max(safeArea, padding)`. For example if you want a floating UI element that should be at the bottom safe area edge on devices with safe area or 24px from the bottom of the screen on devices without safe area or if safe area is less than 24px:
+
+```js
+<SafeAreaView style={{paddingBottom: 24}} edges={{bottom: 'maximum'}} />
+```
+
 ##### `mode`
@@ -115,0 +126,0 @@

src/InitialWindow.native.ts

 import type { Metrics } from './SafeArea.types';
 import NativeSafeAreaContext from './specs/NativeSafeAreaContext';
 
-export const initialWindowMetrics = (NativeSafeAreaContext?.getConstants()
+export const initialWindowMetrics = (NativeSafeAreaContext?.getConstants?.()
   ?.initialWindowMetrics ?? null) as Metrics | null;
@@ -6,0 +6,0 @@

src/SafeArea.types.ts

 import type * as React from 'react';
 import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import NativeSafeAreaView from './specs/NativeSafeAreaView';
 
 export type Edge = 'top' | 'right' | 'bottom' | 'left';
+export type EdgeMode = 'off' | 'additive' | 'maximum';
 
+export type EdgeRecord = Partial<Record<Edge, EdgeMode>>;
+export type Edges = readonly Edge[] | Readonly<EdgeRecord>;
+
 export interface EdgeInsets {
@@ -37,3 +42,7 @@ top: number;
   mode?: 'padding' | 'margin';
-  edges?: ReadonlyArray<Edge>;
+  edges?: Edges;
 }
+
+export type NativeSafeAreaViewInstance = InstanceType<
+  typeof NativeSafeAreaView
+>;

src/specs/NativeSafeAreaContext.ts

@@ -1,7 +0,3 @@
-// @ts-expect-error: missing type definition for module
+import { TurboModule, TurboModuleRegistry } from 'react-native';
 import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
-// @ts-expect-error: missing type definition for module
-import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
-// @ts-expect-error: missing type definition for module
-import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
 
@@ -8,0 +4,0 @@ export interface Spec extends TurboModule {

src/specs/NativeSafeAreaProvider.ts

 import type {
   DirectEventHandler,
   Double,
-  // @ts-expect-error: missing type definition for module
 } from 'react-native/Libraries/Types/CodegenTypes';
-// @ts-expect-error: missing type definition for module
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,0 +6,0 @@ import type { ViewProps, HostComponent } from 'react-native';

src/specs/NativeSafeAreaView.ts

@@ -1,4 +0,2 @@
-// @ts-expect-error: missing type definition for module
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-// @ts-expect-error: missing type definition for module
 import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
@@ -9,4 +7,8 @@ import type { ViewProps, HostComponent } from 'react-native';
   mode?: WithDefault<'padding' | 'margin', 'padding'>;
-  // Should be `'top' | 'right' | 'bottom' | 'left'` but that generates invalid code.
-  edges?: readonly string[];
+  edges?: Readonly<{
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+  }>;
 }
@@ -13,0 +15,0 @@

No alert changes

Improved metrics

Number of package files

192

increased by10.34%

Lines of code

1809

increased by8.19%

Number of lines in readme file

308

increased by3.7%

Worsened metrics

Total package byte prevSize

238398

decreased by-4.06%

No dependency changes