related-ui-components 1.7.1 → 1.7.3

package/src/components/Popup/Popup.tsx

@@ -1,6 +1,7 @@
 import { useTheme, ThemeType } from "../../theme";
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useEffect, useRef, useState } from "react";
 import {
+  Modal,
   View,
   Text,
   TouchableOpacity,
@@ -15,21 +16,12 @@ import {
   TextStyle,
   ViewStyle,
   ImageStyle,
+  Animated,
+  Easing,
 } from "react-native";
 import CloseIcon from "../CloseIcon/CloseIcon";
-import Modal, { ModalProps } from "react-native-modal";
 
-interface PopupProps
-  extends Partial<Pick<
-    ModalProps,
-    | "animationIn"
-    | "animationOut"
-    | "animationInTiming"
-    | "animationOutTiming"
-    | "backdropTransitionInTiming"
-    | "backdropTransitionOutTiming"
-    | "onBackdropPress"
-  >> {
+interface PopupProps {
   visible: boolean;
   onClose: () => void;
   backgroundImage?: ImageSourcePropType;
@@ -65,6 +57,7 @@ interface PopupProps
   overlay?: ReactNode;
   customContent?: ReactNode;
 }
+const { height: screenHeight } = Dimensions.get("window");
 
 const Popup: FC<PopupProps> = ({
   visible,
@@ -101,18 +94,35 @@ const Popup: FC<PopupProps> = ({
   modalStyle,
   overlay,
   customContent,
-  animationIn = "slideInUp",
-  animationInTiming,
-  animationOut = "slideOutDown",
-  animationOutTiming,
-  backdropTransitionInTiming,
-  backdropTransitionOutTiming,
-  onBackdropPress
 }) => {
   const { theme, isRTL: rtl } = useTheme();
   isRTL = rtl;
   const styles = createStyles(theme); // Create styles using theme
 
+  const [modalRendered, setModalRendered] = useState(visible);
+  const slideAnim = useRef(new Animated.Value(screenHeight)).current;
+
+  useEffect(() => {
+    if (visible) {
+      setModalRendered(true);
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: screenHeight,
+        duration: 300,
+        easing: Easing.in(Easing.ease),
+        useNativeDriver: true,
+      }).start(() => {
+        setModalRendered(false);
+      });
+    }
+  }, [visible, slideAnim, 300]);
+
   const PopupContent = () => (
     <View style={[children == null && styles.popupContainer, containerStyle]}>
       <CloseIcon
@@ -162,7 +172,7 @@ const Popup: FC<PopupProps> = ({
         <Text
           style={[
             styles.title,
-            { color: theme.text, textAlign: "center" }, // Keep text color
+            { color: theme.text, textAlign: "center" },
             titleStyle,
           ]}
         >
@@ -174,7 +184,7 @@ const Popup: FC<PopupProps> = ({
         <Text
           style={[
             styles.subtitle,
-            { color: theme.text, textAlign: "center" }, // Use helper for subtitle
+            { color: theme.text, textAlign: "center" },
             subtitleStyle,
           ]}
         >
@@ -186,7 +196,7 @@ const Popup: FC<PopupProps> = ({
         <Text
           style={[
             styles.content,
-            { color: theme.text, textAlign: "center" }, // Keep text color
+            { color: theme.text, textAlign: "center" },
             contentStyle,
           ]}
         >
@@ -207,7 +217,7 @@ const Popup: FC<PopupProps> = ({
             <TouchableOpacity
               style={[
                 styles.secondaryButton,
-                { borderColor: theme.primary }, // Keep primary border
+                { borderColor: theme.primary },
                 secondaryButtonStyle,
                 isRTL
                   ? { marginLeft: 12, marginRight: 0 }
@@ -218,7 +228,7 @@ const Popup: FC<PopupProps> = ({
               <Text
                 style={[
                   styles.secondaryButtonText,
-                  { color: theme.primary }, // Keep primary text color
+                  { color: theme.primary },
                   secondaryButtonTextStyle,
                 ]}
               >
@@ -231,7 +241,7 @@ const Popup: FC<PopupProps> = ({
             <TouchableOpacity
               style={[
                 styles.primaryButton,
-                { backgroundColor: theme.primary }, // Keep primary background
+                { backgroundColor: theme.primary },
                 primaryButtonStyle,
               ]}
               onPress={onPrimaryButtonPress}
@@ -239,7 +249,7 @@ const Popup: FC<PopupProps> = ({
               <Text
                 style={[
                   styles.primaryButtonText,
-                  { color: theme.onPrimary }, // Use onPrimary for text
+                  { color: theme.onPrimary },
                   primaryButtonTextStyle,
                 ]}
               >
@@ -254,21 +264,32 @@ const Popup: FC<PopupProps> = ({
 
   return (
     <Modal
-      isVisible={visible}
-      animationIn={animationIn}
-      animationOut={animationOut}
-      backdropTransitionInTiming={backdropTransitionInTiming}
-      backdropTransitionOutTiming={backdropTransitionOutTiming}
-      animationInTiming={animationInTiming}
-      animationOutTiming={animationOutTiming}
-      onBackdropPress={onBackdropPress}
+      transparent
+      visible={modalRendered}
+      animationType="none"
+      onRequestClose={onClose}
       statusBarTranslucent
       style={modalStyle}
     >
       <View style={styles.modalOverlay}>
-        <TouchableWithoutFeedback>
-          <PopupContent />
-        </TouchableWithoutFeedback>
+        {closeOnBackdropPress && (
+          <TouchableWithoutFeedback onPress={onClose}>
+            <View style={StyleSheet.absoluteFill} />
+          </TouchableWithoutFeedback>
+        )}
+        <Animated.View
+          style={[
+            {
+              transform: [{ translateY: slideAnim }],
+            },
+            styles.animatedContainer,
+          ]}
+          pointerEvents="box-none"
+        >
+          <TouchableWithoutFeedback>
+            <PopupContent />
+          </TouchableWithoutFeedback>
+        </Animated.View>
       </View>
     </Modal>
   );
@@ -282,11 +303,17 @@ const createStyles = (theme: ThemeType) =>
   StyleSheet.create({
     modalOverlay: {
       flex: 1,
-      // backgroundColor: "rgba(0, 0, 0, 0.5)", // Keep overlay color
+      backgroundColor: "rgba(0, 0, 0, 0.5)", // Keep overlay color
       justifyContent: "center",
       alignItems: "center",
       paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
     },
+    animatedContainer: {
+      alignItems: "center",
+      width: "100%",
+      justifyContent: "center",
+      flexGrow: 1,
+    },
     popupContainer: {
       width: popupWidth,
       maxHeight: "80%",
@@ -331,6 +358,8 @@ const createStyles = (theme: ThemeType) =>
       padding: 24,
       alignItems: "center",
       justifyContent: "center",
+      // flex: 1,
+      // alignSelf:"stretch",
       borderRadius: 16,
     },
     illustrationContainer: {

package/src/components/UnlockRewards/UnlockRewards.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import {
   View,
   Text,
@@ -107,7 +107,7 @@ const UnlockRewards: React.FC<UnlockRewardsProps> = ({
 }) => {
   const { theme, isRTL: rtl } = useTheme();
   isRTL = isRTL || rtl;
-  const styles = themedStyles(theme);
+  const styles = useMemo(()=> themedStyles(theme), [ theme]); 
 
   const topBackgroundColor = topBackgroundColorProp ?? theme.surface;
 

package/src/index.ts

@@ -1,10 +1,10 @@
-// import { registerRootComponent } from 'expo';
-// import "react-native-reanimated";
+import { registerRootComponent } from 'expo';
+import "react-native-reanimated";
 
 
-// import App from "./app";
+import App from "./app";
 
-// registerRootComponent(App);
+registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";