fix navigation issue (onlight mode)

android/app/src/main/AndroidManifest.xml

@@ -11,6 +11,7 @@
     android:roundIcon="@mipmap/ic_launcher_round"
     android:allowBackup="false"
     android:theme="@style/AppTheme"
+    android:usesCleartextTraffic="true"
     android:supportsRtl="true">
     <activity
       android:name=".MainActivity"

package-lock.json

@@ -12,6 +12,7 @@
         "@react-native-async-storage/async-storage": "^1.24.0",
         "@react-native-clipboard/clipboard": "^1.16.3",
         "@react-native-community/blur": "^4.4.1",
+        "@react-native-community/netinfo": "^11.4.1",
         "@react-native-community/slider": "^5.0.1",
         "@react-native-firebase/app": "^23.4.0",
         "@react-native-firebase/messaging": "^23.4.0",
@@ -32,6 +33,7 @@
         "react": "19.1.0",
         "react-native": "0.81.1",
         "react-native-calendars": "^1.1313.0",
+        "react-native-device-info": "^15.0.1",
         "react-native-dialog": "^9.3.0",
         "react-native-elements": "^3.4.3",
         "react-native-fast-confetti": "^1.1.1",
@@ -42,6 +44,7 @@
         "react-native-material-ripple": "^0.9.1",
         "react-native-paper": "^5.14.5",
         "react-native-reanimated": "^4.1.2",
+        "react-native-responsive-dimensions": "^3.1.1",
         "react-native-safe-area-context": "^5.6.1",
         "react-native-screens": "^4.16.0",
         "react-native-svg": "^15.13.0",
