@zhenryx/react-native-components 0.0.2 → 0.0.3

package/dist/Dialog/Dialog.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { TextStyle } from 'react-native';
 export interface DialogProps {
-    useModal?: boolean;
     visible: boolean;
     type?: 'alert' | 'confirm';
     title?: string;

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoDxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkDxC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -9,7 +9,7 @@ const react_native_1 = require("react-native");
 const Text_1 = require("../Text/Text");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const Popup_1 = require("../Popup/Popup");
-const Dialog = ({ useModal = true, visible = false, type = "alert", title = "提示", content, titleStyle, contentStyle, closeOnOverlayPress = false, round = false, confirmText = "确认", cancelText = '取消', onConfirm = () => null, onCancel = () => null, children }) => {
+const Dialog = ({ visible = false, type = "alert", title = "提示", content, titleStyle, contentStyle, closeOnOverlayPress = false, round = false, confirmText = "确认", cancelText = '取消', onConfirm = () => null, onCancel = () => null, children }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
     const confirmTextColor = theme['$primary-color'] || '#e25829ff';
     const paddingHorizontal = theme['$dialog-padding-horizontal'] || 20;
@@ -32,7 +32,7 @@ const Dialog = ({ useModal = true, visible = false, type = "alert", title = "提
         <react_native_1.Pressable style={styles.dialog_footer_button_confirm} onPress={handleConfirm}><Text_1.Text style={[styles.dialog_footer_button_confirm_text, { color: confirmTextColor }]}>{confirmText}</Text_1.Text></react_native_1.Pressable>
       </react_native_1.View>
     </react_native_1.View>);
-    return (<Popup_1.Popup useModal={useModal} visible={visible} closeable={false} closeOnOverlayPress={closeOnOverlayPress} onClose={handleClose} round={round}>
+    return (<Popup_1.Popup visible={visible} closeable={false} closeOnOverlayPress={closeOnOverlayPress} onClose={handleClose} round={round}>
       {renderDialog()}
     </Popup_1.Popup>);
 };

package/dist/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAA;AAIlG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAA;AAKlG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}

package/dist/Header/Header.js

@@ -26,18 +26,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const Text_1 = require("../Text/Text");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const Header = ({ title = '自定义头部导航', backGroundColor, leftComponent, centerComponent, rightComponent, containerStyle, titleStyle: customTitleStyle, showBack = true, onBack }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     const headerStyle = (0, react_1.useMemo)(() => ({
-        height: theme['$header-height'] || 44,
+        height: (theme['$header-height'] || 44) + insets.top,
+        paddingTop: insets.top,
         backgroundColor: backGroundColor || theme['$header-background'] || 'transparent',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: theme['$header-spacing'] || 15,
-    }), [theme, backGroundColor]);
+    }), [theme, backGroundColor, insets.top]);
     const defaultTitleStyle = (0, react_1.useMemo)(() => ({
         fontSize: theme['$header-title-fontsize'] || 18,
         fontWeight: theme['$header-title-fontweight'] || '500'

package/dist/Overlay/Overlay.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 export interface OverLayProps {
-    useModal?: boolean;
     children?: React.ReactNode;
     visible: boolean;
     overlayStyle?: StyleProp<ViewStyle>;
-    onOverlayPress?(): void;
+    onOverlayPress?: () => void;
 }
 export declare const OverLay: React.FC<OverLayProps>;
 //# sourceMappingURL=Overlay.d.ts.map

package/dist/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAGL,SAAS,EACT,SAAS,EAIV,MAAM,cAAc,CAAC;AACtB,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,cAAc,CAAC,IAAI,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgF1C,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8C1C,CAAC"}

package/dist/Overlay/Overlay.js

@@ -25,68 +25,47 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverLay = void 0;
 const react_1 = __importStar(require("react"));
-const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const react_native_1 = require("react-native");
-const OverLay = ({ useModal = true, children, visible = false, overlayStyle, onOverlayPress, }) => {
+const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
+const OverLay = ({ children, visible, overlayStyle, onOverlayPress, }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
-    const [realVisible, setRealVisible] = (0, react_1.useState)(visible);
-    const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(visible ? 1 : 0)).current;
-    const fadeInstance = (0, react_1.useRef)(null);
+    const [mounted, setMounted] = (0, react_1.useState)(visible);
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(visible ? 1 : 0)).current;
     (0, react_1.useEffect)(() => {
         if (visible) {
-            setRealVisible(true);
-        }
-        if (fadeInstance.current) {
-            fadeInstance.current.stop();
+            setMounted(true);
         }
-        fadeInstance.current = react_native_1.Animated.timing(opacityAnim, {
+        react_native_1.Animated.timing(opacity, {
             toValue: visible ? 1 : 0,
             duration: 250,
+            easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
             useNativeDriver: true,
-        });
-        fadeInstance.current.start(({ finished }) => {
-            if (finished && fadeInstance.current) {
-                fadeInstance.current = null;
-                if (!visible) {
-                    setRealVisible(false);
-                }
+        }).start(({ finished }) => {
+            if (finished && !visible) {
+                setMounted(false);
             }
         });
-        return () => {
-            if (fadeInstance.current) {
-                fadeInstance.current.stop();
-                fadeInstance.current = null;
-            }
-        };
-    }, [visible]);
-    const dynamicBg = theme['$overlay-bg-color'] || 'rgba(0, 0, 0, 0.35)';
-    const containerStyle = (0, react_1.useMemo)(() => [
-        styles.container,
-        { backgroundColor: dynamicBg, opacity: opacityAnim },
-        overlayStyle,
-    ], [dynamicBg, opacityAnim, overlayStyle]);
-    const renderContent = () => (<react_native_1.Animated.View style={containerStyle}>
+    }, [visible, opacity]);
+    if (!mounted)
+        return null;
+    return (<react_native_1.Animated.View style={[
+            react_native_1.StyleSheet.absoluteFill,
+            { backgroundColor: theme['$overlay-bg-color'] ?? 'rgba(0,0,0,0.35)' },
+            { opacity },
+            overlayStyle,
+        ]}>
       {onOverlayPress && (<react_native_1.Pressable style={react_native_1.StyleSheet.absoluteFill} onPress={onOverlayPress}/>)}
       <react_native_1.View style={styles.content} pointerEvents="box-none">
         {children}
       </react_native_1.View>
     </react_native_1.Animated.View>);
-    if (useModal) {
-        return (<react_native_1.Modal visible={realVisible} transparent animationType='none' statusBarTranslucent onRequestClose={onOverlayPress}>
-        {renderContent()}
-      </react_native_1.Modal>);
-    }
-    return realVisible ? renderContent() : null;
 };
 exports.OverLay = OverLay;
+exports.OverLay.displayName = 'OverLay';
 const styles = react_native_1.StyleSheet.create({
-    container: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-    },
     content: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
-    }
+    },
 });
-exports.OverLay.displayName = 'OverLay';

package/dist/Popup/Popup.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 export interface PopupProps {
-    useModal?: boolean;
     visible?: boolean;
     position?: 'bottom' | 'center' | 'top';
     height?: number;

package/dist/Popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2JtC,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuHtC,CAAC"}

package/dist/Popup/Popup.js

@@ -25,117 +25,95 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = void 0;
 const react_1 = __importStar(require("react"));
-const Overlay_1 = require("../Overlay/Overlay");
 const react_native_1 = require("react-native");
+const Overlay_1 = require("../Overlay/Overlay");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
-const ANIMATION_DURATION = 250;
-const Popup = (props) => {
-    const { useModal = true, visible = false, position = 'center', height, width, round = false, closeable = false, closeOnOverlayPress = false, overlayStyle, style, children, onClose, } = props;
+const DURATION = 250;
+const Popup = ({ visible = false, position = 'center', height, width, round = false, closeable = false, closeOnOverlayPress = false, overlayStyle, style, children, onClose, }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
     const radius = theme['$popup-border-radius'] ?? 10;
     const minHeight = theme['$popup-height'] ?? 100;
-    const closeIconWidth = theme['$popup-closeicon-width'] ?? 12;
-    const closeIconHeight = theme['$popup-closeicon-height'] ?? 12;
-    const centerPopRadius = theme['$popup-center-border-radius'] || 10;
-    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const fadeInstance = (0, react_1.useRef)(null);
-    const [realVisible, setRealVisible] = (0, react_1.useState)(visible);
+    const centerRadius = theme['$popup-center-border-radius'] ?? 10;
+    const closeIconSize = {
+        width: theme['$popup-closeicon-width'] ?? 12,
+        height: theme['$popup-closeicon-height'] ?? 12,
+    };
+    const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(visible ? 1 : 0)).current;
+    const [mounted, setMounted] = (0, react_1.useState)(visible);
     (0, react_1.useEffect)(() => {
-        if (visible) {
-            setRealVisible(true);
-        }
-        if (fadeInstance.current) {
-            fadeInstance.current.stop();
-        }
-        fadeInstance.current = react_native_1.Animated.timing(animatedValue, {
+        if (visible)
+            setMounted(true);
+        react_native_1.Animated.timing(progress, {
             toValue: visible ? 1 : 0,
-            duration: ANIMATION_DURATION,
-            easing: visible ? react_native_1.Easing.out(react_native_1.Easing.cubic) : react_native_1.Easing.in(react_native_1.Easing.cubic),
+            duration: DURATION,
+            easing: visible
+                ? react_native_1.Easing.out(react_native_1.Easing.cubic)
+                : react_native_1.Easing.in(react_native_1.Easing.cubic),
             useNativeDriver: true,
-        });
-        fadeInstance.current.start(({ finished }) => {
-            if (finished && fadeInstance.current) {
-                fadeInstance.current = null;
-                if (!visible) {
-                    setRealVisible(false);
-                }
+        }).start(({ finished }) => {
+            if (finished && !visible) {
+                setMounted(false);
             }
         });
-        return () => {
-            if (fadeInstance.current) {
-                fadeInstance.current.stop();
-                fadeInstance.current = null;
-            }
-        };
-    }, [visible]);
-    const baseStyle = (0, react_1.useMemo)(() => {
-        const base = {
-            backgroundColor: '#fff',
-            ...(height ? { height } : { minHeight }),
-            width: position === 'center' ? width ?? 300 : '100%',
-        };
-        if (position !== 'center') {
-            base.position = 'absolute';
-            base.left = 0;
-            base.right = 0;
-            if (position === 'bottom') {
-                base.bottom = 0;
-            }
-            else {
-                base.top = 0;
-            }
+    }, [visible, progress]);
+    if (!mounted)
+        return null;
+    const baseStyle = {
+        backgroundColor: '#fff',
+        ...(height ? { height } : { minHeight }),
+        width: position === 'center'
+            ? (width ?? 300)
+            : '100%',
+    };
+    if (position !== 'center') {
+        //上弹出层or下弹出层
+        Object.assign(baseStyle, {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            ...(position === 'bottom' ? { bottom: 0 } : { top: 0 }),
+        });
+    }
+    if (round) {
+        if (position === 'center') {
+            baseStyle.borderRadius = centerRadius;
         }
-        if (round) {
-            if (position === 'center') {
-                base.borderRadius = centerPopRadius;
-            }
-            else if (position === 'bottom') {
-                base.borderTopLeftRadius = radius;
-                base.borderTopRightRadius = radius;
-            }
-            else {
-                base.borderBottomLeftRadius = radius;
-                base.borderBottomRightRadius = radius;
-            }
+        else if (position === 'bottom') {
+            baseStyle.borderTopLeftRadius = radius;
+            baseStyle.borderTopRightRadius = radius;
         }
-        return base;
-    }, [position, width, height, minHeight, round, radius, centerPopRadius]);
-    const animatedStyle = (0, react_1.useMemo)(() => {
-        if (position === 'center') {
-            return {
-                opacity: animatedValue
-            };
+        else {
+            baseStyle.borderBottomLeftRadius = radius;
+            baseStyle.borderBottomRightRadius = radius;
         }
-        const distance = height || minHeight;
-        return {
+    }
+    const animatedStyle = position === 'center'
+        ? { opacity: progress }
+        : {
             transform: [
                 {
-                    translateY: animatedValue.interpolate({
+                    translateY: progress.interpolate({
                         inputRange: [0, 1],
-                        outputRange: position === 'bottom' ? [distance, 0] : [-distance, 0],
+                        outputRange: [
+                            position === 'bottom'
+                                ? height ?? minHeight
+                                : -(height ?? minHeight),
+                            0,
+                        ],
                     }),
                 },
             ],
         };
-    }, [position, animatedValue, height, minHeight]);
-    const closeIconStyle = (0, react_1.useMemo)(() => ({
-        width: closeIconWidth,
-        height: closeIconHeight,
-    }), [closeIconWidth, closeIconHeight]);
-    const closeButtonPressableStyle = (0, react_1.useMemo)(() => ({
-        position: 'absolute',
-        right: 10,
-        [position === 'top' ? 'bottom' : 'top']: 10,
-        zIndex: 999,
-    }), [position]);
-    if (!realVisible) {
-        return null;
-    }
-    return (<Overlay_1.OverLay useModal={useModal} visible={realVisible} overlayStyle={overlayStyle} onOverlayPress={closeOnOverlayPress ? onClose : undefined}>
+    return (<Overlay_1.OverLay visible={mounted} overlayStyle={overlayStyle} onOverlayPress={closeOnOverlayPress ? onClose : undefined}>
       <react_native_1.Animated.View style={[baseStyle, animatedStyle, style]}>
         {children}
-        {closeable && (<react_native_1.Pressable hitSlop={15} onPress={onClose} style={closeButtonPressableStyle}>
-            <react_native_1.Image source={require('./assets/icon-close.png')} style={closeIconStyle}/>
+
+        {closeable && (<react_native_1.Pressable hitSlop={15} onPress={onClose} style={{
+                position: 'absolute',
+                right: 10,
+                [position === 'top' ? 'bottom' : 'top']: 10,
+            }}>
+            <react_native_1.Image source={require('./assets/icon-close.png')} style={closeIconSize}/>
           </react_native_1.Pressable>)}
       </react_native_1.Animated.View>
     </Overlay_1.OverLay>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenryx/react-native-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -27,10 +27,12 @@
   "devDependencies": {
     "@types/react": "18.2.0",
     "@types/react-native": "0.70.0",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "react-native-safe-area-context": "^4.8.0"
   },
   "peerDependencies": {
     "react": ">=18.1.0",
-    "react-native": ">=0.70.0"
+    "react-native": ">=0.70.0",
+    "react-native-safe-area-context": ">=4.0.0"
   }
 }