npm - related-ui-components - Versions diffs - 1.7.5 → 1.7.7 - Mend

related-ui-components 1.7.5 → 1.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/lib/typescript/commonjs/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import React from "react";
+import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import { BottomSheetProps } from "@gorhom/bottom-sheet";
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    code: string;
+    amount?: number;
+    expiry?: string;
+    image?: ImageSourcePropType;
+    title?: string;
+    currency?: string;
+    codeReadyText?: string;
+    qrCodeLabel?: string;
+    barCodeLabel?: string;
+    myVouchersButtonText?: string;
+    onMyVouchersButtonPress?: () => void;
+    onCopyCode?: (copiedCode: string) => void;
+    showAppleWalletButton?: boolean;
+    appleWalletButtonText?: string;
+    onAppleWalletButtonPress?: () => void;
+    appleWalletIconSource?: ImageSourcePropType;
+    qrCodeSize?: number;
+    activeTabColors?: string[];
+    inactiveTabBackgroundColor?: string;
+    inactiveTabBorderColor?: string;
+    inactiveTabTextColor?: string;
+    primaryButtonColors?: string[];
+    allowBarcodeSwitch?: boolean;
+    renderBarcodeComponent?: (code: string) => React.ReactNode;
+    renderCopyIcon?: () => React.ReactNode;
+    amountIconComponent?: React.ReactNode;
+    expiryIconComponent?: React.ReactNode;
+    snapPoints?: string[];
+    sheetBackgroundStyle?: StyleProp<ViewStyle>;
+    sheetHandleStyle?: StyleProp<ViewStyle>;
+    backdropPressBehavior?: "close" | "none" | number;
+    bottomSheetOverrideProps?: Partial<Omit<BottomSheetProps, "children" | "snapPoints" | "index" | "onClose" | "enablePanDownToClose" | "backgroundStyle" | "handleIndicatorStyle" | "backdropComponent">>;
+    tabGradientStart?: {
+        x: number;
+        y: number;
+    };
+    tabGradientEnd?: {
+        x: number;
+        y: number;
+    };
+    primaryButtonGradientStart?: {
+        x: number;
+        y: number;
+    };
+    primaryButtonGradientEnd?: {
+        x: number;
+        y: number;
+    };
+};
+declare const RedeemedVoucherSheet: React.FC<Props>;
+export default RedeemedVoucherSheet;
+//# sourceMappingURL=RedeemedVoucherSheet.d.ts.map

package/lib/typescript/commonjs/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RedeemedVoucherSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/RedeemedVoucher/RedeemedVoucherSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAOL,mBAAmB,EACnB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAElB,gBAAgB,EAGjB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,qBAAqB,CAAC,EAAE,mBAAmB,CAAC;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACvC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClD,wBAAwB,CAAC,EAAE,OAAO,CAChC,IAAI,CACF,gBAAgB,EACd,UAAU,GACV,YAAY,GACZ,OAAO,GACP,SAAS,GACT,sBAAsB,GACtB,iBAAiB,GACjB,sBAAsB,GACtB,mBAAmB,CACtB,CACF,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,cAAc,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,0BAA0B,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,wBAAwB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrD,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8RzC,CAAC;AAsLF,eAAe,oBAAoB,CAAC"}

package/lib/typescript/module/app.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;~~AAOxC~~,QAAA,MAAM,QAAQ,~~yBAmGb~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,QAAA,MAAM,QAAQ,yBAiGb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/module/components/Popup/Popup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,SAAS,~~EAA+B~~,MAAM,OAAO,CAAC;~~AAC1E~~,OAAO,EAOL,mBAAmB,EAMnB,SAAS,EACT,SAAS,EACT,UAAU,EAGX,MAAM,cAAc,CAAC;AAGtB,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACzC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAGD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,~~CA0OzB~~,CAAC;AA2IF,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AACnF,OAAO,EAOL,mBAAmB,EAMnB,SAAS,EACT,SAAS,EACT,UAAU,EAGX,MAAM,cAAc,CAAC;AAGtB,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACzC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAGD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA6LzB,CAAC;AA2IF,eAAe,KAAK,CAAC"}

