feat: basic structure for calendar

app/(tabs)/home/index.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
+import { Calendar } from 'react-native-calendars';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
@@ -8,14 +9,17 @@ import { useThemeColor } from "../../../hooks/useThemeColor";
 import { addExpense } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 import { useRouter } from "expo-router";
+import { SimpleDate } from '../../../util/SimpleDate';
+import { useTheme } from '../../contexts/ThemeContext';
 
 export default function Page() {
+    const { colors, theme } = useTheme()
 
     //Styles
     const styles = StyleSheet.create({
         safeAreaViewStyle: {
             flex: 1, 
-            backgroundColor: useThemeColor("containerColor"),
+            backgroundColor: colors.backgroundColor
         },
         container: {
             flex: 1,
@@ -23,7 +27,7 @@ export default function Page() {
             justifyContent: "center",
         },
         text: {
-            color: useThemeColor("primaryText"),
+            color: colors.primaryText,
             fontSize: 70,
             fontWeight: "bold"
         },
@@ -33,7 +37,6 @@ export default function Page() {
     });
 
     const router = useRouter();
-    const {onLogout} = useAuth();
     const [plusShow, setPlusShow] = useState(true);
     const prevOffset = useRef(0);
     
@@ -75,7 +78,17 @@ export default function Page() {
             data={data}
             ListHeaderComponent={
                 <>
-                    <Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}></Welcome>
+                    <Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}/>
+                    <Calendar key={theme} maxDate={SimpleDate.now().format("YYYY-MM-DD")} style={{margin: 10, borderRadius: 20, padding:10}} theme={{
+                        dayTextColor: colors.primaryText,
+                        textDisabledColor: colors.secondaryText,
+                        todayTextColor: colors.accentColor,
+                        calendarBackground: colors.containerColor,
+                        arrowColor: colors.accentColor,
+                        monthTextColor: colors.accentColor
+                    }}>
+
+                    </Calendar>
                     <SearchBar placeholder='Type to Search...'></SearchBar>
                 </>
             }

app/(tabs)/home/userSettings.tsx

@@ -5,7 +5,7 @@ import { SIZES } from '../../../constants/theme'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { ButtonSetting, ToggleSetting } from '../../../components'
 import { useTheme } from '../../contexts/ThemeContext'
-import { deleteExpenses } from '../../../services/database'
+import { deleteExpenses, DEV_populateDatabase } from '../../../services/database'
 import { useAuth } from '../../contexts/AuthContext'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
@@ -61,6 +61,12 @@ export default function userSettings() {
                 console.log("Expenses Deleted!");
             })}}
             />
+          <ButtonSetting settingsTitle='Populate Database' onPress={() => {
+            const del = async () => {
+              await DEV_populateDatabase()
+            }
+            del()
+          }}/>
         </View>
         
       </View>

components/home/expenseItem/expenseItem.tsx

@@ -2,12 +2,18 @@ import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
 import { SIZES } from '../../../constants/theme';
 import { useThemeColor } from '../../../hooks/useThemeColor';
+import { useTheme } from '../../../app/contexts/ThemeContext';
 import CustomCard from "../../common/CustomCard";
+import { SimpleDate } from '../../../util/SimpleDate';
 
-export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
+type ISOdateString = string
+
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
-  const textColor = useThemeColor("primaryText");
+  const {colors} = useTheme()
-  const backgroundColor = useThemeColor("backgroundColor")
+  const textColor = colors.primaryText
+  const backgroundColor = colors.containerColor
+  const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
   return (
       <CustomCard>
         <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
@@ -23,7 +29,7 @@ export default function ExpenseItem(itemProps : ExpenseItemProps) {
           <Text style={{
             fontSize: SIZES.small,
             color: textColor
-          }} numberOfLines={1}>{itemProps.date}</Text>
+          }} numberOfLines={1}>{date.format("DD.MM.YYYY")}</Text>
         </View>
         <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
           <Text style={{

package-lock.json

@@ -24,6 +24,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
+        "react-native-calendars": "^1.1303.0",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-safe-area-context": "4.6.3",
         "react-native-screens": "~3.22.0",
@@ -14367,6 +14368,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "optional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -15714,6 +15724,23 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-calendars": {
+      "version": "1.1303.0",
+      "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1303.0.tgz",
+      "integrity": "sha512-afR9D+EbJQe/YnlXRly/4pqkM7iXSziaKUZz1EoKWk3R0D+sela5LknziXIiM1XFDCpYk5ZJ3cjnTed0MjxVKg==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.1",
+        "lodash": "^4.17.15",
+        "memoize-one": "^5.2.1",
+        "prop-types": "^15.5.10",
+        "react-native-swipe-gestures": "^1.0.5",
+        "recyclerlistview": "^4.0.0",
+        "xdate": "^0.8.0"
+      },
+      "optionalDependencies": {
+        "moment": "^2.29.4"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
@@ -15752,6 +15779,11 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-swipe-gestures": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
+      "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw=="
+    },
     "node_modules/react-native-uuid": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-2.0.1.tgz",
@@ -15887,6 +15919,20 @@
         "node": ">= 4"
       }
     },
+    "node_modules/recyclerlistview": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz",
+      "integrity": "sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==",
+      "dependencies": {
+        "lodash.debounce": "4.0.8",
+        "prop-types": "15.8.1",
+        "ts-object-utils": "0.0.5"
+      },
+      "peerDependencies": {
+        "react": ">= 15.2.1",
+        "react-native": ">= 0.30.0"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -17078,6 +17124,11 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/ts-object-utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz",
+      "integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA=="
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -17626,6 +17677,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/xdate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/xdate/-/xdate-0.8.2.tgz",
+      "integrity": "sha512-sNBlLfOC8S3V0vLDEUianQOXcTsc9j4lfeKU/klHe0RjHAYn0CXsSttumTot8dzalboV8gZbH38B+WcCIBjhFQ=="
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",

package.json

@@ -4,8 +4,8 @@
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android",
+    "android": "expo run:android",
-    "ios": "expo start --ios",
+    "ios": "expo run:ios",
     "web": "expo start --web",
     "test": "jest --watchAll",
     "start tunnel": "expo start --tunnel",
@@ -34,6 +34,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-calendars": "^1.1303.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",