mobile: fix picking themes from file

apps/mobile/app/screens/settings/theme-selector.tsx

@@ -28,7 +28,7 @@ import type {
   ThemeMetadata,
   ThemesRouter
 } from "@notesnook/themes-server";
-import { pick } from "@react-native-documents/picker";
+import { keepLocalCopy, pick } from "@react-native-documents/picker";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
@@ -57,6 +57,7 @@ import { getColorLinearShade } from "../../utils/colors";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
 import { LegendList } from "@legendapp/list";
+import ReactNativeBlobUtil from "react-native-blob-util";
 
 const THEME_SERVER_URL = "https://themes-api.notesnook.com";
 //@ts-ignore
@@ -412,20 +413,39 @@ function ThemeSelector() {
               type={"secondaryAccented"}
               icon="folder"
               fontSize={AppFontSize.xs}
-              onPress={() => {
-                pick({
-                  allowMultiSelection: false
-                }).then((r) => {
-                  fetch(r[0].uri).then(async (response) => {
-                    const json = await response.json();
-                    const result = validateTheme(json);
-                    if (result.error) {
-                      ToastManager.error(new Error(result.error));
-                      return;
-                    }
-                    select(json, true);
+              onPress={async () => {
+                try {
+                  const pickResponse = await pick({
+                    allowMultiSelection: false
                   });
-                });
+                  const copiedFile = await keepLocalCopy({
+                    destination: "cachesDirectory",
+                    files: [
+                      {
+                        uri: pickResponse[0].uri,
+                        fileName: pickResponse[0].name || "theme.json"
+                      }
+                    ]
+                  });
+                  if (copiedFile[0].status !== "success") return;
+
+                  const themeJson = await ReactNativeBlobUtil.fs.readFile(
+                    copiedFile[0].localUri,
+                    "utf8"
+                  );
+                  ReactNativeBlobUtil.fs
+                    .unlink(copiedFile[0].localUri)
+                    .catch(() => {});
+                  const json = JSON.parse(themeJson);
+                  const result = validateTheme(json);
+                  if (result.error) {
+                    ToastManager.error(new Error(result.error));
+                    return;
+                  }
+                  select(json, true);
+                } catch (e) {
+                  ToastManager.error(e as Error);
+                }
               }}
             />
           </View>