use react-native-background-fetch

app.json

@@ -21,7 +21,7 @@
         "backgroundColor": "#fa4454"
       },
       "package": "dev.vasc.vshop2",
-      "versionCode": 63
+      "versionCode": 64
     },
     "web": {
       "bundler": "metro",
@@ -42,7 +42,8 @@
           "icon": "./assets/images/notification-icon.png",
           "color": "#fa4454"
         }
-      ]
+      ],
+      "react-native-background-fetch"
     ],
     "experiments": {
       "typedRoutes": true

app/(authenticated)/settings.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Checkbox, List, Text, TouchableRipple } from "react-native-paper";
 import { useTranslation } from "react-i18next";
 import { Linking, ToastAndroid, ScrollView } from "react-native";
@@ -11,30 +11,27 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { defaultUser } from "~/utils/valorant-api";
 import * as Clipboard from "expo-clipboard";
 import { useRouter } from "expo-router";
-import {
-  checkShop,
-  isWishlistCheckRegistered,
-  registerWishlistCheck,
-  unregisterWishlistCheck,
-} from "~/utils/wishlist";
+import { checkShop } from "~/utils/wishlist";
 import * as Notifications from "expo-notifications";
 import { usePostHog } from "posthog-react-native";
+import { useWishlistStore } from "~/hooks/useWishlistStore";
 
 function Settings() {
   const { t } = useTranslation();
   const router = useRouter();
   const { user, setUser } = useUserStore();
   const { isDonator, screenshotModeEnabled, toggleScreenshotMode } =
     useFeatureStore();
+  const notificationEnabled = useWishlistStore(
+    (state) => state.notificationEnabled
+  );
+  const setNotificationEnabled = useWishlistStore(
+    (state) => state.setNotificationEnabled
+  );
+  const wishlistedSkins = useWishlistStore((state) => state.skinIds);
   const { showDonatePopup } = useDonatePopupStore();
   const posthog = usePostHog();
 
-  const [isRegistered, setIsRegistered] = useState(false);
-
-  useEffect(() => {
-    checkWishlistCheckStatus();
-  }, []);
-
   const handleLogout = async () => {
     await CookieManager.clearAll(true);
     await AsyncStorage.removeItem("region");
@@ -45,10 +42,10 @@ function Settings() {
 
   const toggleNotificationEnabled = async () => {
     if (isDonator) {
-      if (!isRegistered) {
+      if (!notificationEnabled) {
         const permission = await Notifications.requestPermissionsAsync();
         if (permission.granted) {
-          await registerWishlistCheck();
+          setNotificationEnabled(true);
           ToastAndroid.show(
             t("wishlist.notification.enabled"),
             ToastAndroid.LONG
@@ -60,24 +57,17 @@ function Settings() {
           );
         }
       } else {
-        await unregisterWishlistCheck();
+        setNotificationEnabled(false);
         ToastAndroid.show(
           t("wishlist.notification.disabled"),
           ToastAndroid.LONG
         );
       }
-
-      await checkWishlistCheckStatus();
     } else {
       showDonatePopup();
     }
   };
 
-  const checkWishlistCheckStatus = async () => {
-    const isRegistered = await isWishlistCheckRegistered();
-    setIsRegistered(isRegistered);
-  };
-
   const showLastExecution = async () => {
     const lastWishlistCheck = await AsyncStorage.getItem("lastWishlistCheck");
     const ms = Number.parseInt(lastWishlistCheck || "0");
@@ -122,7 +112,7 @@ function Settings() {
                 )}
                 right={() => (
                   <Checkbox
-                    status={isRegistered ? "checked" : "unchecked"}
+                    status={notificationEnabled ? "checked" : "unchecked"}
                     onPress={toggleNotificationEnabled}
                   />
                 )}
@@ -212,7 +202,7 @@ function Settings() {
               )}
             />
           </TouchableRipple>
-          <TouchableRipple onPress={() => checkShop()}>
+          <TouchableRipple onPress={() => checkShop(wishlistedSkins)}>
             <List.Item
               title="Wishlist notification test"
               left={(props) => (

app/_layout.tsx

@@ -19,6 +19,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { SplashScreen } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { SharedPostHogProvider } from "~/components/Posthog";
+import { initBackgroundFetch } from "~/utils/wishlist";
 
 export const CombinedDarkTheme = {
   ...merge(PaperDarkTheme, NavigationDarkTheme),
@@ -36,6 +37,8 @@ function RootLayout() {
   const { t } = useTranslation();
 
   useEffect(() => {
+    initBackgroundFetch();
+
     // If user has set the region, he *should* be a returning user
     AsyncStorage.getItem("region").then((region) => {
       if (region) {

hooks/useWishlistStore.ts

@@ -3,12 +3,17 @@ import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
 
 interface WishlistState {
+  notificationEnabled: boolean;
+  setNotificationEnabled: (value: boolean) => void;
   skinIds: string[];
   toggleSkin: (uuid: string) => void;
 }
 export const useWishlistStore = create<WishlistState>()(
   persist(
     (set, get) => ({
+      notificationEnabled: false,
+      setNotificationEnabled: (value: boolean) =>
+        set({ notificationEnabled: value }),
       skinIds: [],
       toggleSkin: (uuid: string) =>
         set({

index.ts

@@ -0,0 +1,17 @@
+import "expo-router/entry";
+
+import BackgroundFetch from "react-native-background-fetch";
+import { wishlistBgTask } from "./utils/wishlist";
+
+BackgroundFetch.registerHeadlessTask(async (event) => {
+  let taskId = event.taskId;
+  let isTimeout = event.timeout;
+  if (isTimeout) {
+    console.log("[BackgroundFetch] Headless TIMEOUT:", taskId);
+    BackgroundFetch.finish(taskId);
+    return;
+  }
+
+  await wishlistBgTask();
+  BackgroundFetch.finish(taskId);
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vshop",
-  "main": "expo-router/entry",
+  "main": "index.ts",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
@@ -30,7 +30,6 @@
     "expo": "~51.0.36",
     "expo-application": "~5.9.1",
     "expo-av": "~14.0.7",
-    "expo-background-fetch": "~12.0.1",
     "expo-clipboard": "~6.0.3",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.27",
@@ -57,6 +56,7 @@
     "react-dom": "18.2.0",
     "react-i18next": "^15.0.2",
     "react-native": "0.74.5",
+    "react-native-background-fetch": "^4.2.5",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-mask-text": "^0.14.2",
     "react-native-paper": "^4.12.8",