Added Notifications with repeating Schedules Solves #55

app.json

@@ -33,6 +33,7 @@
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
+      "useNextNotificationsApi": true,
       "package": "com.heylinda.meditation"
     },
     "web": {

components/WeekdayPicker.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
+import { useThemeColor } from '../components/Themed'
+interface Props {
+  weekdays: number[]
+  setWeekdays: React.Dispatch<React.SetStateAction<number[]>>
+}
+export default function DayPicker({ weekdays, setWeekdays }: Props) {
+  function daysIO(v: number) {
+    if (weekdays.includes(v)) {
+      const weekdayRemoved = weekdays.filter((element) => element !== v)
+      setWeekdays(weekdayRemoved)
+    } else {
+      setWeekdays([...weekdays, v])
+    }
+  }
+
+  const primaryColor = useThemeColor({}, 'primary')
+
+  const styles = StyleSheet.create({
+    box: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: 'white',
+      marginVertical: 10,
+    },
+    box1: {
+      backgroundColor: weekdays.includes(1) ? primaryColor : 'grey',
+    },
+    box2: {
+      backgroundColor: weekdays.includes(2) ? primaryColor : 'grey',
+    },
+    box3: {
+      backgroundColor: weekdays.includes(3) ? primaryColor : 'grey',
+    },
+    box4: {
+      backgroundColor: weekdays.includes(4) ? primaryColor : 'grey',
+    },
+    box5: {
+      backgroundColor: weekdays.includes(5) ? primaryColor : 'grey',
+    },
+    box6: {
+      backgroundColor: weekdays.includes(6) ? primaryColor : 'grey',
+    },
+    box7: {
+      backgroundColor: weekdays.includes(7) ? primaryColor : 'grey',
+    },
+    boxContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+    },
+    textStyle: {
+      color: 'white',
+    },
+  })
+
+  return (
+    <View style={styles.boxContainer}>
+      <TouchableOpacity onPress={() => daysIO(1)}>
+        <View style={[styles.box, styles.box1]}>
+          <Text style={styles.textStyle}>SUN</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => daysIO(2)}>
+        <View style={[styles.box, styles.box2]}>
+          <Text style={styles.textStyle}>MON</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => daysIO(3)}>
+        <View style={[styles.box, styles.box3]}>
+          <Text style={styles.textStyle}>TUE</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => daysIO(4)}>
+        <View style={[styles.box, styles.box4]}>
+          <Text style={styles.textStyle}>WED</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => daysIO(5)}>
+        <View style={[styles.box, styles.box5]}>
+          <Text style={styles.textStyle}>THU</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => daysIO(6)}>
+        <View style={[styles.box, styles.box6]}>
+          <Text style={styles.textStyle}>FRI</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => daysIO(7)}>
+        <View style={[styles.box, styles.box7]}>
+          <Text style={styles.textStyle}>SAT</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  )
+}

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
     "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "5.11.2",
     "@react-navigation/native": "~5.8.10",
@@ -32,6 +33,8 @@
     "expo-file-system": "~11.1.3",
     "expo-font": "~9.2.1",
     "expo-linking": "~2.3.1",
+    "expo-notifications": "^0.12.3",
+    "expo-permissions": "^12.1.1",
     "expo-splash-screen": "~0.11.2",
     "expo-status-bar": "~1.0.4",
     "expo-web-browser": "~9.2.0",
@@ -42,9 +45,11 @@
     "react-native-gesture-handler": "~1.10.2",
     "react-native-get-random-values": "~1.7.0",
     "react-native-paper": "^4.9.2",
+    "react-native-push-notification": "^8.0.0",
     "react-native-reanimated": "~2.2.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.4.0",
+    "react-native-simple-toast": "^1.1.3",
     "react-native-web": "~0.13.12",
     "react-redux": "^7.2.4",
     "redux-persist": "^6.0.0",

screens/Settings/index.tsx

@@ -4,8 +4,13 @@ import { Divider, List } from 'react-native-paper'
 import { useAppDispatch } from '../../hooks'
 import { reset } from '../../redux/meditationSlice'
 
+import Toast from 'react-native-simple-toast'
+import NotificationSetter from './notificationSetter'
+import Notify from './notificationHandler'
+
 const Settings = () => {
   const dispatch = useAppDispatch()
+  const [showNotification, toggleShowNotification] = React.useState(false)
   const clearData = () => {
     Alert.alert(
       'Clear Data',
@@ -22,10 +27,25 @@ const Settings = () => {
       ]
     )
   }
+
   return (
     <>
       <List.Item title="Clear Data" onPress={clearData} />
       <Divider />
+      <List.Item
+        title="Set Daily Reminder"
+        onPress={() => toggleShowNotification(!showNotification)}
+      />
+      {showNotification && <NotificationSetter />}
+      <Divider />
+      <List.Item
+        title="Clear All Reminders"
+        onPress={() => {
+          Notify.deleteNotification()
+          Toast.show('Deleted Reminders')
+        }}
+      />
+      <Divider />
     </>
   )
 }

screens/Settings/notificationHandler.ts