package/lib/typescript/module/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import React from "react";
+import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import { BottomSheetProps } from "@gorhom/bottom-sheet";
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    code: string;
+    amount?: number;
+    expiry?: string;
+    image?: ImageSourcePropType;
+    title?: string;
+    currency?: string;
+    codeReadyText?: string;
+    qrCodeLabel?: string;
+    barCodeLabel?: string;
+    myVouchersButtonText?: string;
+    onMyVouchersButtonPress?: () => void;
+    onCopyCode?: (copiedCode: string) => void;
+    showAppleWalletButton?: boolean;
+    appleWalletButtonText?: string;
+    onAppleWalletButtonPress?: () => void;
+    appleWalletIconSource?: ImageSourcePropType;
+    qrCodeSize?: number;
+    activeTabColors?: string[];
+    inactiveTabBackgroundColor?: string;
+    inactiveTabBorderColor?: string;
+    inactiveTabTextColor?: string;
+    primaryButtonColors?: string[];
+    allowBarcodeSwitch?: boolean;
+    renderBarcodeComponent?: (code: string) => React.ReactNode;
+    renderCopyIcon?: () => React.ReactNode;
+    amountIconComponent?: React.ReactNode;
+    expiryIconComponent?: React.ReactNode;
+    snapPoints?: string[];
+    sheetBackgroundStyle?: StyleProp<ViewStyle>;
+    sheetHandleStyle?: StyleProp<ViewStyle>;
+    backdropPressBehavior?: "close" | "none" | number;
+    bottomSheetOverrideProps?: Partial<Omit<BottomSheetProps, "children" | "snapPoints" | "index" | "onClose" | "enablePanDownToClose" | "backgroundStyle" | "handleIndicatorStyle" | "backdropComponent">>;
+    tabGradientStart?: {
+        x: number;
+        y: number;
+    };
+    tabGradientEnd?: {
+        x: number;
+        y: number;
+    };
+    primaryButtonGradientStart?: {
+        x: number;
+        y: number;
+    };
+    primaryButtonGradientEnd?: {
+        x: number;
+        y: number;
+    };
+};
+declare const RedeemedVoucherSheet: React.FC<Props>;
+export default RedeemedVoucherSheet;
+//# sourceMappingURL=RedeemedVoucherSheet.d.ts.map

package/lib/typescript/module/components/RedeemedVoucher/RedeemedVoucherSheet.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
@@ -42,12 +42,14 @@
     "react-native-calendars": "^1.1310.0",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-modal": "^14.0.0-rc.1",
+    "react-native-qrcode-svg": "^6.3.15",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-clipboard": "~7.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/src/app.tsx CHANGED Viewed

@@ -4,6 +4,8 @@ import { FilterResult, Filters, Popup, UnlockRewards } from "./components";
 import BRANDS from "./constants/BRANDS";
 import { Ionicons } from "@expo/vector-icons";
 import { useTheme } from "./theme";
