DateTimePicker

package.json

@@ -23,6 +23,7 @@
         "@freakycoder/react-native-header-view": "^1.2.0",
         "@gorhom/bottom-sheet": "^4.4.3",
         "@react-native-async-storage/async-storage": "^1.17.10",
+        "@react-native-community/datetimepicker": "6.2.0",
         "@react-native-masked-view/masked-view": "0.2.7",
         "@react-navigation/native": "^6.0.13",
         "@react-navigation/stack": "^6.3.2",
@@ -40,6 +41,7 @@
         "react-native-app-intro-slider": "^4.0.4",
         "react-native-gesture-handler": "~2.5.0",
         "react-native-imaged-card-view": "^0.0.11",
+        "react-native-modal-datetime-picker": "^14.0.1",
         "react-native-reanimated": "~2.9.1",
         "react-native-safe-area-context": "4.3.1",
         "react-native-safe-area-view": "^1.1.1",

src/components/FreeClass/DateTimePicker/DateTimeBox.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from "react"
+import { View } from "react-native"
+import { Text } from "components/Text"
+import { usePalette } from "utils/colors"
+
+export interface DateTimeBoxProps {
+    value?: string
+}
+/**
+ * custom box which contains a 2 digit number, used
+ * inside {@link DateTimePicker}
+ */
+export const DateTimeBox: FC<DateTimeBoxProps> = props => {
+    const { isLight } = usePalette()
+    return (
+        <View
+            style={{
+                width: 38,
+                height: 27,
+                borderColor: isLight ? "#454773" : "#fff",
+                borderWidth: 0.5,
+                borderRadius: 5,
+                justifyContent: "center",
+                alignItems: "center",
+                marginLeft: 12,
+            }}
+        >
+            <Text
+                style={{
+                    fontSize: 20,
+                    fontWeight: "400",
+                    color: isLight ? "#454773" : "#fff",
+                    opacity: 0.4,
+                }}
+            >
+                {props.value}
+            </Text>
+        </View>
+    )
+}

src/components/FreeClass/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,101 @@
+import React, { FC, useState } from "react"
+import { Pressable, View } from "react-native"
+import { Text } from "components/Text"
+import { usePalette } from "utils/colors"
+import { DateTimeBox } from "./DateTimeBox"
+import { destructureDate } from "utils/dates"
+import DateTimePickerModal from "react-native-modal-datetime-picker"
+export interface DateTimePickerProps {
+    date: Date
+    setDate: (date: Date) => void
+}
+
+/**
+ * custom DateTime picker
+ */
+export const DateTimePicker: FC<DateTimePickerProps> = props => {
+    const { year, month, day, hour, minute } = destructureDate(props.date)
+    const { isLight, primary } = usePalette()
+
+    const [isDatePickerVisible, setDatePickerVisibility] = useState(false)
+
+    //there would be also "date-time" but we don't use it
+    const [dateMode, setDateMode] = useState<"date" | "time">("date")
+
+    const showDatePicker = () => {
+        setDateMode("date")
+        setDatePickerVisibility(true)
+    }
+
+    const showTimePicker = () => {
+        setDateMode("time")
+        setDatePickerVisibility(true)
+    }
+
+    const hideDateOrTimePicker = () => {
+        setDatePickerVisibility(false)
+    }
+
+    const handleConfirm = (date: Date) => {
+        props.setDate(date)
+        console.log("A date has been picked: ", date)
+        hideDateOrTimePicker()
+    }
+    return (
+        <View>
+            <View
+                style={{
+                    marginTop: 46,
+                    width: "100%",
+                    height: 27,
+                    flexDirection: "row",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }}
+            >
+                <View>
+                    <Text
+                        style={{
+                            color: isLight ? primary : "#fff",
+                            fontSize: 14,
+                        }}
+                    >
+                        Date
+                    </Text>
+                </View>
+                <Pressable
+                    onPress={showDatePicker}
+                    style={{ flexDirection: "row" }}
+                >
+                    <DateTimeBox value={day} />
+                    <DateTimeBox value={month} />
+                    <DateTimeBox value={year} />
+                </Pressable>
+                <View>
+                    <Text
+                        style={{
+                            color: isLight ? primary : "#fff",
+                            fontSize: 14,
+                            marginLeft: 28,
+                        }}
+                    >
+                        Time
+                    </Text>
+                </View>
+                <Pressable
+                    onPress={showTimePicker}
+                    style={{ flexDirection: "row" }}
+                >
+                    <DateTimeBox value={hour} />
+                    <DateTimeBox value={minute} />
+                </Pressable>
+            </View>
+            <DateTimePickerModal
+                isVisible={isDatePickerVisible}
+                mode={dateMode}
+                onConfirm={handleConfirm}
+                onCancel={hideDateOrTimePicker}
+            />
+        </View>
+    )
+}

