From 73445c8a4ae59f703d593b6d1ff04615f004284a Mon Sep 17 00:00:00 2001
From: Edward A Lopez Mojica <edwardloopez@gmail.com>
Date: Fri, 15 May 2026 22:34:53 -0500
Subject: [PATCH] fix(android): prevent crashes when displaying the mask on
 some Android devices

The radius of the negative circle generated an invalid SVG path (--number) on Android.

Fixes #28
---
 .changeset/full-bikes-taste.md | 5 +++++
 src/ui/Mask.tsx                | 2 +-
 src/ui/shapes.ts               | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/full-bikes-taste.md

diff --git a/.changeset/full-bikes-taste.md b/.changeset/full-bikes-taste.md
new file mode 100644
index 0000000..582279c
--- /dev/null
+++ b/.changeset/full-bikes-taste.md
@@ -0,0 +1,5 @@
+---
+'@edwardloopez/react-native-coachmark': patch
+---
+
+fix(android): avoid invalid SVG path when circle hole has negative dimensions
diff --git a/src/ui/Mask.tsx b/src/ui/Mask.tsx
index 149819a..395e236 100644
--- a/src/ui/Mask.tsx
+++ b/src/ui/Mask.tsx
@@ -91,7 +91,7 @@ export const AnimatedMask: React.FC<{
         if (h.shape === 'circle') {
           const cx = rect.x + rect.width / 2;
           const cy = rect.y + rect.height / 2;
-          const r = Math.max(rect.width, rect.height) / 2;
+          const r = Math.abs(Math.max(rect.width, rect.height) / 2);
           return `M ${cx} ${cy} m -${r},0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
         }
 
diff --git a/src/ui/shapes.ts b/src/ui/shapes.ts
index cefdf16..01a0978 100644
--- a/src/ui/shapes.ts
+++ b/src/ui/shapes.ts
@@ -42,7 +42,7 @@ export function inset(rect: Rect, pad: number): Rect {
 export function pathForCircle(rect: Rect): string {
   const cx = rect.x + rect.width / 2;
   const cy = rect.y + rect.height / 2;
-  const r = Math.max(rect.width, rect.height) / 2;
+  const r = Math.abs(Math.max(rect.width, rect.height) / 2);
   return `M ${cx} ${cy} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
 }