chore: Fix toast overlay in modals

THIRD_PARTY.md

@@ -1,5 +1,6 @@
 | Name | License | Source |
 | ---- | ------- | ------ |
+| @backpackapp-io/react-native-toast | MIT | https://github.com/backpackapp-io/react-native-toast |
 | @expo/vector-icons | MIT | https://github.com/expo/vector-icons |
 | @gorhom/bottom-sheet | MIT | https://github.com/gorhom/react-native-bottom-sheet |
 | @miblanchard/react-native-slider | MIT | https://github.com/miblanchard/react-native-slider |
@@ -48,7 +49,6 @@
 | react-native-safe-area-context | MIT | https://github.com/th3rdwave/react-native-safe-area-context |
 | react-native-screens | MIT | https://github.com/software-mansion/react-native-screens |
 | react-native-svg | MIT | https://github.com/software-mansion/react-native-svg |
-| react-native-toast-notifications | MIT | https://github.com/arnnis/react-native-toast-notifications |
 | react-native-track-player | Apache-2.0 | https://github.com/doublesymmetry/react-native-track-player |
 | Roboto Font | Apache-2.0 | https://github.com/googlefonts/roboto |
 | tailwind-merge | MIT | https://github.com/dcastil/tailwind-merge |

mobile/package.json

@@ -23,6 +23,7 @@
     "release": "git checkout main -q && git pull && python ./scripts/release/release_bump.py"
   },
   "dependencies": {
+    "@backpackapp-io/react-native-toast": "^0.11.0",
     "@expo/vector-icons": "^14.0.4",
     "@gorhom/bottom-sheet": "5.0.2",
     "@miblanchard/react-native-slider": "^2.6.0",
@@ -67,7 +68,6 @@
     "react-native-safe-area-context": "4.11.1",
     "react-native-screens": "~3.34.0",
     "react-native-svg": "^15.8.0",
-    "react-native-toast-notifications": "^3.4.0",
     "react-native-track-player": "^4.1.1",
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
@@ -113,7 +113,8 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "react-native-actions-sheet@0.9.7": "patches/react-native-actions-sheet@0.9.7.patch"
+      "react-native-actions-sheet@0.9.7": "patches/react-native-actions-sheet@0.9.7.patch",
+      "@backpackapp-io/react-native-toast@0.11.0": "patches/@backpackapp-io__react-native-toast@0.11.0.patch"
     }
   }
 }

mobile/patches/@backpackapp-io__react-native-toast@0.11.0.patch

