android arrows ui fix

src/components/Calendars/RangeCalendar/Navigation/index.tsx

@@ -8,8 +8,17 @@ import { Colors } from 'src/theme';
 
 const Navigation = React.memo(({ direction }: { direction: 'prev' | 'next' }) => {
   return (
-    <View style={[styles.navigationBtn, direction === 'prev' ? styles.prevComponent : styles.nextComponent]}>
-      {direction === 'prev' ? <LeftArrow fill={Colors.DARK_BLUE} /> : <RightArrow fill={Colors.DARK_BLUE} />}
+    <View
+      style={[
+        styles.navigationBtn,
+        direction === 'prev' ? styles.prevComponent : styles.nextComponent
+      ]}
+    >
+      {direction === 'prev' ? (
+        <LeftArrow height={18} width={18} fill={Colors.DARK_BLUE} />
+      ) : (
+        <RightArrow height={18} width={18} fill={Colors.DARK_BLUE} />
+      )}
     </View>
   );
 });

src/components/Calendars/RangeCalendar/Navigation/style.tsx

@@ -2,15 +2,11 @@ import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   navigationBtn: {
-    width: 50,
+    width: 40,
     height: 30,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  prevComponent: {
-    left: 25,
-  },
-  nextComponent: {
-    right: 25,
-  },
+  prevComponent: {},
+  nextComponent: {}
 });

src/components/Calendars/RangeCalendar/index.tsx

@@ -19,6 +19,7 @@ import { styles } from './style';
 import { Colors } from '../../../theme';
 import { Button } from 'src/components/Button';
 import { ButtonVariants } from 'src/types/components';
+import Navigation from './Navigation';
 
 export default function RangeCalendar({
   isModalVisible,
@@ -137,6 +138,10 @@ export default function RangeCalendar({
           timePicker={false}
           showOutsideDays={true}
           weekdaysFormat={'short'}
+          components={{
+            IconPrev: <Navigation direction="prev" />,
+            IconNext: <Navigation direction="next" />
+          }}
           styles={{
             header: {
               paddingBottom: 10