fix navigation issue (onlight mode)

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',
     },