@@ -0,0 +1,76 @@
+import * as Notifications from 'expo-notifications'
+import * as Permissions from 'expo-permissions'
+import { Platform } from 'react-native'
+
+const askPermissions = async () => {
+  const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS)
+  let finalStatus = existingStatus
+  if (existingStatus !== 'granted') {
+    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS)
+    finalStatus = status
+  }
+  if (finalStatus !== 'granted') {
+    return false
+  }
+  return true
+}
+
+const deleteNotifications = async () => {
+  Notifications.cancelAllScheduledNotificationsAsync()
+}
+
+const iosScheduler = (weekday: number[], time: Date) => {
+  if (weekday !== [-1]) {
+    Notifications.cancelAllScheduledNotificationsAsync()
+    weekday.forEach((v) => {
+      if (v !== -1) {
+        Notifications.scheduleNotificationAsync({
+          content: {
+            title: 'Practice your meditation today  🙇‍♂️',
+          },
+          trigger: {
+            hour: time.getHours(),
+            minute: time.getMinutes(),
+            weekday: v,
+          },
+        })
+      }
+    })
+  }
+}
+
+const AndroidSchedular = (weekday: number[], time: Date) => {
+  Notifications.cancelAllScheduledNotificationsAsync()
+  if (weekday !== [-1]) {
+    weekday.forEach((v) => {
+      if (v !== -1) {
+        Notifications.scheduleNotificationAsync({
+          content: {
+            title: 'Practice your meditation today 🙇‍♂️',
+          },
+          trigger: {
+            hour: time.getHours(),
+            minute: time.getMinutes(),
+            weekday: v,
+            repeats: true,
+          },
+        })
+      }
+    })
+  }
+}
+
+const PlatformScheduler = (weekday: number[], time: Date) => {
+  if (Platform.OS === 'android') {
+    AndroidSchedular(weekday, time)
+  }
+  if (Platform.OS === 'ios') {
+    iosScheduler(weekday, time)
+  }
+}
+
+export default {
+  askPermission: askPermissions,
+  testSchedular: PlatformScheduler,
+  deleteNotification: deleteNotifications,
+}

screens/Settings/notificationSetter.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import { Platform, StyleSheet, View, TouchableOpacity, Text } from 'react-native'
+import { useThemeColor } from '../../components/Themed'
+
+import DateTimePicker from '@react-native-community/datetimepicker'
+import Notify from './notificationHandler'
+import WeekdayPicker from '../../components/WeekdayPicker'
+import Toast from 'react-native-simple-toast'
+
+const NotificationSetter = () => {
+  const [time, setTime] = React.useState(new Date())
+  const [pickedTime, setPickedTime] = React.useState(false)
+  const [weekdays, setWeekdays] = React.useState([-1])
+  const [show, setShow] = React.useState(false)
+  const changeTimeHandler = (event: Event, value?: Date) => {
+    setShow(Platform.OS === 'ios')
+    console.log(value?.getHours(), value?.getMinutes(), value?.getSeconds())
+    if (value) {
+      setPickedTime(true)
+    } else {
+      setPickedTime(false)
+    }
+    setTime(value || new Date())
+  }
+
+  const timeString = (timeSet: Date) => {
+    const timeHours = timeSet.getHours()
+    const timeMinutes = timeSet.getMinutes()
+    const hours =
+      timeHours === 0 ? '00' : timeHours <= 9 ? '0' + timeHours.toString() : timeHours.toString()
+    const minutes =
+      timeMinutes === 0
+        ? '00'
+        : timeMinutes <= 9
+        ? '0' + timeMinutes.toString()
+        : timeMinutes.toString()
+    return hours + ' : ' + minutes
+  }
+
+  return (
+    <>
+      <WeekdayPicker weekdays={weekdays} setWeekdays={setWeekdays} />
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity onPress={() => setShow(!show)}>
+          <View style={[styles.pickTime, { backgroundColor: useThemeColor({}, 'primary') }]}>
+            <Text style={styles.pickTimeText}>PICK TIME</Text>
+          </View>
+        </TouchableOpacity>
+        {pickedTime && <Text style={styles.selectedTime}>At {timeString(time)} </Text>}
+        <TouchableOpacity
+          onPress={() => {
+            if (weekdays.length !== 1 && pickedTime) {
+              Notify.testSchedular(weekdays, time)
+              Toast.show('Notifications Set')
+              console.log(weekdays.toString())
+            } else {
+              Toast.show('Please Set Timing and Weekdays')
+            }
+          }}
+        >
+          <View style={[styles.pickTime, { backgroundColor: useThemeColor({}, 'primary') }]}>
+            <Text style={styles.pickTimeText}>NOTIFY</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {show && (
+        <DateTimePicker
+          value={time}
+          mode="time"
+          is24Hour={true}
+          display="clock"
+          onChange={changeTimeHandler}
+        />
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  pickTime: {
+    width: 90,
+    height: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  pickTimeText: {
+    color: 'white',
+  },
+  selectedTime: {
+    fontSize: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginHorizontal: 10,
+  },
+})
+
+export default NotificationSetter