feat: implement notification screen with swipe-to-delete functionality and add payment mode screen.

src/screens/notification/Notification.tsx

@@ -17,7 +17,7 @@ import Header from '../../components/common/Header';
 import { useNotificationHandler } from '../hook/useNotificationHandler';
 import { useTheme } from '../../theme/ThemeProvider';
 
-import { Swipeable } from 'react-native-gesture-handler';
+import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import Animated, {
     useSharedValue,
     useAnimatedStyle,
@@ -111,37 +111,51 @@ const Notification = () => {
     const unreadCount = notifications.filter((i: any) => !i.read).length;
 
     // 🔥 Swipe Delete UI
-    const renderRightActions = (dragX: any, messageId: string) => {
+    const renderRightActions = (
-        const scale = dragX.interpolate({
+        messageId: string,
-            inputRange: [-100, 0],
+        onDeleteAction: (id: string) => void,
-            outputRange: [1, 0],
+        swipeableMethods?: { close?: () => void }
-            extrapolate: 'clamp',
+    ) => {
-        });
-
         return (
             <TouchableOpacity
-                onPress={() => handleDelete(messageId)}
+                onPress={() => {
+                    onDeleteAction(messageId);
+                    swipeableMethods?.close?.();
+                }}
                 style={styles(theme).deleteSwipe}
             >
-                <Animated.View style={{ transform: [{ scale }] }}>
                 <LucideIcon name="trash-outline" size={22} color="#fff" />
                 <Text style={styles(theme).deleteText}>Delete</Text>
-                </Animated.View>
             </TouchableOpacity>
         );
     };
 
-    const renderItem = ({ item }: any) => {
+const NotificationItem = ({
+    item,
+    onDelete,
+    onPressNotification,
+    theme,
+}: {
+    item: any;
+    onDelete: (id: string) => void;
+    onPressNotification: (
+        messageId: string,
+        screen: string,
+        groupId: string,
+        cycleNumber: string,
+        contributionId: string
+    ) => void;
+    theme: any;
+}) => {
     const scale = useSharedValue(1);
-
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
     }));
 
     return (
         <Swipeable
-                renderRightActions={(_, dragX) =>
+            renderRightActions={(_, __, swipeableMethods) =>
-                    renderRightActions(dragX, item.messageId)
+                renderRightActions(item.messageId, onDelete, swipeableMethods)
             }
         >
             <Animated.View style={animatedStyle}>
@@ -150,7 +164,7 @@ const Notification = () => {
                     onPressIn={() => (scale.value = withSpring(0.96))}
                     onPressOut={() => (scale.value = withSpring(1))}
                     onPress={() =>
-                            handleMarkAsRead(
+                        onPressNotification(
                             item.messageId,
                             item?.data?.msgType,
                             item?.data?.groupId,
@@ -176,27 +190,20 @@ const Notification = () => {
                         ]}
                     >
                         <View style={styles(theme).row}>
-                                {/* ICON */}
                             <View style={styles(theme).iconBox}>
                                 <LucideIcon
-                                        name={getNotificationIcon(
+                                    name={getNotificationIcon(item.data.msgType)}
-                                            item.data.msgType
-                                        )}
                                     size={22}
-                                        color={getNotificationColor(
+                                    color={getNotificationColor(item.data.msgType)}
-                                            item.data.msgType
-                                        )}
                                 />
                             </View>
 
-                                {/* TEXT */}
                             <View style={styles(theme).content}>
                                 <View style={styles(theme).topRow}>
                                     <Text
                                         style={[
                                             styles(theme).title,
-                                                !item.read &&
+                                            !item.read && styles(theme).unreadTitle,
-                                                    styles(theme).unreadTitle,
                                         ]}
                                     >
                                         {item.data.title}
@@ -206,40 +213,41 @@ const Notification = () => {
                                     </Text>
                                 </View>
 
-                                    <Text style={styles(theme).message}>
+                                <Text style={styles(theme).message}>{item.data.body}</Text>
-                                        {item.data.body}
-                                    </Text>
 
                                 <View style={styles(theme).tagWrap}>
                                     <Text
                                         style={[
                                             styles(theme).tag,
                                             {
-                                                    backgroundColor:
+                                                backgroundColor: getNotificationColor(
-                                                        getNotificationColor(
                                                     item.data.msgType
                                                 ),
                                             },
                                         ]}
                                     >
-                                            {getFilterDisplayName(
+                                        {getFilterDisplayName(item.data.msgType)}
-                                                item.data.msgType
-                                            )}
                                     </Text>
                                 </View>
                             </View>
 
-                                {/* DOT */}
+                            {!item.read && <View style={styles(theme).dot} />}
-                                {!item.read && (
-                                    <View style={styles(theme).dot} />
-                                )}
                         </View>
                     </LinearGradient>
                 </TouchableOpacity>
             </Animated.View>
         </Swipeable>
     );
-    };
+};
+
+    const renderItem = ({ item }: any) => (
+        <NotificationItem
+            item={item}
+            onDelete={handleDelete}
+            onPressNotification={handleMarkAsRead}
+            theme={theme}
+        />
+    );
 
     return (
         <AppView>

src/screens/payment/PaymentModeScreen.tsx

@@ -313,7 +313,7 @@ const PaymentModeScreen: React.FC = () => {
                 paymentId: selectedMode || 0,
                 mobileNumber: '',
             };
-            console.log('payload', JSON.stringify(payload));
+            console.log('payyyyyyload', JSON.stringify(payload));
 
             const res = await apiCall(
                 `${BASE_URL}payments/pg/entry-fee/${groupId}?groupId=${groupId}&paymentId=${selectedMode}&mobileNumber=`,
@@ -360,7 +360,9 @@ const PaymentModeScreen: React.FC = () => {
             ) as any;
             
              console.log("payment payload ",payload)
+                console.log("payment res ",res)
             if (res?.status === 'success' || res?.statusCode === 200) {
+                          
                 const pgOrderNo = res?.data?.pgOrderNo;
                 if (pgOrderNo) {
                     // Start polling for transaction status