feat: add a calendar on the history page

app/(pages)/history.tsx

@@ -1,8 +1,12 @@
 import { StyleSheet } from "react-native"
 import { Button } from "react-native-paper"
+import { Calendar } from "react-native-calendars"
 import { SafeAreaView } from "react-native-safe-area-context"
+import { useState } from "react"
 
 const History: React.FC = () => {
+  const [selected, setSelected] = useState("")
+
   return (
     <SafeAreaView style={styles.container}>
       <Button
@@ -13,6 +17,31 @@ const History: React.FC = () => {
       >
         Press me
       </Button>
+      <Calendar
+        onDayPress={(day) => {
+          setSelected(day.dateString)
+        }}
+        markedDates={{
+          "2023-03-01": { selected: true, marked: true, selectedColor: "blue" },
+          "2023-03-02": { marked: true },
+          "2023-03-03": { selected: true, marked: true, selectedColor: "blue" },
+          [selected]: {
+            selected: true,
+            disableTouchEvent: true,
+            selectedColor: "orange",
+          },
+        }}
+        theme={{
+          backgroundColor: "#000000",
+          calendarBackground: "#000000",
+          textSectionTitleColor: "#b6c1cd",
+          selectedDayBackgroundColor: "#00adf5",
+          selectedDayTextColor: "#ffffff",
+          todayTextColor: "#00adf5",
+          dayTextColor: "#2d4150",
+          textDisabledColor: "#d9efff",
+        }}
+      />
     </SafeAreaView>
   )
 }

package-lock.json

@@ -23,6 +23,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.73.4",
+        "react-native-calendars": "1.1304.1",
         "react-native-paper": "5.12.3",
         "react-native-safe-area-context": "4.8.2",
         "react-native-screens": "3.29.0",
@@ -18148,6 +18149,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "optional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -19553,6 +19563,23 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-calendars": {
+      "version": "1.1304.1",
+      "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1304.1.tgz",
+      "integrity": "sha512-D1aU5lLhi7KCCCeHhKOkcC41K8s3paiiIfMaOQx6NezCbgKHelqT01WPpAZLh3Cm0QTC5EZo0oDPD0mCdKrDgQ==",
+      "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-paper": {
       "version": "5.12.3",
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.12.3.tgz",
@@ -19600,6 +19627,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-vector-icons": {
       "version": "10.0.3",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.3.tgz",
@@ -19997,6 +20029,20 @@
         "node": ">=0.10.0"
       }
     },
+    "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/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -21654,6 +21700,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/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -22400,6 +22451,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": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",

package.json

@@ -31,6 +31,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-calendars": "1.1304.1",
     "react-native-paper": "5.12.3",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "3.29.0",