@@ -0,0 +1,29 @@
+diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
+index c598db60ff3d374db094493fb3a90ae5c4d59077..463219603128d5af80fa842c32b33423efdbbc50 100644
+--- a/src/components/Toast.tsx
++++ b/src/components/Toast.tsx
+@@ -130,7 +130,7 @@ export const Toast: FC<Props> = ({
+           kbHeight -
+           insets.bottom -
+           (extraInsets?.bottom ?? 0) -
+-          24
++          0
+         : startingY;
+
+       offsetY.value = withSpring(val, {
+@@ -241,6 +241,7 @@ export const Toast: FC<Props> = ({
+           endPause();
+         }}
+         onPress={onPress}
++        pointerEvents="box-none"
+         style={[
+           {
+             backgroundColor: !toast.customToast
+@@ -267,6 +268,7 @@ export const Toast: FC<Props> = ({
+               updateHeight(toast.id, event.nativeEvent.layout.height)
+             }
+             key={toast.id}
++            pointerEvents="box-none"
+           >
+             {toast.customToast({
+               ...toast,

mobile/scripts/licenses/licenseClarification.json

@@ -1,4 +1,7 @@
 {
+  "@backpackapp-io/react-native-toast@0.11.0": {
+    "copyright": "Copyright (c) 2022 Nick DeBaise"
+  },
   "@paralleldrive/cuid2@2.2.2": {
     "repository": "https://github.com/paralleldrive/cuid2"
   },
@@ -87,9 +90,6 @@
     "repository": "https://github.com/expo/expo/tree/main/packages/expo-web-browser",
     "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2015-present 650 Industries, Inc. (aka Expo)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
   },
-  "react-native-toast-notifications@3.4.0": {
-    "repository": "https://github.com/arnnis/react-native-toast-notifications"
-  },
   "react-native-track-player@4.1.1": {
     "copyright": "Copyright (c) 2017 Double Symmetry"
   },

mobile/src/api/tracks/[id]/playlist.ts

@@ -6,7 +6,6 @@ import {
 } from "@tanstack/react-query";
 import { and, eq } from "drizzle-orm";
 import { useCallback } from "react";
-import { Toast } from "react-native-toast-notifications";
 
 import { db } from "@/db";
 import { playlists, tracksToPlaylists } from "@/db/schema";
@@ -138,7 +137,6 @@ export function useDeleteTrackFromPlaylist(
       if (wasFavorited) {
         queryClient.invalidateQueries({ queryKey: favoriteKeys.lists() });
       }
-      Toast.show("Removed track from playlist.");
     },
   });
 }

mobile/src/components/new/Sheet/Sheet.tsx

@@ -1,3 +1,4 @@
+import { Toasts } from "@backpackapp-io/react-native-toast";
 import { cssInterop } from "nativewind";
 import type { StyleProp, ViewStyle } from "react-native";
 import { View } from "react-native";
@@ -33,6 +34,7 @@ export function Sheet({
     <WrappedActionSheet
       gestureEnabled
       CustomHeaderComponent={<SheetHeader title={title} />}
+      ExtraOverlayComponent={<Toasts />}
       containerClassName={cn("rounded-t-lg bg-canvas dark:bg-neutral5", {
         "h-full": snapTop,
       })}

mobile/src/lib/toast.tsx

@@ -0,0 +1,43 @@
+import type {
+  Toast,
+  ToastOptions as TOptions,
+} from "@backpackapp-io/react-native-toast";
+import { ToastPosition } from "@backpackapp-io/react-native-toast";
+import { Text, View } from "react-native";
+
+import { cn } from "./style";
+
+/** Sensible defaults for toast. */
+export const ToastOptions = {
+  customToast: CustomToast,
+  disableShadow: true,
+  position: ToastPosition.BOTTOM,
+  height: 36,
+  providerKey: "PERSISTS",
+} satisfies TOptions;
+
+/** Render a custom toast (makes styling for light/dark mode easier). */
+function CustomToast({ type, message, height, width }: Toast) {
+  return (
+    <View
+      pointerEvents="box-none"
+      style={{ minHeight: height, width }}
+      className="items-center justify-center"
+    >
+      <View
+        style={{ elevation: 2, shadowColor: "#000" }}
+        className={cn("rounded bg-surface p-2", {
+          "bg-red": type === "error",
+        })}
+      >
+        <Text
+          className={cn("text-center font-roboto text-sm text-foreground", {
+            "text-neutral100": type === "error",
+          })}
+        >
+          {message as string}
+        </Text>
+      </View>
+    </View>
+  );
+}

mobile/src/modules/media/services/Music.ts

@@ -4,9 +4,9 @@
  * This file contains classes containing helpers to manipulate the store.
  */
 
+import { toast } from "@backpackapp-io/react-native-toast";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { eq } from "drizzle-orm";
-import { Toast } from "react-native-toast-notifications";
 import TrackPlayer, { State } from "react-native-track-player";
 import { useStore } from "zustand";
 import {
@@ -27,6 +27,9 @@ import {
 } from "@/db/queries";
 import { formatForMediaCard } from "@/db/utils/formatters";
 
+import i18next from "@/modules/i18n";
+
+import { ToastOptions } from "@/lib/toast";
 import { shuffleArray } from "@/utils/object";
 import { ReservedPlaylists } from "../constants";
 import {
@@ -367,11 +370,11 @@ musicStore.subscribe(
 /** Helpers to manipulate the current queue. */
 export class Queue {
   /** Add a track id at the end of the current queue. */
-  static async add(trackId: string) {
+  static async add(trackId: string, trackName?: string) {
     musicStore.setState((prev) => ({
       queueList: [...prev.queueList, trackId],
     }));
-    Toast.show("Added track to queue.");
+    toast(i18next.t("response.queueAdd", { name: trackName }), ToastOptions);
 
     await RNTPManager.reloadNextTrack();
   }

mobile/src/modules/scanning/helpers/rescan.ts

@@ -1,6 +1,6 @@
+import { toast } from "@backpackapp-io/react-native-toast";
 import { useMutation } from "@tanstack/react-query";
 import { eq } from "drizzle-orm";
-import { Toast } from "react-native-toast-notifications";
 
 import { db } from "@/db";
 import { fileNodes, invalidTracks, tracks } from "@/db/schema";
@@ -9,14 +9,18 @@ import { getTracks } from "@/db/queries";
 import i18next from "@/modules/i18n";
 import { RecentList, Resynchronize } from "@/modules/media/services/Music";
 
+import { ToastOptions } from "@/lib/toast";
 import { batch } from "@/utils/promise";
 import { findAndSaveArtwork, cleanupImages } from "../helpers/artwork";
 import { cleanupDatabase, findAndSaveAudio } from "./audio";
 import { savePathComponents } from "./folder";
 
 /** Look through our library for any new or updated tracks. */
 export async function rescanForTracks() {
-  const toastId = Toast.show(i18next.t("response.scanStart"), { duration: 0 });
+  const toastId = toast(i18next.t("response.scanStart"), {
+    ...ToastOptions,
+    duration: Infinity,
+  });
 
   try {
     // Slight buffer before we run our code due to the code blocking the
@@ -58,14 +62,17 @@ export async function rescanForTracks() {
     // Make sure the "recents" list is correct.
     RecentList.refresh();
 
-    Toast.update(toastId, i18next.t("response.scanSuccess"), {
-      duration: 3000,
+    toast(i18next.t("response.scanSuccess"), {
+      ...ToastOptions,
+      id: toastId,
+      duration: 4000,
     });
   } catch (err) {
     console.log(err);
-    Toast.update(toastId, i18next.t("response.scanFail"), {
-      type: "danger",
-      duration: 3000,
+    toast.error(i18next.t("response.scanFail"), {
+      ...ToastOptions,
+      id: toastId,
+      duration: 4000,
     });
   }
 }

mobile/src/providers/index.tsx

@@ -1,29 +1,33 @@
+import { Toasts } from "@backpackapp-io/react-native-toast";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { SheetProvider } from "react-native-actions-sheet";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import "@/screens/Sheets";
 import { RouteHandlers } from "./RouteHandlers";
 import { ThemeProvider } from "./ThemeProvider";
-import { ToastProvider } from "./ToastProvider";
 
 import { queryClient } from "@/lib/react-query";
 
 /** All providers used by the app. */
 export function AppProvider({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider>
-      <GestureHandlerRootView>
-        <ToastProvider>
+      <SafeAreaProvider>
+        <GestureHandlerRootView>
           <QueryClientProvider client={queryClient}>
             <RouteHandlers />
             <SheetProvider context="global">
-              <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+              <BottomSheetModalProvider>
+                {children}
+                <Toasts />
+              </BottomSheetModalProvider>
             </SheetProvider>
           </QueryClientProvider>
-        </ToastProvider>
-      </GestureHandlerRootView>
+        </GestureHandlerRootView>
+      </SafeAreaProvider>
     </ThemeProvider>
   );
 }