src/pages/FreeClass/CampusChoice.tsx

@@ -4,6 +4,7 @@ import { View, Pressable, FlatList, Dimensions } from "react-native"
 import { usePalette } from "utils/colors"
 import { NavBar } from "components/NavBar"
 import { Title, BodyText } from "components/Text"
+import { DateTimePicker } from "components/FreeClass/DateTimePicker/DateTimePicker"
 
 export interface CampusItem {
     id: number
@@ -12,7 +13,7 @@ export interface CampusItem {
 
 export const CampusChoice: RootStackScreen<"CampusChoice"> = () => {
     const { navigate } = useNavigation()
-    const { homeBackground, background, primary } = usePalette()
+    const { homeBackground, background, primary, isLight } = usePalette()
 
     const [data, setData] = useState<CampusItem[]>([
         { id: 0, name: ["Bovisa", "Durando"] },
@@ -22,6 +23,10 @@ export const CampusChoice: RootStackScreen<"CampusChoice"> = () => {
         { id: 4, name: ["Mancinelli"] },
     ])
 
+    //non-ISO format for simplicity (local timezone) and
+    // compatibility with `handleConfirm` function
+    const [date, setDate] = useState<Date>(new Date())
+
     return (
         <View
             style={{
@@ -64,18 +69,10 @@ export const CampusChoice: RootStackScreen<"CampusChoice"> = () => {
                     >
                         <Title style={{ fontSize: 40 }}>Campus</Title>
                     </View>
-                    <View
-                        //this view is for the date and the time
-                        style={{
-                            marginTop: 46,
-                            backgroundColor: "red",
-                            width: 260,
-                            height: 27,
-                            alignSelf: "center",
-                        }}
-                    >
-                        <BodyText>Data Picker</BodyText>
-                    </View>
+                    <DateTimePicker
+                        date={date}
+                        setDate={(date: Date) => setDate(date)}
+                    />
                     <FlatList
                         showsVerticalScrollIndicator={false}
                         style={{

src/utils/dates.ts

@@ -18,3 +18,16 @@ export function getIsoStringFromDaysPassed(n: number): string {
 
     return newDate.toISOString()
 }
+
+/**
+ * given a `Date` object (NON-ISO), returns the destructured Date
+ * ready for use of {@link DateTimePicker}
+ */
+export function destructureDate(date: Date) {
+    const year = date.getFullYear().toString().substring(2, 4) //only last two digits
+    const month = (date.getMonth() + 1).toString().padStart(2, "0")
+    const day = date.getDate().toString().padStart(2, "0")
+    const hour = date.getHours().toString().padStart(2, "0")
+    const minute = date.getMinutes().toString().padStart(2, "0")
+    return { year, month, day, hour, minute }
+}

yarn.lock

@@ -2013,6 +2013,13 @@
     prompts "^2.4.0"
     semver "^6.3.0"
 
+"@react-native-community/datetimepicker@6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-6.2.0.tgz#50bc629e70e4030c48205c01efbc65a8f35d82d4"
+  integrity sha512-w1ZS+wYO3qSASliRp+B7mPphOhtVm++rhSbj1WsgXdgLgDXSkDxpMnAXXQu9M0XdcgBwVJ6wDExeIwuzU5Jtfg==
+  dependencies:
+    invariant "^2.2.4"
+
 "@react-native-masked-view/masked-view@0.2.7":
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.2.7.tgz#d19f1fc646df9440c23c834b4ff3f2b8fe15e175"
@@ -9470,6 +9477,13 @@ react-native-imaged-card-view@^0.0.11:
   resolved "https://registry.yarnpkg.com/react-native-imaged-card-view/-/react-native-imaged-card-view-0.0.11.tgz#c1912ab00c4e07ab2c0a56801f930374f484cc20"
   integrity sha512-xVvI0mWP1SR+J61P5X649eDZXunCXtSMZ+GkGsY03vEPofnfah8q3Am2NDX9KcO6SzdNtxRJeLmDogyfj63ReQ==
 
+react-native-modal-datetime-picker@^14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-14.0.1.tgz#d9c6df4ff85bf1cfbe108c756dc26dcca4cc5f2f"
+  integrity sha512-wQt4Pjxt2jiTsVhLMG0E7WrRTYBEQx2d/nUrFVCbRqJ7lrXocXaT5UZsyMpV93TnKcyut62OprbO88wYq/vh0g==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-reanimated@~2.9.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"