@forthtilliath/react-native-kit 0.18.0 → 0.20.0

package/dist/hooks/useViewShare.js

@@ -0,0 +1,75 @@
+import { useRef, useState } from "react";
+import { Alert } from "react-native";
+import { useKitLocale } from "../i18n/locale.js";
+import { shareViewAsImage, } from "../utils/helpers/shareViewAsImage.js";
+const defaultErrorLabels = {
+    fr: {
+        errorTitle: "Partage impossible",
+        errorMessage: "L'image n'a pas pu être créée.",
+    },
+    en: {
+        errorTitle: "Couldn't share",
+        errorMessage: "The image couldn't be created.",
+    },
+};
+/** Resolves once React has rendered the last state change and native drew it. */
+function nextFrames() {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                resolve();
+            });
+        });
+    });
+}
+/**
+ * Shares as an image a view rendered on demand (a scoreboard, a summary card
+ * that isn't on screen): `capturing` is `true` while the capture runs — the
+ * screen mounts the view attached to `ref` (off screen, `collapsable={false}`)
+ * only meanwhile — and `share()` waits two frames for it to be drawn before
+ * capturing it with {@link shareViewAsImage}. A second `share()` while one is
+ * running is ignored.
+ *
+ * @example
+ * ```tsx
+ * const ranking = useViewShare({ dialogTitle: "Partager le classement" });
+ *
+ * <Button title="Partager" onPress={() => void ranking.share()} />
+ * {ranking.capturing ? (
+ *   <View ref={ranking.ref} collapsable={false} style={offScreen}>
+ *     <RankingCard />
+ *   </View>
+ * ) : null}
+ * ```
+ */
+export function useViewShare({ onError, errorTitle, errorMessage, ...options } = {}) {
+    const ref = useRef(null);
+    const [capturing, setCapturing] = useState(false);
+    // Ahead of `capturing`, which only changes on the next render.
+    const busyRef = useRef(false);
+    const locale = useKitLocale(options.locale);
+    const defaults = defaultErrorLabels[locale];
+    async function share() {
+        if (busyRef.current)
+            return;
+        busyRef.current = true;
+        setCapturing(true);
+        try {
+            await nextFrames();
+            await shareViewAsImage(ref, { ...options, locale });
+        }
+        catch (error) {
+            if (onError)
+                onError(error);
+            else
+                Alert.alert(errorTitle ?? defaults.errorTitle, error instanceof Error && error.message
+                    ? error.message
+                    : (errorMessage ?? defaults.errorMessage));
+        }
+        finally {
+            busyRef.current = false;
+            setCapturing(false);
+        }
+    }
+    return { ref, capturing, share };
+}

package/dist/utils/helpers/shareViewAsImage.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import type { ComponentRef, RefObject } from "react";
 import type { View } from "react-native";
 import { type ShareFileOptions } from "./shareFile.js";
 export type ShareViewAsImageOptions = Omit<ShareFileOptions, "mimeType"> & {
@@ -12,10 +12,12 @@ export type ShareViewAsImageOptions = Omit<ShareFileOptions, "mimeType"> & {
  * module is known to be there: on a binary built without it, only this
  * feature fails — with a user-facing `Error` — instead of the whole screen.
  *
- * @param view - Ref of the view to capture (`collapsable={false}` on Android).
+ * @param view - Ref of the view to capture (`collapsable={false}` on Android),
+ *   as `useRef<ComponentRef<typeof View>>(null)` gives — `View` is the
+ *   component, not its instance type.
  * @param options - See {@link ShareViewAsImageOptions} and `shareFile`.
  * @example
  * await shareViewAsImage(rankingRef, { dialogTitle: "Partager le classement" });
  */
-export declare function shareViewAsImage(view: RefObject<View | null>, { captureUnavailableMessage, ...options }?: ShareViewAsImageOptions): Promise<void>;
+export declare function shareViewAsImage(view: RefObject<ComponentRef<typeof View> | null>, { captureUnavailableMessage, ...options }?: ShareViewAsImageOptions): Promise<void>;
 //# sourceMappingURL=shareViewAsImage.d.ts.map

package/dist/utils/helpers/shareViewAsImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shareViewAsImage.d.ts","sourceRoot":"","sources":["../../../src/utils/helpers/shareViewAsImage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACzE,wEAAwE;IACxE,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAOF;;;;;;;;;;;GAWG;AACH,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,EAC5B,EAAE,yBAAyB,EAAE,GAAG,OAAO,EAAE,GAAE,uBAA4B,GACtE,OAAO,CAAC,IAAI,CAAC,CAcf"}
+{"version":3,"file":"shareViewAsImage.d.ts","sourceRoot":"","sources":["../../../src/utils/helpers/shareViewAsImage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG;IACzE,wEAAwE;IACxE,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAOF;;;;;;;;;;;;;GAaG;AACH,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,SAAS,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,EACjD,EAAE,yBAAyB,EAAE,GAAG,OAAO,EAAE,GAAE,uBAA4B,GACtE,OAAO,CAAC,IAAI,CAAC,CAcf"}

package/dist/utils/helpers/shareViewAsImage.js

@@ -12,7 +12,9 @@ const defaultCaptureUnavailableMessages = {
  * module is known to be there: on a binary built without it, only this
  * feature fails — with a user-facing `Error` — instead of the whole screen.
  *
- * @param view - Ref of the view to capture (`collapsable={false}` on Android).
+ * @param view - Ref of the view to capture (`collapsable={false}` on Android),
+ *   as `useRef<ComponentRef<typeof View>>(null)` gives — `View` is the
+ *   component, not its instance type.
  * @param options - See {@link ShareViewAsImageOptions} and `shareFile`.
  * @example
  * await shareViewAsImage(rankingRef, { dialogTitle: "Partager le classement" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -22,7 +22,7 @@
     "./*": "./dist/*.js"
   },
   "dependencies": {
-    "@forthtilliath/ts-kit": "^0.13.0"
+    "@forthtilliath/ts-kit": "^0.15.0"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
@@ -83,7 +83,7 @@
     "@size-limit/file": "^14.1.0",
     "@types/react": "^19.2.18",
     "@types/react-test-renderer": "^19.1.0",
-    "@vitest/coverage-v8": "5.0.2",
+    "@vitest/coverage-v8": "5.0.5",
     "eslint": "10.7.0",
     "expo-calendar": "~57.0.5",
     "expo-file-system": "~57.0.2",
@@ -101,16 +101,16 @@
     "react-test-renderer": "19.2.3",
     "size-limit": "^14.1.0",
     "typescript": "^5.9.3",
-    "vitest": "^5.0.2",
-    "@forthtilliath/eslint-config": "0.9.0",
-    "@forthtilliath/expo-release-updates-ui": "^0.4.1",
-    "@forthtilliath/typescript-config": "0.1.1"
+    "vitest": "^5.0.5",
+    "@forthtilliath/eslint-config": "0.10.0",
+    "@forthtilliath/typescript-config": "0.1.1",
+    "@forthtilliath/expo-release-updates-ui": "^0.5.1"
   },
   "size-limit": [
     {
       "name": "dist (all modules, brotli)",
       "path": "dist/**/*.js",
-      "limit": "44 KB"
+      "limit": "47 KB"
     }
   ],
   "scripts": {