react-native-ui-lib 8.2.2 → 8.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.2.2",
+  "version": "8.2.4",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -96,6 +96,7 @@
     "react-native-mmkv": "3.2.0",
     "react-native-navigation": "8.1.2",
     "react-native-reanimated": "3.18.0",
+    "react-native-safe-area-context": "5.6.2",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "15.11.2",
     "react-native-svg-transformer": "1.5.0",
@@ -111,6 +112,7 @@
     "react-native": ">=0.77.3",
     "react-native-gesture-handler": ">=2.24.0",
     "react-native-reanimated": ">=3.17.5",
+    "react-native-safe-area-context": ">=5.6.2",
     "uilib-native": "^5.0.1"
   },
   "jest": {

package/src/components/modal/index.js

@@ -2,7 +2,7 @@ import _isFunction from "lodash/isFunction";
 import React, { Component } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StyleSheet, Modal as RNModal, TouchableWithoutFeedback, KeyboardAvoidingView } from 'react-native';
-import { BlurViewPackage } from "../../optionalDependencies";
+import { BlurViewPackage, SafeAreaContextPackage } from "../../optionalDependencies";
 import { Constants, asBaseComponent } from "../../commons/new";
 import TopBar, { ModalTopBarProps } from "./TopBar";
 import View from "../../components/view";
@@ -65,6 +65,7 @@ class Modal extends Component {
       ...others
     } = this.props;
     const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
+    const SafeAreaContainer = SafeAreaContextPackage?.SafeAreaProvider ?? React.Fragment;
     const GestureContainer = useGestureHandlerRootView ? GestureHandlerRootView : React.Fragment;
     const gestureContainerProps = useGestureHandlerRootView ? {
       style: styles.fill
@@ -80,14 +81,16 @@ class Modal extends Component {
     const HackContainer = fixReanimatedInteraction && Constants.isAndroid ? View : React.Fragment;
     return <HackContainer>
         <RNModal visible={Boolean(visible)} {...others}>
-          <GestureContainer {...gestureContainerProps}>
-            <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
-              <Container style={styles.fill} blurType="light">
-                {this.renderTouchableOverlay()}
-                {this.props.children}
-              </Container>
-            </KeyboardAvoidingContainer>
-          </GestureContainer>
+          <SafeAreaContainer>
+            <GestureContainer {...gestureContainerProps}>
+              <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
+                <Container style={styles.fill} blurType="light">
+                  {this.renderTouchableOverlay()}
+                  {this.props.children}
+                </Container>
+              </KeyboardAvoidingContainer>
+            </GestureContainer>
+          </SafeAreaContainer>
         </RNModal>
       </HackContainer>;
   }

package/src/optionalDependencies/SafeAreaContextPackage.d.ts

@@ -0,0 +1,2 @@
+declare let SafeAreaContextPackage: any;
+export default SafeAreaContextPackage;

package/src/optionalDependencies/SafeAreaContextPackage.js

@@ -0,0 +1,5 @@
+let SafeAreaContextPackage;
+try {
+  SafeAreaContextPackage = require('react-native-safe-area-context');
+} catch (error) {}
+export default SafeAreaContextPackage;

package/src/optionalDependencies/index.d.ts

@@ -7,3 +7,4 @@ export { default as HapticFeedbackPackage } from './HapticFeedbackPackage';
 export { default as SvgPackage, SvgCssUri } from './SvgPackage';
 export { createShimmerPlaceholder } from './ShimmerPackage';
 export { default as LinearGradientPackage } from './LinearGradientPackage';
+export { default as SafeAreaContextPackage } from './SafeAreaContextPackage';

package/src/optionalDependencies/index.js

@@ -6,4 +6,5 @@ export { default as NetInfoPackage } from "./NetInfoPackage";
 export { default as HapticFeedbackPackage } from "./HapticFeedbackPackage";
 export { default as SvgPackage, SvgCssUri } from "./SvgPackage";
 export { createShimmerPlaceholder } from "./ShimmerPackage";
-export { default as LinearGradientPackage } from "./LinearGradientPackage";
+export { default as LinearGradientPackage } from "./LinearGradientPackage";
+export { default as SafeAreaContextPackage } from "./SafeAreaContextPackage";