Stable web build

Author: hmziqrs

bun.lockb

@@ -0,0 +1,19 @@
+import { perf } from "@/service/firebase";
+import { captureRef } from "react-native-view-shot";
+import share from "react-native-share";
+
+export async function captureNShare(ref: React.RefObject<any>) {
+  const trace = await perf.startTrace("capture_screenshot");
+
+  const base64 = await captureRef(ref.current, {
+    format: "jpg",
+    quality: 1.0,
+    result: "base64",
+  });
+  await trace.stop();
+
+  await share.open({
+    url: `data:image/jpeg;base64,${base64}`,
+    filename: `rn-loop-game-${new Date().getTime()}.jpg`,
+  });
+}

engine/capture.ts

@@ -0,0 +1,16 @@
+import domtoimage from "dom-to-image";
+
+export async function captureNShare(ref: React.RefObject<any>) {
+  const node = ref.current;
+  if (!node) {
+    return;
+  }
+  const dataUrl = await domtoimage.toPng(node);
+  const shareData = {
+    title: "Loop Game",
+    text: "Check out this level",
+    url: dataUrl,
+    dialogTitle: "Share this level",
+  };
+  await navigator.share(shareData);
+}

engine/capture.web.ts

@@ -1,7 +1,8 @@
-import { Animated, Easing, ViewStyle } from "react-native";
+import { Animated, Easing, Platform, ViewStyle } from "react-native";
 import { useState, useEffect, useMemo } from "react";
 import { captureRef } from "react-native-view-shot";
-import performance from "@react-native-firebase/perf";
+
+import domtoimage from "dom-to-image";
 import share from "react-native-share";
 
 import { rotateBox, calculateSuccess, data2Grid } from "./utils";
@@ -10,6 +11,7 @@ import { GridBox, Level, Theme } from "./types";
 import { levels } from "./levels";
 import { useSettings } from "@/contexts/Settings";
 import Toast from "react-native-toast-message";
+import { captureNShare } from "./capture";
 
 interface Player {
   play: () => void;
@@ -76,26 +78,14 @@ export default function useEngine(forceLevel: number): EngineReturn {
 
   async function capture(ref: React.RefObject<any>): Promise<void> {
     try {
-      // const trace = await performance().startTrace("capture_screenshot");
-
-      const base64 = await captureRef(ref.current, {
-        format: "jpg",
-        quality: 1.0,
-        result: "base64",
-      });
-
-
-      await share.open({
-        url: `data:image/jpeg;base64,${base64}`,
-        filename: `rn-loop-game-${new Date().getTime()}.jpg`,
-      });
+      captureNShare(ref);
       // settings
     } catch (e) {
       console.error(e);
       Toast.show({
         type: "error",
         text1: "Error",
-        text2:  (e as any)?.message ?? "Failed to share screenshot",
+        text2: (e as any)?.message ?? "Failed to share screenshot",
       });
       // player.play();
     }

engine/index.ts

@@ -28,6 +28,7 @@
     "@react-navigation/native": "7.0.0",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
+    "dom-to-image": "^2.6.0",
     "expo": "52.0.3",
     "expo-av": "^15.0.1",
     "expo-build-properties": "~0.13.1",
@@ -60,6 +61,7 @@
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@types/color": "^4.2.0",
+    "@types/dom-to-image": "^2.6.7",
     "@types/jest": "^29.5.12",
     "@types/react": "18.3.12",
     "@types/react-test-renderer": "^18.0.7",

package.json

@@ -4,17 +4,6 @@ import { getPerformance } from "@react-native-firebase/perf";
 import { getCrashlytics } from "@react-native-firebase/crashlytics";
 import { getMessaging } from "@react-native-firebase/messaging";
 
-// const firebaseConfig = {
-//   apiKey: "AIzaSyD9rrkA8cKlH_T3xrtE2skJrnwIgtxQI9U",
-//   authDomain: "react-native-loop.firebaseapp.com",
-//   databaseURL: "https://react-native-loop.firebaseio.com",
-//   projectId: "react-native-loop",
-//   storageBucket: "react-native-loop.firebasestorage.app",
-//   messagingSenderId: "344714598000",
-//   appId: "1:344714598000:web:87571534b75fa95cbc86b5",
-//   measurementId: "G-89T9V4Y6DE",
-// };
-
 export const app = getApp();
 export const analytics = getAnalytics(app);
 export const perf = getPerformance();

service/firebase.ts

@@ -0,0 +1,19 @@
+import { initializeApp } from "@react-native-firebase/app";
+import { getAnalytics } from "@react-native-firebase/analytics";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyD9rrkA8cKlH_T3xrtE2skJrnwIgtxQI9U",
+  authDomain: "react-native-loop.firebaseapp.com",
+  databaseURL: "https://react-native-loop.firebaseio.com",
+  projectId: "react-native-loop",
+  storageBucket: "react-native-loop.firebasestorage.app",
+  messagingSenderId: "344714598000",
+  appId: "1:344714598000:web:87571534b75fa95cbc86b5",
+  measurementId: "G-89T9V4Y6DE",
+};
+
+export const app = initializeApp(firebaseConfig);
+export const analytics = getAnalytics(app);
+export const perf = {};
+export const crashlytics = {};
+export const messaging = {};