+import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 const MyScreen = () => {
   const [isFilterVisible, setIsFilterVisible] = useState(false);
@@ -83,25 +85,23 @@ const MyScreen = () => {
   return (
     <>
-      <Popup
-        visible={isFilterVisible}
-        onClose={() => setIsFilterVisible(false)}
-        showCloseIcon={true}
-        title="ترقية إلى النسخة المميزة"
-        subtitle="استمتع بمزايا حصرية"
-        content="احصل على جميع الميزات المتقدمة والمحتوى الحصري بدون إعلانات. اشترك الآن واستمتع بتجربة كاملة مع تحديثات مجانية لمدة عام كامل."
-        primaryButtonText="ترقية الآن"
-        secondaryButtonText="ليس الآن"
-        // onPrimaryButtonPress={handleUpgrade}
-        // onSecondaryButtonPress={handleDismiss}
-        isRTL={true}
-      >
-        <UnlockRewards rewards={rewardsData}></UnlockRewards>
-      </Popup>
-      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <Button title="Show Filters" onPress={() => setIsFilterVisible(true)} />
-      </View>
+    <GestureHandlerRootView>
+      <RedeemedVoucherSheet
+        visible={true}
+        onClose={() => {}}
+        code="0000P78SHV50KK"
+        // amount={100}
+        expiry="22/01/2025"
+        currency="USD"
+        title="Voucher Activated!"
+        // primaryButtonColors={["red", "blue"]}
+        onMyVouchersButtonPress={() => console.log("My Vouchers pressed")}
+        onCopyCode={(code) => console.log("Copied:", code)}
+        // To use custom icons:
+        // amountIconComponent={<Image source={YourCustomAmountIcon} style={{width: 20, height: 20, marginRight: 5}} />}
+        // renderCopyIcon={() => <Text style={{fontSize: 22, color: 'blue'}}>COPY</Text>}
+      />
+      </GestureHandlerRootView>
     </>
   );
 };

package/src/components/Card/Card.tsx CHANGED Viewed

@@ -105,7 +105,7 @@ const Card: React.FC<CardProps> = ({
         onPress={onPress}
         disabled={disabled}
         testID={testID}
-        activeOpacity={0.7}
+        activeOpacity={0.9}
         accessibilityRole="button"
         accessibilityLabel={"Card"}
       >

package/src/components/Popup/Popup.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useTheme, ThemeType } from "../../theme";
-import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
+import React, { FC, ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import {
   Modal,
   View,
@@ -66,6 +66,7 @@ const Popup: FC<PopupProps> = ({
   title,
   content,
   subtitle,
+  children,
   primaryButtonText,
   onPrimaryButtonPress,
   secondaryButtonText,
@@ -87,17 +88,16 @@ const Popup: FC<PopupProps> = ({
   closeIconStyle,
   closeIconVariant = "floating",
   subtitleStyle,
-  isRTL = false,
+  isRTL: propIsRTL,
   closeIconColor,
   closeIconSize = 28,
-  children,
   modalStyle,
   overlay,
   customContent,
 }) => {
-  const { theme, isRTL: rtl } = useTheme();
-  isRTL = rtl;
-  const styles = createStyles(theme); // Create styles using theme
+  const { theme, isRTL: themeIsRTL } = useTheme();
+  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
+  const styles = useMemo(() => createStyles(theme), [theme]);
   const [modalRendered, setModalRendered] = useState(visible);
   const slideAnim = useRef(new Animated.Value(screenHeight)).current;
@@ -121,42 +121,9 @@ const Popup: FC<PopupProps> = ({
         setModalRendered(false);
       });
     }
-  }, [visible, slideAnim, 300]);
+  }, [visible, slideAnim]);
-  const PopupContent = () => (
-    <View style={[children == null && styles.popupContainer, containerStyle]}>
-      <CloseIcon
-        show={showCloseIcon}
-        onPress={onClose}
-        customIcon={customCloseIcon}
-        variant={closeIconVariant}
-        containerStyle={closeIconContainerStyle}
-        iconStyle={closeIconStyle}
-        color={closeIconColor}
-        size={closeIconSize}
-        isRTL={isRTL}
-      />
-      {overlay && (
-        <View style={styles.overlayContainer} pointerEvents="none">
-          {overlay}
-        </View>
-      )}
-      {children ||
-        (backgroundImage ? (
-          <ImageBackground
-            source={backgroundImage}
-            style={styles.backgroundImage}
-            imageStyle={styles.backgroundImageStyle}
-          >
-            <PopupInnerContent />
-          </ImageBackground>
-        ) : (
-          <PopupInnerContent />
-        ))}
-    </View>
-  );
-  const PopupInnerContent = () => (
+  const renderDefaultContent = () => (
     <View style={[styles.contentContainer, contentContainerStyle]}>
       {illustrationImage && (
         <View style={styles.illustrationContainer}>
@@ -167,52 +134,24 @@ const Popup: FC<PopupProps> = ({
           />
         </View>
       )}
       {title && (
-        <Text
-          style={[
-            styles.title,
-            { color: theme.text, textAlign: "center" },
-            titleStyle,
-          ]}
-        >
+        <Text style={[styles.title, { color: theme.text, textAlign: "center" }, titleStyle]}>
           {title}
         </Text>
       )}
       {subtitle && (
-        <Text
-          style={[
-            styles.subtitle,
-            { color: theme.text, textAlign: "center" },
-            subtitleStyle,
-          ]}
-        >
+        <Text style={[styles.subtitle, { color: theme.text, textAlign: "center" }, subtitleStyle]}>
           {subtitle}
         </Text>
       )}
       {content && (
-        <Text
-          style={[
-            styles.content,
-            { color: theme.text, textAlign: "center" },
-            contentStyle,
-          ]}
-        >
+        <Text style={[styles.content, { color: theme.text, textAlign: "center" }, contentStyle]}>
           {content}
         </Text>
       )}
       {customContent && <View>{customContent}</View>}
       {(secondaryButtonText || primaryButtonText) && (
-        <View
-          style={[
-            styles.buttonContainer,
-            { flexDirection: isRTL ? "row-reverse" : "row" },
-          ]}
-        >
+        <View style={[styles.buttonContainer, { flexDirection: isRTL ? "row-reverse" : "row" }]}>
           {secondaryButtonText && (
             <TouchableOpacity
               style={[
@@ -225,34 +164,17 @@ const Popup: FC<PopupProps> = ({
               ]}
               onPress={onSecondaryButtonPress}
             >
-              <Text
-                style={[
-                  styles.secondaryButtonText,
-                  { color: theme.primary },
-                  secondaryButtonTextStyle,
-                ]}
-              >
+              <Text style={[styles.secondaryButtonText, { color: theme.primary }, secondaryButtonTextStyle]}>
                 {secondaryButtonText}
               </Text>
             </TouchableOpacity>
           )}
           {primaryButtonText && (
             <TouchableOpacity
-              style={[
-                styles.primaryButton,
-                { backgroundColor: theme.primary },
-                primaryButtonStyle,
-              ]}
+              style={[styles.primaryButton, { backgroundColor: theme.primary }, primaryButtonStyle]}
               onPress={onPrimaryButtonPress}
             >
-              <Text
-                style={[
-                  styles.primaryButtonText,
-                  { color: theme.onPrimary },
-                  primaryButtonTextStyle,
-                ]}
-              >
+              <Text style={[styles.primaryButtonText, { color: theme.onPrimary }, primaryButtonTextStyle]}>
                 {primaryButtonText}
               </Text>
             </TouchableOpacity>
@@ -262,10 +184,14 @@ const Popup: FC<PopupProps> = ({
     </View>
   );
+  if (!modalRendered && !visible) {
+    return null;
+  }
   return (
     <Modal
       transparent
-      visible={modalRendered}
+      visible={modalRendered}
       animationType="none"
       onRequestClose={onClose}
       statusBarTranslucent
@@ -279,15 +205,44 @@ const Popup: FC<PopupProps> = ({
         )}
         <Animated.View
           style={[
-            {
-              transform: [{ translateY: slideAnim }],
-            },
+            { transform: [{ translateY: slideAnim }] },
             styles.animatedContainer,
           ]}
           pointerEvents="box-none"
         >
           <TouchableWithoutFeedback>
-            <PopupContent />
+            <View style={[!children && styles.popupContainer, containerStyle]}>
+              <CloseIcon
+                show={showCloseIcon}
+                onPress={onClose}
+                customIcon={customCloseIcon}
+                variant={closeIconVariant}
+                containerStyle={closeIconContainerStyle}
+                iconStyle={closeIconStyle}
+                color={closeIconColor}
+                size={closeIconSize}
+                isRTL={isRTL}
+              />
+              {overlay && (
+                <View style={styles.overlayContainer} pointerEvents="none">
+                  {overlay}
+                </View>
+              )}
+              {children ? (
+                children
+              ) : backgroundImage ? (
+                <ImageBackground
+                  source={backgroundImage}
+                  style={styles.backgroundImage}
+                  imageStyle={styles.backgroundImageStyle}
+                >
+                  {renderDefaultContent()}
+                </ImageBackground>
+              ) : (
+                renderDefaultContent()
+              )}
+            </View>
           </TouchableWithoutFeedback>
         </Animated.View>
       </View>