added custom arrows to calender

src/App.tsx

@@ -1,4 +1,3 @@
-// App.tsx
 import React, { useEffect } from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';

src/assets/svgs/LeftArrow.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Props = {
+  color?: string;
+  width?: number;
+  height?: number;
+};
+
+const SvgComponent: React.FC<Props> = ({
+  color = "#9EA0A1",
+  width = 30,
+  height = 29,
+}) => {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 30 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
+export default SvgComponent;
+

src/assets/svgs/RightArrow.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Props = {
+  color?: string;
+  width?: number;
+  height?: number;
+};
+
+const SvgComponent: React.FC<Props> = ({
+  color = "#9EA0A1",
+  width = 30,
+  height = 29,
+}) => {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 30 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
+export default SvgComponent;
+

src/components/calender.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
 import { Calendar } from 'react-native-calendars';
+import LeftArrow from '../assets/svgs/LeftArrow';
+import RightArrow from '../assets/svgs/RightArrow';
 
 const screenWidth = Dimensions.get('window').width;
 
@@ -16,24 +18,24 @@ const CalendarWrapper = () => {
 
   const renderCustomHeader = () => {
     const monthName = currentDate.toLocaleString('default', { month: 'long' });
-
     return (
       <View style={styles.customHeader}>
         <Text style={styles.monthText}>{monthName}</Text>
-        <TouchableOpacity onPress={() => changeMonth(-1)} style={styles.arrowButton}>
-          <Text style={styles.arrowText}>{'<'}</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => changeMonth(1)} style={styles.arrowButton}>
-          <Text style={styles.arrowText}>{'>'}</Text>
-        </TouchableOpacity>
+        <View style={styles.arrowContainer}>
+          <TouchableOpacity onPress={() => changeMonth(-1)} style={styles.arrowButton}>
+            <LeftArrow />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => changeMonth(1)} style={styles.arrowButton}>
+            <RightArrow />
+          </TouchableOpacity>
+        </View>
       </View>
     );
   };
 
   return (
     <View style={styles.calendarContainer}>
       <Calendar
-        // The key prop is used here to force a re-render
         key={currentDate.getMonth().toString() + currentDate.getFullYear().toString()}
         current={currentDate.toISOString().split('T')[0]}
         theme={{
@@ -60,21 +62,22 @@ const styles = StyleSheet.create({
   },
   customHeader: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
     padding: 10,
   },
   monthText: {
     fontWeight: 'bold',
     fontSize: 18,
+    flex: 1,
+    textAlign: 'left',
+    marginTop: -7,
+  },
+  arrowContainer: {
+    flexDirection: 'row',
   },
   arrowButton: {
     padding: 10,
   },
-  arrowText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
 });
 
 export default CalendarWrapper;

src/services/dbService.tsx

@@ -1,5 +1,3 @@
-// dbService.tsx
-
 import * as SQLite from 'expo-sqlite';
 import { WebSQLDatabase } from 'expo-sqlite';