Support Me card added && Settings bug fix

App.tsx

@@ -6,6 +6,7 @@ import changeNavigationBarColor, {hideNavigationBar} from 'react-native-navigati
 import {StatusBar} from 'react-native';
 import {MainNavigator} from "./src/router/MainNavigator";
 import SyncStorage from 'sync-storage';
+import 'react-native-reanimated'
 
 const App = () => {
   useEffect( () => {

package.json

@@ -18,30 +18,28 @@
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.0",
     "@react-navigation/stack": "^6.3.2",
-    "@shopify/flash-list": "^1.3.0",
+    "@shopify/flash-list": "^1.4.0",
     "@types/react-native-vector-icons": "^6.4.12",
     "expo-font": "^10.2.1",
     "mobx": "^6.6.2",
     "mobx-react": "^7.5.3",
     "moment": "^2.29.4",
+    "moti": "^0.21.0",
     "native-base": "^3.4.17",
     "react": "18.1.0",
     "react-native": "0.70.2",
     "react-native-animated-nav-tab-bar": "^3.1.8",
     "react-native-chart-kit": "^6.12.0",
-    "react-native-collapsible": "^1.6.0",
     "react-native-device-time-format": "^2.3.0",
     "react-native-gesture-handler": "^2.7.1",
     "react-native-google-mobile-ads": "^8.2.0",
     "react-native-material-datetime-picker": "^0.2.1",
     "react-native-navigation-bar-color": "^2.0.1",
-    "react-native-raw-bottom-sheet": "^2.2.0",
     "react-native-reanimated": "^2.6.0",
     "react-native-safe-area-context": "^3.4.1",
     "react-native-screens": "^3.18.0",
     "react-native-scrollable-navigation-bar": "^3.0.5",
     "react-native-send-intent": "github:lucasferreira/react-native-send-intent#pull/149/head",
-    "react-native-size-matters": "^0.4.0",
     "react-native-svg": "^12.1.1",
     "react-native-unimodules": "^0.14.10",
     "react-native-vector-icons": "^9.2.0",

src/components/cards/SupportMeCard.tsx

@@ -0,0 +1,91 @@
+import {Button, HStack, Icon, Text, View, VStack} from "native-base";
+import React, {useEffect, useState} from "react";
+import SettingsStore, {SettingsType} from "../../store/SettingsStore";
+import {GenericCard} from "./GenericCard";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import {TestIds, useRewardedAd} from "react-native-google-mobile-ads";
+import {MotiView} from "moti";
+import moment from "moment";
+
+export const SupportMeCard = () => {
+
+  const adUnitId = TestIds.REWARDED;
+
+  const { isLoaded, isClosed, load, show } = useRewardedAd(adUnitId, {
+    requestNonPersonalizedAdsOnly: true,
+  });
+
+  useEffect(() => {
+    // Start loading the interstitial straight away
+    load();
+  }, [load]);
+
+  useEffect(() => {
+    if (isClosed) {
+      SettingsStore.editSetting(SettingsType.SUPPORT_ME, moment().toDate().getTime())
+    }
+  }, [isClosed]);
+
+  const onPress = () => {
+    show()
+  }
+
+  const RenderButton = () => {
+    const lastSupportedTime = SettingsStore.getSettings(SettingsType.SUPPORT_ME);
+    if (isClosed || (lastSupportedTime && (lastSupportedTime[0]?.value as number +  60 * 60 * 1000 * 3) > moment().toDate().getTime())){
+      return <VStack space={1} alignItems="center">
+        {
+          lastSupportedTime && (lastSupportedTime[0]?.value as number +  60 * 60 * 1000 * 3) > moment().toDate().getTime() ?
+            <Text color="white"> You can come back {moment(lastSupportedTime[0]?.value as number +  60 * 60 * 1000 * 3).fromNow()} </Text> : <React.Fragment/>
+        }
+        <Text color="white">Thanks!</Text>
+        <MotiView
+        from={{
+          scale: 1
+        }}
+        animate={{
+          scale: 5
+        }}
+        transition={{
+          type: "spring",
+          repeat: 4
+        }}
+        style={{
+        height:40
+        }}
+        >
+        <Icon color="purple.700" as={MaterialCommunityIcons} name="heart"  flex={1} size={"2xl"}/>
+      </MotiView>
+      </VStack>
+    }
+    if (isLoaded){
+      return <Button colorScheme="emerald"
+                     borderRadius="15"
+                     size="md"
+                     variant="solid"
+                     onPress={onPress}>
+        <HStack alignItems="center" space={1}>
+          <Icon color="white" as={MaterialCommunityIcons} name="play-circle-outline" size="2xl"/>
+          <Text color="white" bold>Watch</Text>
+        </HStack>
+      </Button>
+    }
+    else {
+      return <Text color="white">Please wait...</Text>
+    }
+  }
+
+  return (
+    <GenericCard style={{marginVertical: 10}}>
+      <HStack my={5} mr={5} justifyContent="space-between" alignItems="center" textAlign="center">
+        <VStack mx={5} flex={1}>
+          <Text color="white" fontSize="lg">{SettingsType.SUPPORT_ME}</Text>
+          <Text color="gray.400" fontSize="md">Support me with watching ad</Text>
+        </VStack>
+        <View flex={1}>
+            <RenderButton/>
+        </View>
+      </HStack>
+    </GenericCard>
+  );
+};

src/components/clock/LiveClock.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import moment from "moment";
 import {Text} from 'native-base';
-import {is24HourFormat} from "react-native-device-time-format";
 
 export default function LiveClock(props) {
   const {is24Hour} = props;

src/components/headers/CalculatorHeader.tsx

@@ -5,7 +5,6 @@ import {useLinkTo} from "@react-navigation/native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import moment from "moment";
 import LiveClock from "../clock/LiveClock";
-import RBSheet from "react-native-raw-bottom-sheet";
 import {is24HourFormat} from "react-native-device-time-format";
 
 export default function CalculatorHeader(props: { children: React.ReactNode; }) {

src/components/lists/CalculatorList.tsx

@@ -137,7 +137,7 @@ export const CalculatorList = () => {
   }
   useEffect(()=> {
     mobileAds().initialize();
-  })
+  }, [])
 
   useEffect(() => {
     const unsubscribe = interstitial.addAdEventListener(AdEventType.LOADED, () => {

src/components/lists/SettingsList.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import {FlashList} from "@shopify/flash-list";
-import {HStack, Icon, IconButton, Text, View, VStack} from "native-base";
-import {GenericCard} from "../cards/GenericCard";
+import {HStack, Text, View} from "native-base";
 import {GenericHeaderCard} from "../cards/GenericHeaderCard";
 import {Observer} from "mobx-react";
-import Ionicons from "react-native-vector-icons/Ionicons";
 import SettingsStore, {Settings, SettingsType} from "../../store/SettingsStore";
 import {FallAsleepCard} from "../cards/FallAsleepCard";
+import {SupportMeCard} from "../cards/SupportMeCard";
 
 interface List {
   name: string | number;
@@ -28,14 +27,14 @@ export const SettingsList = () => {
     let tempList: Array<Settings> | undefined = SettingsStore.getSettings();
     let newList: Array<List> = [];
     if (tempList) tempList.forEach((settings: Settings) => {
-      newList.push({
-        type: ListType.ITEM,
-        name: settings.type,
-        desc: settings.value,
-        id: settings.id
-      })
+        newList.push({
+          type: ListType.ITEM,
+          name: settings.type,
+          desc: settings.value,
+          id: settings.id
+        })
     })
-    return newList;
+    return newList.filter((a, i) => newList.findIndex((s) => a.name === s.name) === i)
   }
 
   const stickyHeaderIndices = buildList()
@@ -67,6 +66,8 @@ export const SettingsList = () => {
                 switch (item.name) {
                   case SettingsType.FALL_ASLEEP:
                     return <FallAsleepCard/>
+                  case SettingsType.SUPPORT_ME:
+                    return <SupportMeCard/>
                   default:
                     return <React.Fragment/>
                 }

src/store/SettingsStore.ts

@@ -4,6 +4,7 @@ import {setItem} from "../utils/AsyncStorageUtils";
 
 export enum SettingsType {
   FALL_ASLEEP = "Fall Asleep",
+  SUPPORT_ME = "Support Me"
 }
 
 export interface Settings {
@@ -41,7 +42,6 @@ class SettingsStore implements ISettingsStore {
       let filteredSettings = this.settings.filter((setting) => setting.type == type);
       return filteredSettings;
     }
-
     return this.settings;
   }
 
@@ -72,11 +72,11 @@ class SettingsStore implements ISettingsStore {
   }
 
   editSetting(type: SettingsType, value: string | number | undefined): void {
-    this.settings?.map((s) => {
-      if (s.type = type) {
-        return s.value = value;
+    this.settings = this.settings?.map((s) => {
+      if (s.type == type) {
+         s.value = value;
       }
-
+      return s;
     });
     setItem("settings", this.settings)