fix navigation issue (onlight mode)

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",