@@ -3538,6 +3541,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/@react-native-community/netinfo": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-11.4.1.tgz",
+      "integrity": "sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": ">=0.59"
+      }
+    },
     "node_modules/@react-native-community/slider": {
       "version": "5.0.1",
       "license": "MIT"
@@ -12822,6 +12834,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-device-info": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-15.0.1.tgz",
+      "integrity": "sha512-U5waZRXtT3l1SgZpZMlIvMKPTkFZPH8W7Ks6GrJhdH723aUIPxjVer7cRSij1mvQdOAAYFJV/9BDzlC8apG89A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-dialog": {
       "version": "9.3.0",
       "license": "MIT",
@@ -13029,6 +13050,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-responsive-dimensions": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-responsive-dimensions/-/react-native-responsive-dimensions-3.1.1.tgz",
+      "integrity": "sha512-Vo2OhWsphq0HgKsmeZOeyW+c+vsFn1ZaCFkGDgdeCEEiLriT76jGA1JlUjtrj27hvyo/xzeTlBZ+vBso1A84fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": ">=0.44.1"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "5.6.1",
       "license": "MIT",

package.json

@@ -14,6 +14,7 @@
     "@react-native-async-storage/async-storage": "^1.24.0",
     "@react-native-clipboard/clipboard": "^1.16.3",
     "@react-native-community/blur": "^4.4.1",
+    "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/slider": "^5.0.1",
     "@react-native-firebase/app": "^23.4.0",
     "@react-native-firebase/messaging": "^23.4.0",
@@ -34,6 +35,7 @@
     "react": "19.1.0",
     "react-native": "0.81.1",
     "react-native-calendars": "^1.1313.0",
+    "react-native-device-info": "^15.0.1",
     "react-native-dialog": "^9.3.0",
     "react-native-elements": "^3.4.3",
     "react-native-fast-confetti": "^1.1.1",
@@ -44,6 +46,7 @@
     "react-native-material-ripple": "^0.9.1",
     "react-native-paper": "^5.14.5",
     "react-native-reanimated": "^4.1.2",
+    "react-native-responsive-dimensions": "^3.1.1",
     "react-native-safe-area-context": "^5.6.1",
     "react-native-screens": "^4.16.0",
     "react-native-svg": "^15.13.0",

src/components/CostomAlart.tsx

@@ -10,6 +10,7 @@ import {
 import { BlurView } from "@react-native-community/blur";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "./colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 export interface AlertButton {
   text: string;
@@ -185,14 +186,14 @@ const styles = StyleSheet.create({
     marginBottom: 8,                     // reduce vertical space below icon
   },
   alertTitle: {
-    fontSize: 18,                        // smaller font size
+    fontSize: responsiveFontSize(1.8),                        // smaller font size
     fontWeight: "bold",
     color: colors.textDark,
     marginBottom: 4,                     // less space below title
     textAlign: "center",
   },
   alertMessage: {
-    fontSize: 14,                        // smaller font size
+    fontSize: responsiveFontSize(1.4),                        // smaller font size
     color: colors.textLight,
     textAlign: "center",
     marginBottom: 12,                    // tighter spacing
@@ -238,7 +239,7 @@ const styles = StyleSheet.create({
   },
   // === BUTTON TEXT COLOR VARIANTS ===
   buttonText: {
-    fontSize: 14,                        // smaller text
+    fontSize: responsiveFontSize(1.4),                        // smaller text
     fontWeight: "700",
   },
   defaultButtonText: {

src/components/CustomButton.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle } from "react-native";
 import colors from "./colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 type CustomButtonProps = {
   title: string;
@@ -46,7 +47,7 @@ const styles = StyleSheet.create({
     marginVertical: 5,
   },
   text: {
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     fontWeight: "bold",
   },
 });

src/components/JoinedGroupCard.tsx

@@ -4,6 +4,7 @@ import colors from './colors';
 import { useNavigation } from '@react-navigation/native';
 import { BASE_URL, CONTRIBUTE } from '../utils/ApiUrls';
 import { apiCall } from '../utils/ApiHelper';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 interface JoinedGroup {
   id: string;
@@ -180,13 +181,13 @@ const styles = StyleSheet.create({
     marginBottom: 4,
   },
   groupName: {
-    fontSize: 20,
+    fontSize: responsiveFontSize(2),
     fontWeight: 'bold',
     color: '#1F2937',
     flexShrink: 1,
   },
   createdBy: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#6B7280',
     marginBottom: 16,
   },
@@ -196,7 +197,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
   },
   statusText: {
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
     fontWeight: '600',
     textTransform: 'uppercase',
   },
@@ -218,12 +219,12 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
   },
   infoLabel: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#6B7280',
     marginBottom: 4,
   },
   infoValue: {
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     fontWeight: '600',
     color: '#111827',
     textTransform: 'capitalize',
@@ -237,11 +238,11 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   participantText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#6B7280',
   },
   participantCount: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
     color: '#111827',
   },
@@ -262,7 +263,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   dateText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: '#4B5563',
     fontWeight: '500',
   },
@@ -276,7 +277,7 @@ const styles = StyleSheet.create({
   },
   payButtonText: {
     color: colors.black,
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
   },
   // Paid button
@@ -288,7 +289,7 @@ const styles = StyleSheet.create({
   },
   paidButtonText: {
     color: '#065F46',
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
   },
   viewButton: {
@@ -299,7 +300,7 @@ const styles = StyleSheet.create({
   },
   viewButtonText: {
     color: '#000000ff',
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: '600',
   },
 });

src/components/MyGroupCard.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "./colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 interface MyGroup {
   id: string;
@@ -103,14 +104,14 @@ const styles = StyleSheet.create({
     marginBottom: 6,
   },
   cardTitle: {
-    fontSize: 17,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: "bold",
     color: "#343a40",
     flex: 1,
     marginRight: 10,
   },
   cardSubtitle: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: "#6c757d",
     marginBottom: 8,
   },
@@ -121,11 +122,11 @@ const styles = StyleSheet.create({
     marginBottom: 6,
   },
   manageButtonText: {
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
     color: colors.textDark,
   },
   cardMetaText: {
-    fontSize: 13,
+    fontSize: responsiveFontSize(1.3),
     color: "#495057",
     fontWeight: "500",
     marginRight: 16,
@@ -140,7 +141,7 @@ const styles = StyleSheet.create({
   },
   statusBadgeText: {
     color: colors.textDark,
-    fontSize: 10,
+    fontSize: responsiveFontSize(1),
     fontWeight: "bold",
     textTransform: "uppercase",
   },
@@ -156,7 +157,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.pastelOrange,
   },
   createdBy: {
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
     color: "#868e96",
     marginTop: 4,
   },

src/components/RequestCard.tsx

@@ -5,6 +5,7 @@ import { View, Text, Image, TouchableOpacity, StyleSheet, Platform } from 'react
 import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming Expo for icons
 import colors from './colors'; // Your color palette
 import { JoinRequest } from '../types'; // Your type definition
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 interface RequestCardProps {
   item: JoinRequest;
@@ -97,7 +98,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   userName: {
-    fontSize: 19,
+    fontSize: responsiveFontSize(1.9),
     fontWeight: 'bold',
     color: colors.textDark,
   },
@@ -107,7 +108,7 @@ const styles = StyleSheet.create({
     marginTop: 5,
   },
   userMeta: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: colors.textLight,
     marginLeft: 8,
   },
@@ -120,11 +121,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   requestText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: colors.textLight,
   },
   groupName: {
-    fontSize: 17,
+    fontSize: responsiveFontSize(1.7),
     fontWeight: '600',
     color: colors.textDark,
     marginTop: 6,
@@ -162,7 +163,7 @@ const styles = StyleSheet.create({
     }),
   },
   actionButtonText: {
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     fontWeight: 'bold',
     marginLeft: 8,
     color: colors.textDark,

src/components/UserRequested.tsx

@@ -4,6 +4,7 @@ import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "./colors";
 import { UserJoinRequest } from "../types";
 import { formatDate } from "../utils/HelperFunction";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 interface UserRequestedProps {
   item: UserJoinRequest;
@@ -120,7 +121,7 @@ const styles = StyleSheet.create({
   },
   avatarText: {
     fontWeight: "700",
-    fontSize: 15,
+    fontSize: responsiveFontSize(1.6),
     color: colors.white,
   },
   userInfoSection: {
@@ -130,10 +131,10 @@ const styles = StyleSheet.create({
   userName: {
     fontWeight: "bold",
     color: colors.textDark,
-    fontSize: 15,
+    fontSize: responsiveFontSize(1.5),
   },
   userMeta: {
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
     color: colors.textLight,
     marginTop: 3,
     marginBottom: -3,
@@ -144,18 +145,18 @@ const styles = StyleSheet.create({
   },
   requestText: {
     color: colors.textDark,
-    fontSize: 15,
+    fontSize: responsiveFontSize(1.5),
     marginBottom: 2,
     lineHeight: 22,
   },
   groupName: {
     fontWeight: "600",
     color: colors.Settings,
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
     marginBottom: 2,
   },
   reasonText: {
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
     color: colors.textLight,
     marginTop: 6,
     paddingLeft: 1,
@@ -175,7 +176,7 @@ const styles = StyleSheet.create({
     marginTop: 2
   },
   statusText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     fontWeight: "700",
     marginLeft: 6,
     letterSpacing: 0.5

src/components/common/AnimatedCard.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "reac
 import LinearGradient from "react-native-linear-gradient";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "../colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 type CardProps = {
   title: string;
@@ -57,8 +58,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   icon: { marginBottom: 10 },
-  title: { fontSize: 18, fontWeight: "bold", color: "#fff" },
+  title: { fontSize: responsiveFontSize(1.8), fontWeight: "bold", color: "#fff" },
-  subtitle: { fontSize: 13, color: "#fff", opacity: 0.9 },
+  subtitle: { fontSize: responsiveFontSize(1.3), color: "#fff", opacity: 0.9 },
 });
 
 export default AnimatedCard;

src/components/common/AnimatedText.tsx

@@ -9,6 +9,7 @@ import Animated, {
   withDelay,
   Easing,
 } from 'react-native-reanimated';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 const AnimatedText = ({ text, style, delay = 0 }) => {
   const opacity = useSharedValue(0);
@@ -50,12 +51,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   title: {
-    fontSize: 32,
+    fontSize: responsiveFontSize(2.5),
     fontWeight: 'bold',
     marginBottom: 10,
   },
   subtitle: {
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
     color: '#666',
   },
   text: {

src/components/common/Custom.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-native";
 import {Ionicons, IoniconsIconName} from "@react-native-vector-icons/ionicons";
 import colors from "../colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 // --- Custom Input ---
 type CustomInputProps = TextInputProps & {
@@ -82,7 +83,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
 // --- Styles ---
 const styles = StyleSheet.create({
   inputContainer: { marginBottom: 12,elevation:5 },
-  inputLabel: { fontSize: 14, fontWeight: "500", color: colors.textDark, marginBottom: 6 },
+  inputLabel: { fontSize: responsiveFontSize(1.5), fontWeight: "500", color: colors.textDark, marginBottom: 6 },
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
@@ -100,7 +101,7 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     backgroundColor: colors.white,
     color: colors.textDark,
-    fontSize: 15,
+    fontSize: responsiveFontSize(1.5),
   },
   button: {
     elevation:5,
@@ -115,7 +116,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   buttonText: {
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     fontWeight: "600",
   },
 });

src/components/common/CustomModal.tsx

@@ -9,6 +9,7 @@ import {
     Dimensions,
 } from "react-native";
 import colors from "../colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 const { height } = Dimensions.get("window");
 
@@ -128,7 +129,7 @@ const styles = StyleSheet.create({
         elevation: 10,
     },
     title: {
-        fontSize: 18,
+        fontSize: responsiveFontSize(1.8),
         fontWeight: "700",
         color: "#1f2937",
         marginBottom: 12,

src/components/common/Header.tsx

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {Ionicons} from "@react-native-vector-icons/ionicons";
 import colors from "../colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 type HeaderProps = {
   title: string;
@@ -55,7 +56,7 @@ const styles = StyleSheet.create({
     paddingHorizontal:12
   },
   headerTitle: {
-    fontSize: 22,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: "600",
     // textTransform: "capitalize",
   },

src/navigation/AppNavigator.tsx

@@ -40,7 +40,7 @@ export type RootStackParamList = {
   BecomeOrg: undefined;
   YourContacts: undefined;
   Transaction: undefined;
-  EditBankDetails: { currentBankName: string | null; currentAccountNumber: string | null; currentBranchCode: string | null };
+  EditBankDetails: { currentBankName: string | null; currentAccountNumber: string | null; currentBranchCode: string | null; onUpdate:()=>void };
   ManageJoinedGroup: { groupId: string | number };
   Invite: { groupId: string | number; code: string | number };
   ManagementTabs: { groupId: string | number; }

src/navigation/BottomTabs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { View, Text, StyleSheet, Platform } from "react-native";
+import { View, Text, StyleSheet, Platform, AccessibilityInfo } from "react-native";
 import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
 import GroupScreen from "../screens/GroupScreen";
 import Profile from "../screens/profile/Profile";
@@ -8,6 +8,7 @@ import Home from "../screens/home/Home";
 import colors from "../components/colors";
 import Setting from "../screens/setting/Setting";
 import ManagementScreen from "../screens/management/ManagementScreen";
+import { responsiveFontSize, responsiveHeight } from "react-native-responsive-dimensions";
 
 
 const TAB_CONFIG = {
@@ -46,11 +47,32 @@ export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
 const Tab = createBottomTabNavigator<RootTabParamList>();
 
 const BottomTabs: React.FC = () => {
+
+  const [isReduceMotionEnabled, setIsReduceMotionEnabled] = React.useState<boolean>(false);
+  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    // Check for accessibility settings
+    AccessibilityInfo.isScreenReaderEnabled().then(setIsScreenReaderEnabled);
+    AccessibilityInfo.isReduceMotionEnabled().then(setIsReduceMotionEnabled);
+
+    const screenReaderSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      setIsScreenReaderEnabled
+    );
+
+    return () => screenReaderSubscription.remove();
+  }, []);
+
+
+
+  // console.log("isReduceMotionEnabled : ", isReduceMotionEnabled)
+  // console.log("isScreenReaderEnabled : ", isScreenReaderEnabled)
   return (
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarStyle: styles.tabBar,
+        tabBarStyle: [styles.tabBar, {marginVertical:isReduceMotionEnabled ? responsiveHeight(0.5) : responsiveHeight(3.5) || isScreenReaderEnabled ? responsiveHeight(0.5) : responsiveHeight(3.5)}],
 
         tabBarLabel: ({ focused, color }) =>
           !focused ? (
@@ -107,7 +129,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#f5f7fa",
   },
   text: {
-    fontSize: 20,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: "600",
     color: "#111",
   },
@@ -117,7 +139,7 @@ const styles = StyleSheet.create({
     left: 20,
     right: 20,
     height: TAB_CONFIG.height,
-    backgroundColor: TAB_CONFIG.backgroundColor,
+    // backgroundColor: TAB_CONFIG.backgroundColor,
     borderRadius: 20,
     shadowColor: "#000",
     shadowOpacity: 0.1,
@@ -130,7 +152,7 @@ const styles = StyleSheet.create({
   },
   label: {
     paddingVertical: 5,
-    fontSize: 12,
+    fontSize: responsiveFontSize(1.2),
   },
   iconContainer: {
     justifyContent: "center",

src/screens/ContributionScreen.tsx

@@ -9,6 +9,7 @@ import {
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "../components/colors";
 import CustomModal from "../components/common/CustomModal";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 interface ContributionProps {
   data: any;
@@ -124,7 +125,7 @@ const styles = StyleSheet.create({
     marginBottom: 24,
   },
   headerTitle: {
-    fontSize: 22,
+    fontSize: responsiveFontSize(2.2),
     fontWeight: "700",
     marginLeft: 10,
   },
@@ -140,18 +141,18 @@ const styles = StyleSheet.create({
     elevation: 3,
   },
   label: {
-    fontSize: 13,
+    fontSize: responsiveFontSize(1.3),
     color: "#6b7280",
     marginTop: 6,
   },
   value: {
-    fontSize: 15,
+    fontSize: responsiveFontSize(1.5),
     fontWeight: "500",
     color: "#374151",
     marginBottom: 6,
   },
   valueHighlight: {
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: "700",
     color: colors.black,
     marginBottom: 10,

src/screens/GroupCreation.tsx

@@ -18,6 +18,7 @@ import colors from "../components/colors";
 import { launchImageLibrary } from "react-native-image-picker";
 import Ionicons from "@react-native-vector-icons/ionicons";
 import { UPLOAD_GROUP_IMAGE } from "../utils/ApiUrls";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 export default function GroupCreationForm() {
   const navigation = useNavigation<any>();
@@ -279,7 +280,7 @@ const ToggleButtons: React.FC<{
 const styles = StyleSheet.create({
   container: { flexGrow: 1, padding: 16, backgroundColor: "#f5f6fa" },
   titleContainer: { marginBottom: 20, paddingHorizontal: 4 },
-  title: { fontSize: 28, fontWeight: "bold", color: "#1F2937" },
+  title: { fontSize: responsiveFontSize(2.8), fontWeight: "bold", color: "#1F2937" },
   section: {
     backgroundColor: "#fff",
     borderRadius: 12,
@@ -291,7 +292,7 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
   },
   sectionTitle: {
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: "600",
     color: "#374151",
     marginBottom: 16,
@@ -302,7 +303,7 @@ const styles = StyleSheet.create({
   settingRow: {
     marginBottom: 16,
   },
-  label: { fontSize: 14, fontWeight: "600", marginBottom: 8, color: "#4B5563" },
+  label: { fontSize: responsiveFontSize(1.4), fontWeight: "600", marginBottom: 8, color: "#4B5563" },
   toggleContainer: { flexDirection: "row", gap: 10 },
   toggleButton: {
     flex: 1,

src/screens/GroupReview.tsx

@@ -5,6 +5,7 @@ import AppView from "../components/AppView";
 import { apiCall } from "../utils/ApiHelper";
 import { GROUP_CREATION_URL } from "../utils/ApiUrls";
 import colors from "../components/colors";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 // --- Helper: Get Cycle Label ---
 const getCycleLabel = (cycleType: string, customCycleDays: string | number) => {
@@ -191,8 +192,8 @@ export default function GroupReview({ route, navigation }: any) {
 const styles = StyleSheet.create({
   container: { padding: 20, backgroundColor: "#f5f6fa" },
   header: { marginBottom: 30 },
-  title: { fontSize: 28, fontWeight: "bold", color: "#333" },
+  title: { fontSize: responsiveFontSize(2.8), fontWeight: "bold", color: "#333" },
-  subtitle: { fontSize: 16, color: "#666", marginTop: 4 },
+  subtitle: { fontSize: responsiveFontSize(1.6), color: "#666", marginTop: 4 },
   section: { flexDirection: "row", marginBottom: 10 },
   timeline: { alignItems: "center", width: 40 },
   timelineIcon: {
@@ -206,7 +207,7 @@ const styles = StyleSheet.create({
   },
   timelineLine: { flex: 1, width: 2, backgroundColor: "#e0e0e0" },
   content: { flex: 1, paddingLeft: 10, paddingBottom: 20 },
-  sectionTitle: { fontSize: 18, fontWeight: "bold", color: "#444", marginBottom: 10 },
+  sectionTitle: { fontSize: responsiveFontSize(1.8), fontWeight: "bold", color: "#444", marginBottom: 10 },
   card: { backgroundColor: "#fff", borderRadius: 12, padding: 15, elevation: 2 },
   row: {
     flexDirection: "row",
@@ -215,10 +216,10 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: "#f5f5f5",
   },
-  label: { fontSize: 15, color: "#666", fontWeight: "500" },
+  label: { fontSize: responsiveFontSize(1.5), color: "#666", fontWeight: "500" },
-  value: { fontSize: 15, color: "#333", fontWeight: "600", textTransform: "capitalize" },
+  value: { fontSize: responsiveFontSize(1.5), color: "#333", fontWeight: "600", textTransform: "capitalize" },
   descriptionContainer: { paddingVertical: 10 },
-  descriptionText: { fontSize: 15, color: "#333", marginTop: 4, lineHeight: 22 },
+  descriptionText: { fontSize: responsiveFontSize(1.5), color: "#333", marginTop: 4, lineHeight: 22 },
   submitBtn: {
     backgroundColor: colors.pastelGreen,
     flexDirection: "row",
@@ -228,11 +229,11 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     marginTop: 20,
   },
-  btnText: { color: "#333", fontWeight: "bold", fontSize: 18, marginLeft: 10 },
+  btnText: { color: "#333", fontWeight: "bold", fontSize: responsiveFontSize(1.8), marginLeft: 10 },
   modalBackdrop: { flex: 1, backgroundColor: "rgba(0, 0, 0, 0.6)", justifyContent: "center", alignItems: "center" },
   dialogBox: { width: "85%", backgroundColor: "white", borderRadius: 16, padding: 25, alignItems: "center", elevation: 10 },
-  dialogTitle: { fontSize: 22, fontWeight: "bold", color: "#333", marginTop: 15, marginBottom: 10 },
+  dialogTitle: { fontSize: responsiveFontSize(2.2), fontWeight: "bold", color: "#333", marginTop: 15, marginBottom: 10 },
-  dialogMessage: { fontSize: 16, color: "#666", textAlign: "center", marginBottom: 25 },
+  dialogMessage: { fontSize: responsiveFontSize(1.6), color: "#666", textAlign: "center", marginBottom: 25 },
   dialogButton: { backgroundColor: "#f0f0f0", paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
   dialogButtonText: { color: "#333", fontWeight: "bold", fontSize: 16 },
 });

src/screens/GroupScreen.tsx

@@ -27,6 +27,7 @@ import colors from "../components/colors";
 import { ApiResponse } from "./home/UserProfileStatus";
 import * as Keychain from "react-native-keychain";
 import CustomAlert from "../components/CostomAlart";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 const { width } = Dimensions.get('window');
 
 // --- Types ---
@@ -359,37 +360,37 @@ export default function GroupScreen() {
 const styles = StyleSheet.create({
 
   headerContainer: { backgroundColor: '#f5f6fa', paddingHorizontal: 16 },
-  title: { fontSize: 22, fontWeight: "600", color: colors.Group },
+  title: { fontSize: responsiveFontSize(2.2), fontWeight: "600", color: colors.Group },
   searchContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderRadius: 20, paddingHorizontal: 10, elevation: 5, marginVertical: 20 , borderWidth:2,borderColor:colors.pastelGreen },
   searchIcon: { marginRight: 8 },
-  searchInput: { flex: 1, height: 45, fontSize: 16, color: '#333' },
+  searchInput: { flex: 1, height: 45, fontSize: responsiveFontSize(1.6), color: '#333' },
-  sectionTitle: { fontSize: 20, fontWeight: 'bold', color: colors.Group, marginBottom: 12, paddingHorizontal: 16 },
+  sectionTitle: { fontSize: responsiveFontSize(2.0), fontWeight: 'bold', color: colors.Group, marginBottom: 12, paddingHorizontal: 16 },
   featuredList: { paddingLeft: 16, marginBottom: 20 },
   featuredCard: { width: width * 0.45, marginRight: 15, backgroundColor: '#fff', borderRadius: 12, elevation: 3, overflow: 'hidden' },
   featuredImage: { width: '100%', height: 100 },
   featuredContent: { padding: 10 },
-  featuredName: { fontSize: 14, fontWeight: 'bold', color: '#333' },
+  featuredName: { fontSize: responsiveFontSize(1.4), fontWeight: 'bold', color: '#333' },
-  featuredCreator: { fontSize: 12, color: '#777', marginTop: 2 },
+  featuredCreator: { fontSize: responsiveFontSize(1.2), color: '#777', marginTop: 2 },
   tabHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, marginBottom: 16 },
   segmentedControl: { flex: 1, flexDirection: 'row', borderRadius: 10, padding: 4, marginRight: 10 },
   segmentButton: { flex: 1, paddingVertical: 10, borderRadius: 8, alignItems: 'center' },
   segmentButtonActive: { backgroundColor: colors.pastelGreen, elevation: 5, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 , borderRadius:15 },
-  segmentText: { fontSize: 14, fontWeight: '600', color: '#555' },
+  segmentText: { fontSize: responsiveFontSize(1.4), fontWeight: '600', color: '#555' },
   segmentTextActive: { color: '#333' },
   layoutToggleButton: { padding: 8 },
   fab: { position: "absolute", right: 20, bottom: 90, width: 60, height: 60, justifyContent: "center", alignItems: "center", backgroundColor: colors.pastelGreen, borderRadius: 30, elevation: 4 },
   listCard: { backgroundColor: colors.pastelGreen, padding: 16, borderRadius: 20, marginBottom: 12,marginHorizontal:15, elevation: 5 },
   gridCard: { backgroundColor: colors.pastelGreen, padding: 12, borderRadius: 20, marginBottom: 12,marginHorizontal:15, elevation: 5, width: (width - 48) / 2 },
-  groupName: { fontSize: 16, fontWeight: 'bold', color: '#333', width: '50%'  },
+  groupName: { fontSize: responsiveFontSize(1.6), fontWeight: 'bold', color: '#333', width: '50%'  },
-  groupDescription: { fontSize: 14, color: '#666', marginVertical: 4, width: '40%' },
+  groupDescription: { fontSize: responsiveFontSize(1.4), color: '#666', marginVertical: 4, width: '40%' },
   groupMeta: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8, borderTopWidth: 1, borderTopColor: '#f0f0f0', paddingTop: 8, marginBottom: 10 },
-  groupMetaText: { fontSize: 12, color: '#888', fontWeight: '500', textTransform: 'capitalize' },
+  groupMetaText: { fontSize: responsiveFontSize(1.2), color: '#888', fontWeight: '500', textTransform: 'capitalize' },
-  emptyText: { textAlign: 'center', marginTop: 40, fontSize: 16, color: '#888' },
+  emptyText: { textAlign: 'center', marginTop: 40, fontSize: responsiveFontSize(1.6) , color: '#888' },
   emptyFeaturedText: { marginLeft: 20, color: '#888' },
   buttonContainer: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 },
   viewButton: { flex: 1, backgroundColor: '#e9ecef', paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginRight: 5 },
-  viewButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
+  viewButtonText: { color: '#333', fontWeight: 'bold', fontSize: responsiveFontSize(1.4) },
   joinButton: { flex: 1, backgroundColor: colors.white, paddingVertical: 10, borderRadius: 8, alignItems: 'center', marginLeft: 5 },
   joinButtonDisabled: { backgroundColor: '#bdc3c7' },
-  joinButtonText: { color: '#333', fontWeight: 'bold', fontSize: 14 },
+  joinButtonText: { color: '#333', fontWeight: 'bold', fontSize: responsiveFontSize(1.4) },
 });

src/screens/InviteScreen.tsx

@@ -15,6 +15,7 @@ import { apiCall } from '../utils/ApiHelper'; // Adjust path
 import AppView from '../components/AppView'; // Adjust path
 import colors from '../components/colors'; // Adjust path
 import { BASE_URL } from '../utils/ApiUrls';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 // --- Type Definitions ---
 interface Participant {
@@ -78,7 +79,7 @@ const InviteScreen: FC<InviteScreenProps> = ({ route }) => {
     try {
       // Replace with your actual API call to join the group
       // For now, it just shows an alert.
-      await apiCall(`http://192.168.1.5:9060/api/fund/groups/join/invite/${code}`, 'POST');
+      await apiCall(`${BASE_URL}fund/groups/join/invite/${code}`, 'POST');
       ToastAndroid.show(`You have requested to join "${groupDetails.groupName}".`, ToastAndroid.SHORT);
       fetchGroupDetails(); // Refresh details after joining
     } catch (e: any) {
@@ -156,24 +157,23 @@ const InfoRow = ({ label, value }: { label: string; value: string | number }) =>
 
 const styles = StyleSheet.create({
   centered: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F3F4F6' },
-  errorText: { color: '#EF4444', fontSize: 16, textAlign: 'center', padding: 20 },
+  errorText: { color: '#EF4444', fontSize: responsiveFontSize(1.2), textAlign: 'center', padding: 20 },
   contentContainer: { padding: 16, paddingBottom: 100 }, // Add padding to avoid overlap with button
 
-  headerTitle: { fontSize: 32, fontWeight: 'bold', color: '#111827', textAlign: 'center' },
+  headerTitle: { fontSize: responsiveFontSize(3.2), fontWeight: 'bold', color: '#111827', textAlign: 'center' },
-  headerSubtitle: { fontSize: 18, color: '#4B5563', textAlign: 'center', marginBottom: 24, marginTop: 4 },
+  headerSubtitle: { fontSize: responsiveFontSize(1.8), color: '#4B5563', textAlign: 'center', marginBottom: 24, marginTop: 4 },
 
   card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10 },
-  cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937', marginBottom: 12, borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10 },
+  cardTitle: { fontSize: responsiveFontSize(1.8), fontWeight: 'bold', color: '#1F2937', marginBottom: 12, borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10 },
-
   infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
-  infoLabel: { fontSize: 16, color: '#6B7280' },
+  infoLabel: { fontSize: responsiveFontSize(1.6), color: '#6B7280' },
-  infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
+  infoValue: { fontSize: responsiveFontSize(1.6), fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
 
   participantRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 10 },
-  participantName: { fontSize: 16, color: '#1F2937' },
+  participantName: { fontSize: responsiveFontSize(1.6), color: '#1F2937' },
   organizerBadge: { backgroundColor: '#FEF3C7', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 12 },
-  organizerBadgeText: { color: '#92400E', fontSize: 12, fontWeight: '500' },
+  organizerBadgeText: { color: '#92400E', fontSize: responsiveFontSize(1.2), fontWeight: '500' },
-  noParticipantsText: { fontSize: 15, color: '#6B7280', textAlign: 'center', paddingVertical: 10 },
+  noParticipantsText: { fontSize: responsiveFontSize(1.6), color: '#6B7280', textAlign: 'center', paddingVertical: 10 },
 
   floatingButtonContainer: {
     position: 'absolute',
@@ -197,7 +197,7 @@ const styles = StyleSheet.create({
   },
   joinButtonText: {
     color: '#FFFFFF',
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: 'bold',
   },
   disabledButton: {

src/screens/LoginScreen.tsx

@@ -22,6 +22,7 @@ import Ionicons from '@react-native-vector-icons/ionicons';
 import MaterialRipple from 'react-native-material-ripple'; 
 import CustomAlert from '../components/CostomAlart';
 import colors from '../components/colors';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 const { width } = Dimensions.get('window');
 const BLOCK_SIZE = width / 3;
@@ -226,7 +227,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   brand: {
-    fontSize: 28,
+    fontSize: responsiveFontSize(2.8),
     fontWeight: '700',
     color: colors.primary,
     textAlign: 'center',
@@ -237,14 +238,14 @@ const styles = StyleSheet.create({
     textShadowRadius: 2,
   },
   title: {
-    fontSize: 40,
+    fontSize: responsiveFontSize(4),
     fontWeight: 'bold',
     color: colors.textDark,
     textAlign: 'center',
     marginBottom: 14,
   },
   subtitle: {
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     color: colors.textDark,
     textAlign: 'center',
     lineHeight: 26,
@@ -269,7 +270,7 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
     fontWeight: '600',
     color: colors.textLight,
     height: 58,
@@ -302,10 +303,10 @@ const styles = StyleSheet.create({
   buttonText: {
     color: colors.white,
     fontWeight: '800',
-    fontSize: 18,
+    fontSize: responsiveFontSize(1.8),
   },
   footerText: {
-    fontSize: 14,
+    fontSize: responsiveFontSize(1.4),
     color: 'rgba(0,0,0,0.5)',
     marginTop: 28,
     textAlign: 'center',

src/screens/OrgnizerRagister.tsx

@@ -14,6 +14,7 @@ import {
 import axios from "axios";
 import { ORGRAGISTRATION } from "../utils/ApiUrls";
 import * as Keychain from "react-native-keychain";
+import { responsiveFontSize } from "react-native-responsive-dimensions";
 
 const theme = {
   primary: "#111",
@@ -124,7 +125,7 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   title: {
-    fontSize: 22,
+    fontSize: responsiveFontSize(2.8),
     fontWeight: "700",
     color: theme.text,
     marginBottom: 20,
@@ -136,7 +137,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     padding: 14,
     marginBottom: 15,
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
     backgroundColor: "#fff",
   },
   button: {
@@ -148,6 +149,6 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "#fff",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize: responsiveFontSize(1.6),
   },
 });

src/screens/home/UserProfileStatus.tsx

@@ -16,6 +16,11 @@ import LinearGradient from "react-native-linear-gradient";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { apiCall } from "../../utils/ApiHelper";
 import { PAY_ALL_URL } from "../../utils/ApiUrls";
+import {
+  responsiveHeight,
+  responsiveWidth,
+  responsiveFontSize
+} from "react-native-responsive-dimensions";
 
 type StatusData = {
   role?: string;
@@ -292,7 +297,7 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({
                 )}
               </View>
               <View style={styles.infoCardOne}>
-              <Text style={{ color: "#fff", fontWeight: "400"}}>Total Paid Amount {userDashboard?.totalPaidAmountMonth}</Text>
+              <Text style={{ color: "#fff", fontSize: responsiveWidth(2.3)}}>Total Paid Amount <Text style={{ fontWeight: "900"}}>{userDashboard?.totalPaidAmountMonth}</Text></Text>
               {/* <Text style={{ color: "#fff", fontWeight: "400"}}>Total Paid Amount {userDashboard?.totalPaidAmountMonth}</Text> */}
           
            </View>
@@ -372,7 +377,7 @@ const styles = StyleSheet.create({
     marginRight: 8
   },
   header: {
-    fontSize: 20,
+    fontSize: responsiveWidth(3.5),
     fontWeight: "700",
     color: "#fff"
   },
@@ -386,7 +391,7 @@ const styles = StyleSheet.create({
   },
   statusBadgeText: {
     color: "#fff",
-    fontSize: 13,
+    fontSize: responsiveWidth(2),
     fontWeight: '600',
     marginLeft: 4
   },
@@ -441,13 +446,13 @@ const styles = StyleSheet.create({
   },
   infoLabel: {
     color: "rgba(255,255,255,0.9)",
-    fontSize: 12,
+    fontSize: responsiveWidth(2),
     fontWeight: '500',
     flexShrink: 1,
   },
   infoValue: {
     fontWeight: "700",
-    fontSize: 16,
+    fontSize: responsiveWidth(2.5),
     textAlign: 'left',
     color: "#fff"
   },
@@ -498,7 +503,7 @@ const styles = StyleSheet.create({
   },
   dueBarText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: responsiveWidth(2.5),
     fontWeight: "600"
   },
   payAllButton: {
@@ -513,7 +518,7 @@ const styles = StyleSheet.create({
   payAllButtonText: {
     color: "#000000ff",
     fontWeight: "bold",
-    fontSize: 16
+    fontSize: responsiveWidth(2.5)
   },
   payModalOverlay: {
     flex: 1,
@@ -543,7 +548,7 @@ const styles = StyleSheet.create({
   },
   payDialogTitle: {
     color: "#000000ff",
-    fontSize: 18,
+    fontSize: responsiveWidth(1.8),
     fontWeight: "700"
   },
   payGroupOption: {
@@ -565,16 +570,16 @@ const styles = StyleSheet.create({
   payGroupName: {
     color: "#000000ff",
     fontWeight: "700",
-    fontSize: 16
+    fontSize: responsiveWidth(2.5)
   },
   payDueText: {
     color: "rgba(0, 0, 0, 0.8)",
-    fontSize: 13,
+    fontSize: responsiveWidth(1.3),
     marginTop: 2
   },
   payAmount: {
     fontWeight: "bold",
-    fontSize: 16,
+    fontSize: responsiveWidth(2.5),
     color: "#4CAF50"
   },
   payDialogFooter: {
@@ -588,7 +593,7 @@ const styles = StyleSheet.create({
   payDialogTotal: {
     color: "#000000ff",
     fontWeight: "600",
-    fontSize: 17
+    fontSize: responsiveWidth(1.7)
   },
   payConfirmButton: {
     flexDirection: "row",
@@ -605,7 +610,7 @@ const styles = StyleSheet.create({
   payButtonText: {
     color: "#ffffffff",
     fontWeight: "bold",
-    fontSize: 16
+    fontSize: responsiveWidth(2.5)
   },
   modalOverlay: {
     flex: 1,
@@ -622,7 +627,7 @@ const styles = StyleSheet.create({
     elevation: 12,
   },
   modalTitle: {
-    fontSize: 22,
+    fontSize: responsiveWidth(2.2),
     fontWeight: "700",
     color: colors.primary,
     marginBottom: 8,
@@ -631,7 +636,7 @@ const styles = StyleSheet.create({
   modalText: {
     textAlign: "center",
     color: "#666",
-    fontSize: 14,
+    fontSize: responsiveWidth(1.4),
     lineHeight: 20,
     marginBottom: 20,
   },
@@ -658,7 +663,7 @@ const styles = StyleSheet.create({
   buttonText: {
     color: "#fff",
     fontWeight: "600",
-    fontSize: 16,
+    fontSize:responsiveWidth(2.5),
   },
   secondaryText: {
     color: "#666",

src/screens/home/user-home/CycleDashboard.tsx

@@ -10,6 +10,7 @@ import {
     Platform,
 } from 'react-native';
 import { Ionicons } from "@react-native-vector-icons/ionicons"; import colors from "../../../components/colors"; // Assuming a colors file
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 // Enable LayoutAnimation for Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -125,7 +126,7 @@ const CycleItem = ({ item, isExpanded, onToggle }: { item: Cycle, isExpanded: bo
                                 <View style={{ flex: 1, marginLeft: 10 }}>
                                     <Text style={styles.contributorName} numberOfLines={1} > {contribution.userName}</Text>
                                     <Text style={styles.contributionDate}>{formatDate(contribution.paidDate)}</Text>
-                                    <Text style={{color: contribution.status === 'SUCCESS' ? 'green' : contribution.status === 'PENDING' ? 'orange' : 'red', fontSize:12, textTransform:'capitalize'}}>{contribution.status}</Text>
+                                    <Text style={{color: contribution.status === 'SUCCESS' ? 'green' : contribution.status === 'PENDING' ? 'orange' : 'red', fontSize:responsiveFontSize(1.5), textTransform:'capitalize'}}>{contribution.status}</Text>
                                 </View>
                                 <Text style={styles.contributionAmount}>{formatCurrency(contribution.totalAmount)}</Text>
                             </View>
@@ -201,7 +202,7 @@ const styles = StyleSheet.create({
         marginBottom: 20,
     },
     groupName: {
-        fontSize: 24,
+        fontSize: responsiveFontSize(2.4),
         fontWeight: 'bold',
         color: '#1e293b',
         marginBottom: 15,
@@ -214,12 +215,12 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     summaryLabel: {
-        fontSize: 14,
+        fontSize: responsiveFontSize(1.4),
         color: '#64748b',
         marginBottom: 4,
     },
     summaryValue: {
-        fontSize: 16,
+        fontSize: responsiveFontSize(1.6),
         fontWeight: '600',
         color: '#0f172a',
     },
@@ -242,12 +243,12 @@ const styles = StyleSheet.create({
         padding: 16,
     },
     cycleTitle: {
-        fontSize: 18,
+        fontSize: responsiveFontSize(1.8),
         fontWeight: '600',
         color: '#1e293b',
     },
     cycleDateRange: {
-        fontSize: 13,
+        fontSize: responsiveFontSize(1.3),
         color: '#64748b',
         marginTop: 2,
     },
@@ -261,7 +262,7 @@ const styles = StyleSheet.create({
         marginTop: 16,
     },
     sectionTitle: {
-        fontSize: 16,
+        fontSize: responsiveFontSize(1.6),
         fontWeight: '600',
         color: '#334155',
         marginBottom: 12,
@@ -279,16 +280,16 @@ const styles = StyleSheet.create({
         marginLeft: 12,
     },
     withdrawalUser: {
-        fontSize: 15,
+        fontSize: responsiveFontSize(1.5),
         fontWeight: 'bold',
         color: colors.Home
     },
     withdrawalAmount: {
-        fontSize: 14,
+        fontSize: responsiveFontSize(1.4),
         color: colors.Home
     },
     withdrawalDate: {
-        fontSize: 12,
+        fontSize: responsiveFontSize(1.2),
         color: '#475569'
     },
     // Contribution Item
@@ -303,15 +304,15 @@ const styles = StyleSheet.create({
         borderBottomColor: '#f1f5f9',
     },
     contributorName: {
-        fontSize: 15,
+        fontSize: responsiveFontSize(1.5),
         color: '#1e293b',
     },
     contributionDate: {
-        fontSize: 12,
+        fontSize: responsiveFontSize(1.2),
         color: '#64748b',
     },
     contributionAmount: {
-        fontSize: 15,
+        fontSize: responsiveFontSize(1.5),
         fontWeight: '500',
         color: '#1e293b',
     },

src/screens/management/EditGroupScreen.tsx

@@ -53,7 +53,7 @@ export interface GroupDetails {
   cycleType: "QUARTERLY" | "MONTHLY" | "WEEKLY" | "CUSTOM";
   customCycleDays: number;
   withdrawalMethod: "RANDOM" | "SEQUENTIAL";
-  status: "PENDING" | "ACTIVE" | "COMPLETED" | "APPROVED";
+  status: "PENDING" | "ACTIVE" | "COMPLETED" | "APPROVED" | "DELAY";
   visibility: "PUBLIC" | "PRIVATE";
   organizerId: string;
   totalParticipants: number;
@@ -156,6 +156,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
       };
       if (response.status === "success" && response.data) {
         setGroupDetails(response.data);
+        console.log( "chasvgvyi",response.data)
         initializeEditableData(response.data);
       } else {
         throw new Error(response.message || "Failed to fetch group data.");
@@ -173,6 +174,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
       data?: { currentCycle: number; allPaid: boolean; selectedUser: any };
       message?: string;
     };
+    console.log("selectedUser  api response  : ", response)
     if (response.status === "success") {
       setPaymentStatus(response.data?.allPaid || false);
       setCurrentCycle(response.data?.currentCycle || null);
@@ -782,7 +784,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
       )}
 
       {selectedUser?.cycleStatus !== "PENDING_PAYMENTS" &&
-        groupDetails.status === "ACTIVE" &&
+        (groupDetails.status === "ACTIVE" || groupDetails.status === "DELAY" )&& 
         selectedUser?.cycleStatus === "PENDING_SELECTION" && (
           <View style={styles.floatingButtonContainer}>
             <TouchableOpacity style={styles.activateButton} onPress={handleDistribute} disabled={starting}>
@@ -791,7 +793,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
           </View>
         )}
 
-      {selectedUser?.selectedUser != null && selectedUser?.cycleStatus === "READY_FOR_WITHDRAWAL" && (
+      {selectedUser?.selectedUser != null && selectedUser?.cycleStatus === "READY_FOR_WITHDRAWAL" &&   (
         <View style={styles.floatingButtonContainer}>
           <CustomButton buttonBackground={colors?.pastelBlue} style={{ paddingHorizontal: 20 }} title="View Winner of this Cycle" onPress={() => setSelectedUserModel(true)} />
         </View>

src/screens/management/Payments.tsx

@@ -6,6 +6,7 @@ import colors from '../../components/colors';
 import AppView from '../../components/AppView';
 import { apiCall } from '../../utils/ApiHelper';
 import { BASE_URL } from '../../utils/ApiUrls';
+import { responsiveFontSize } from 'react-native-responsive-dimensions';
 
 
 // --- TYPE DEFINITIONS ---
@@ -325,7 +326,7 @@ const styles = StyleSheet.create({
         padding: 20,
     },
     fullScreenMessageText: {
-        fontSize: 18,
+        fontSize: responsiveFontSize(1.8),
         color: '#333',
         textAlign: 'center',
         marginTop: 15,

src/screens/notification/Notification.tsx

@@ -112,37 +112,7 @@ const Notification = () => {
         }
     };
 
-    const getNotificationTypeNavigateScreen = (msgType: string) => {
+   
-        switch (msgType) {
-            case 'JOIN_REQUEST':
-                return 'Home'; // Screen for managing join requests
-            case 'CONTRIBUTION':
-                return 'ContributionDetails'; // Screen for contribution details
-            case 'CONTRIBUTION_ACK':
-                return 'ContributionHistory'; // Screen for contribution history
-            case 'CYCLE_COMPLETED':
-                return 'CycleCompleted'; // Screen showing cycle completion details
-            case 'WITHDRAWAL':
-                return 'WithdrawalHistory'; // Screen for withdrawal history
-            case 'WITHDRAWAL_NOTIFY':
-                return 'WithdrawalDetails'; // Screen for withdrawal notification details
-            case 'CYCLE_WAIVER':
-                return 'WaiverRequests'; // Screen for waiver requests
-            case 'WAIVER_RECEIVED':
-                return 'WaiverDetails'; // Screen for waiver details
-            case 'USER_SELECTED':
-                return 'UserSelection'; // Screen for user selection details
-            case 'GROUP_STARTED':
-                return 'GroupDetails'; // Screen for group details
-            case 'JOIN_APPROVED':
-                return 'JoinApproved'; // Screen for approved join requests
-            case 'JOIN_VIA_INVITE':
-                return 'InviteDetails'; // Screen for invite details
-            default:
-                return 'Home'; // Default fallback screen
-        }
-    };
-
     const getNotificationColor = (msgType: string) => {
         switch (msgType) {
             case 'JOIN_REQUEST':

src/screens/profile/EditBankDetails.tsx

@@ -24,11 +24,13 @@ const EditBankDetails = () => {
   const {
     currentBankName,
     currentAccountNumber,
-    currentBranchCode
+    currentBranchCode,
+    onUpdate
   } = route.params as {
     currentBankName?: string;
     currentAccountNumber?: string;
     currentBranchCode?: string;
+    onUpdate:()=>void
   };
 
   // Initialize state with the passed-in details
@@ -55,6 +57,7 @@ const EditBankDetails = () => {
       if (response.status === "success") {
         ToastAndroid.show(response.message || "Bank details updated successfully!", ToastAndroid.SHORT);
         navigation.goBack();
+        onUpdate(); // Call the onUpdate function to refresh profile data
       } else {
         ToastAndroid.show(response.message || "Could not update bank details.", ToastAndroid.SHORT);
       }

src/screens/profile/Profile.tsx

@@ -31,6 +31,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../../navigation/AppNavigator";
 import { firebase } from "@react-native-firebase/messaging";
 import FirebaseService, { deleteFcmToken, getFcmToken } from "../../utils/firebase/firebaseServices";
+import { clearAllNotifications } from "../../redux/notificationSlice";
 
 
 type UserProfile = {
@@ -50,6 +51,7 @@ type UserProfile = {
   imageBlob: string | null;
   organizerStatus?: string;
   role?: string;
+  onUpdate:()=>void
 };
 
 
@@ -313,7 +315,7 @@ const Profile = () => {
       });
       console.log(" logout api response : ", res)
       await deleteFcmToken(user?.userId?.toString());
-
+      dispatch(clearAllNotifications());
       // Clear stored credentials
       await Keychain.resetGenericPassword();
       dispatch(clearUser())
@@ -361,7 +363,7 @@ const Profile = () => {
     }, 2000); // 2 seconds delay
   };
 
- 
+
   return (
     <AppView paddingHorizontal={5} >
       {/* Header */}
@@ -428,7 +430,7 @@ const Profile = () => {
                   onError={() => console.log("Error loading image")}
                   resizeMode='contain'
                 />
-                <Text numberOfLines={1}  style={{ textAlign: 'center', marginTop: 8 }}>{user?.filePath}</Text>
+                <Text numberOfLines={1} style={{ textAlign: 'center', marginTop: 8 }}>{user?.filePath}</Text>
                 <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
                   <Ionicons name="camera" size={18} color="#000" />
                 </TouchableOpacity>
@@ -541,6 +543,8 @@ const Profile = () => {
                             currentBankName: user?.bankName,
                             currentAccountNumber: user?.bankAccountNumber,
                             currentBranchCode: user?.branchCode,
+                            onUpdate: () =>fetchUserProfile() // Refresh profile data after update
+                            
                           })
                         }}
 

src/utils/ApiUrls.tsx

@@ -1,6 +1,6 @@
 
-// export const BASE_URL = "https://11.godemo.in/FundCollect/api/"
+export const BASE_URL = "https://11.godemo.in/FundCollect/api/"
-export const BASE_URL = "http://192.168.1.5:9060/api/"
+// export const BASE_URL = "http://192.168.29.113:9060/api/"
 export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=`
 export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
 export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`