related-ui-components 1.9.6 → 1.9.7

package/lib/commonjs/components/RedemptionOption/README.md

@@ -0,0 +1,148 @@
+# RedemptionOption Component
+
+A flexible, customizable touchable option component for React Native applications with support for icons, vertical/horizontal layouts, active states, and extensive styling options.
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { RedemptionOption } from '@your-org/component-library';
+import { GiftIcon } from '@your-org/icons';
+
+const RewardsScreen = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <RedemptionOption
+        icon={<GiftIcon size={24} color="#FFFFFF" />}
+        text="Redeem Points"
+        onPress={() => console.log('Option pressed')}
+      />
+    </View>
+  );
+};
+
+export default RewardsScreen;
+```
+
+## Props
+
+The `RedemptionOption` component provides extensive customization options through its props.
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `icon` | `React.ReactNode` | ✅ | - | Icon component to display in the option |
+| `text` | `string` | ✅ | - | Text label to display with the icon |
+
+### Layout & Appearance Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `orientation` | `"vertical" \| "horizontal"` | ❌ | `"vertical"` | Determines the layout direction of icon and text |
+| `backgroundColor` | `string` | ❌ | theme.primary | Background color of the option |
+| `textColor` | `string` | ❌ | theme.secondary | Color of the text label |
+| `width` | `number \| string` | ❌ | - | Width of the option component |
+| `height` | `number \| string` | ❌ | - | Height of the option component |
+| `borderRadius` | `number` | ❌ | `8` | Corner radius of the option component |
+| `padding` | `number` | ❌ | `12` | Padding inside the option component |
+| `fontSize` | `number` | ❌ | `14` | Base font size for the text (actual size will be 90% of this value) |
+
+### State Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `disabled` | `boolean` | ❌ | `false` | Whether the option is disabled (reduces opacity and prevents interaction) |
+| `isActive` | `boolean` | ❌ | `false` | Whether the option is in active state (adds a border) |
+| `activeOpacityValue` | `number` | ❌ | `0.7` | The opacity value when the button is pressed |
+
+### Style Customization
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
+| `textStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text label |
+| `iconContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the icon |
+
+### Behavior Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onPress` | `() => void` | ❌ | - | Function to call when the option is pressed |
+
+## Examples
+
+### Vertical Layout (Default)
+
+```jsx
+<RedemptionOption
+  icon={<CoinIcon size={24} color="#FFD700" />}
+  text="Redeem Coins"
+  onPress={() => handleRedemption('coins')}
+  backgroundColor="#2C3E50"
+  textColor="#FFFFFF"
+/>
+```
+
+### Horizontal Layout
+
+```jsx
+<RedemptionOption
+  icon={<TicketIcon size={20} color="#FF5722" />}
+  text="Movie Tickets"
+  orientation="horizontal"
+  onPress={() => handleRedemption('tickets')}
+  width="100%"
+  padding={16}
+/>
+```
+
+### Active State
+
+```jsx
+<RedemptionOption
+  icon={<StarIcon size={22} color="#FFD700" />}
+  text="Premium Rewards"
+  isActive={selectedReward === 'premium'}
+  onPress={() => setSelectedReward('premium')}
+  backgroundColor="#1E88E5"
+  textColor="#FFFFFF"
+/>
+```
+
+### Disabled State
+
+```jsx
+<RedemptionOption
+  icon={<LockIcon size={20} color="#9E9E9E" />}
+  text="Locked Reward"
+  disabled={!hasEnoughPoints}
+  onPress={() => handleRedemption('locked')}
+  backgroundColor="#ECEFF1"
+  textColor="#757575"
+/>
+```
+
+### Custom Styling
+
+```jsx
+<RedemptionOption
+  icon={<GiftIcon size={28} color="#E91E63" />}
+  text="Special Offer"
+  containerStyle={{
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 5,
+  }}
+  iconContainerStyle={{
+    backgroundColor: 'rgba(233, 30, 99, 0.1)', 
+    borderRadius: 20,
+    padding: 8
+  }}
+  textStyle={{ fontWeight: 'bold', letterSpacing: 0.5 }}
+  onPress={() => handleSpecialOffer()}
+/>
+```

package/lib/commonjs/components/RedemptionOption/RedemptionOption.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _index = require("../../theme/index.js");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RedemptionOption = ({
+  icon,
+  text,
+  orientation = "vertical",
+  backgroundColor,
+  textColor,
+  width,
+  height,
+  borderRadius = 8,
+  padding = 12,
+  fontSize = 14,
+  disabled = false,
+  isActive = false,
+  onPress,
+  containerStyle,
+  textStyle,
+  iconContainerStyle,
+  activeOpacityValue = 0.7,
+  isRTL
+}) => {
+  const {
+    theme,
+    isRTL: rtl
+  } = (0, _index.useTheme)();
+  isRTL = isRTL || rtl;
+  textColor = textColor || theme.onSurface;
+
+  // Dynamic styles based on props
+  let dynamicContainerStyle = {
+    backgroundColor: backgroundColor || theme.surface,
+    borderRadius,
+    padding,
+    borderWidth: isActive ? 2 : 0,
+    borderColor: isActive ? textColor : undefined
+  };
+  if (width) dynamicContainerStyle.width = width;
+  if (height) dynamicContainerStyle.height = height;
+  const dynamicTextStyle = {
+    color: textColor,
+    fontSize: fontSize * 0.9,
+    lineHeight: fontSize * 1.1
+  };
+
+  // Determine horizontal flex direction based on RTL
+  const horizontalDirection = {
+    flexDirection: isRTL ? 'row-reverse' : 'row',
+    justifyContent: "flex-start",
+    alignItems: "center"
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.container, orientation === "vertical" ? styles.vertical : horizontalDirection, dynamicContainerStyle, disabled && styles.disabled, containerStyle],
+    onPress: onPress,
+    disabled: disabled,
+    activeOpacity: activeOpacityValue,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled,
+      selected: isActive
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.iconContainer, orientation === "horizontal" && (isRTL ? {
+        marginLeft: 12,
+        marginRight: 0
+      } : {
+        marginRight: 12,
+        marginLeft: 0
+      }), iconContainerStyle],
+      children: icon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        minHeight: 40,
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.text, orientation === "horizontal" ? {} : styles.textVertical, dynamicTextStyle, textStyle],
+        numberOfLines: 2,
+        ellipsizeMode: "tail",
+        adjustsFontSizeToFit: orientation === "vertical",
+        minimumFontScale: 0.8,
+        children: text
+      })
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  vertical: {
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  horizontal: {
+    // Base horizontal style is now handled dynamically with RTL support
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  },
+  iconContainer: {
+    // marginBottom: 8,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  iconHorizontal: {
+    // This is now handled dynamically with RTL support
+    marginBottom: 0,
+    marginRight: 12
+  },
+  text: {
+    fontWeight: "500"
+  },
+  textVertical: {
+    textAlign: "center"
+  },
+  disabled: {
+    opacity: 0.6
+  }
+});
+var _default = exports.default = RedemptionOption;
+//# sourceMappingURL=RedemptionOption.js.map

package/lib/commonjs/components/RedemptionOption/RedemptionOption.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_index","require","_react","_interopRequireDefault","_reactNative","_jsxRuntime","e","__esModule","default","RedemptionOption","icon","text","orientation","backgroundColor","textColor","width","height","borderRadius","padding","fontSize","disabled","isActive","onPress","containerStyle","textStyle","iconContainerStyle","activeOpacityValue","isRTL","theme","rtl","useTheme","onSurface","dynamicContainerStyle","surface","borderWidth","borderColor","undefined","dynamicTextStyle","color","lineHeight","horizontalDirection","flexDirection","justifyContent","alignItems","jsxs","TouchableOpacity","style","styles","container","vertical","activeOpacity","accessibilityRole","accessibilityState","selected","children","jsx","View","iconContainer","marginLeft","marginRight","minHeight","Text","textVertical","numberOfLines","ellipsizeMode","adjustsFontSizeToFit","minimumFontScale","StyleSheet","create","horizontal","iconHorizontal","marginBottom","fontWeight","textAlign","opacity","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RedemptionOption/RedemptionOption.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/RedemptionOption/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  RedemptionOption: true
+};
+Object.defineProperty(exports, "RedemptionOption", {
+  enumerable: true,
+  get: function () {
+    return _RedemptionOption.default;
+  }
+});
+var _RedemptionOption = _interopRequireWildcard(require("./RedemptionOption.js"));
+Object.keys(_RedemptionOption).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RedemptionOption[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RedemptionOption[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/RedemptionOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_RedemptionOption","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/RedemptionOption/index.ts"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,iBAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,iBAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,iBAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAAmC,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAtB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAuB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAAnB,cAAA,CAAAC,IAAA,CAAAO,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAtB,MAAA,CAAAuB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAA1B,MAAA,CAAAS,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/components/ScratchCard/README.md

@@ -0,0 +1,119 @@
+## ScratchCard Documentation
+
+The `ScratchCard` is an interactive component that creates a scratch-to-reveal experience commonly used for promotions, rewards, and gamification features. It leverages the Shopify React Native Skia library to provide a smooth scratching animation with customizable appearance. The component tracks scratching progress and can trigger an action when a sufficient area has been revealed.
+
+### Usage
+
+```tsx
+import ScratchCard from "@/components/ScratchCard/ScratchCard";
+import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
+import { Image, Text, View } from "react-native";
+
+const MyComponent = () => {
+  const handleRevealed = () => {
+    // Handle card fully revealed action
+    console.log("Scratch card revealed!");
+  };
+
+  return (
+    <View style={{ width: 300, height: 200 }}>
+      <ScratchCard 
+        image={require("@/assets/images/scratch_foreground.png")}
+        onScratched={handleRevealed}
+        brushStrokeWidth={40}
+        revealThreshold={0.7}
+      >
+        <ScratchCardContent>
+          <Image 
+            source={require("@/assets/images/reward-banner.png")} 
+            style={{ width: 250, height: 150 }}
+          />
+        </ScratchCardContent>
+      </ScratchCard>
+    </View>
+  );
+};
+
+export default MyComponent;
+```
+
+### Text-Based Example
+
+```tsx
+<ScratchCard 
+  backgroundColor="#8A2BE2"
+  text="Scratch to reveal your prize!"
+  textFontColor="#FFFFFF"
+  textFontSize={18}
+  width={300}
+  height={150}
+  onScratched={() => alert("Congratulations! You won a prize!")}
+>
+  <ScratchCardContent style={{ backgroundColor: "#FFD700" }}>
+    <Text style={{ fontSize: 24, fontWeight: "bold", color: "#000" }}>
+      50% OFF COUPON
+    </Text>
+    <Text style={{ marginTop: 8, color: "#333" }}>
+      Use code: SCRATCH50
+    </Text>
+  </ScratchCardContent>
+</ScratchCard>
+```
+
+### Props
+
+#### Core Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the container |
+| `children` | `React.ReactNode` | Required | Content to reveal underneath the scratch layer |
+| `image` | `ImageSourcePropType` | `null` | Image to use as the scratch layer |
+| `width` | `number` | `300` | Width of the scratch card |
+| `height` | `number` | `300` | Height of the scratch card |
+| `onScratched` | `() => void` | `undefined` | Function to call when scratch threshold is reached |
+
+#### Scratch Behavior Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `brushStrokeWidth` | `number` | `50` | Width of the scratching stroke |
+| `revealThreshold` | `number` | `0.8` | Percentage (0.0-1.0) that needs to be scratched to trigger the reveal |
+
+#### Appearance Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundColor` | `string` | `"#CCCCCC"` | Background color of the scratch layer (used if no image is provided) |
+| `text` | `string` | `""` | Optional text to display on the scratch layer |
+| `textFont` | `ImageSourcePropType` | `undefined` (required if text is present) | Font for the scratch layer text |
+| `textFontColor` | `string` | `"#CCCCCC"` | Color for the scratch layer text |
+| `textFontSize` | `number` | `16` | Font size for the scratch layer text |
+
+### ScratchCardContent
+
+The `ScratchCardContent` is a companion component that provides styling for the content underneath the scratch layer.
+
+#### Usage
+
+```tsx
+import ScratchCardContent from "@/components/ScratchCard/ScratchCardContent";
+
+<ScratchCardContent style={{ backgroundColor: "#f5f5f5" }}>
+  <Text>Your revealed content here</Text>
+</ScratchCardContent>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | Required | Content to display underneath the scratch layer |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the content container |
+
+### Related Components
+
+- `ScratchCardContent`: Used for styling the revealed content
+- `Image`: Used to display images in the scratch content or as the scratch layer
+- `Text`: Used to display text in both the scratch layer and revealed content
+- `View`: The foundation component for layout structure

package/lib/commonjs/components/ScratchCard/ScratchCard.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ScratchCard = ({
+  style,
+  children,
+  image,
+  brushStrokeWidth = 50,
+  revealThreshold = 0.8,
+  width = 300,
+  height = 300,
+  backgroundColor = "#CCCCCC",
+  text = "",
+  textFont,
+  textFontColor = "#CCCCCC",
+  textFontSize = 16,
+  onScratched,
+  gradient
+}) => {
+  const loadedImg = (0, _reactNativeSkia.useImage)(image);
+  const loadedFont = (0, _reactNativeSkia.useFont)(textFont, textFontSize);
+  const [[areaWidth, areaHeight], setSize] = (0, _react.useState)([0, 0]);
+  const [isScratched, setScratched] = (0, _react.useState)(false);
+  const [isLayoutReady, setLayoutReady] = (0, _react.useState)(false);
+  const isThresholdReached = (0, _reactNativeReanimated.useSharedValue)(false);
+  const path = (0, _reactNativeReanimated.useSharedValue)(_reactNativeSkia.Skia.Path.Make());
+  (0, _react.useEffect)(() => {
+    path.value = _reactNativeSkia.Skia.Path.Make();
+    isThresholdReached.value = false;
+    setScratched(false);
+  }, [areaWidth, areaHeight]);
+  const handleLayout = (0, _react.useCallback)(event => {
+    const {
+      width: newWidth,
+      height: newHeight
+    } = event.nativeEvent.layout;
+    if (newWidth > 0 && newHeight > 0) {
+      if (newWidth !== areaWidth || newHeight !== areaHeight) {
+        setSize([newWidth, newHeight]);
+      }
+      if (!isLayoutReady) {
+        setLayoutReady(true);
+      }
+    } else {
+      setLayoutReady(false);
+    }
+  }, [areaWidth, areaHeight, isLayoutReady]);
+  const revealCardOnJS = (0, _react.useCallback)(() => {
+    setScratched(true);
+    onScratched?.();
+  }, [onScratched]);
+  const pan = _reactNativeGestureHandler.Gesture.Pan().averageTouches(true).maxPointers(1).onBegin(e => {
+    if (!isLayoutReady) return;
+    try {
+      const newPath = path.value.copy();
+      newPath.moveTo(e.x, e.y);
+      newPath.lineTo(e.x + 0.001, e.y + 0.001);
+      path.value = newPath;
+      (0, _reactNativeSkia.notifyChange)(path);
+    } catch (error) {
+      console.error("ScratchCard: Error in onBegin:", error);
+    }
+  }).onChange(e => {
+    if (!isLayoutReady || isThresholdReached.value) return;
+    try {
+      const newPath = path.value.copy();
+      newPath.lineTo(e.x, e.y);
+      path.value = newPath;
+      (0, _reactNativeSkia.notifyChange)(path);
+      const bounds = path.value.getBounds();
+      if (!bounds || areaWidth <= 0 || areaHeight <= 0) {
+        return;
+      }
+      const scratchedArea = bounds.width * bounds.height;
+      const totalArea = areaWidth * areaHeight;
+      if (totalArea > 0 && scratchedArea / totalArea > revealThreshold) {
+        if (!isThresholdReached.value) {
+          isThresholdReached.value = true;
+          (0, _reactNativeReanimated.runOnJS)(revealCardOnJS)();
+        }
+      }
+    } catch (error) {
+      console.error("ScratchCard: Error in onChange (UI Thread):", error);
+    }
+  });
+  const textMetrics = _react.default.useMemo(() => {
+    if (loadedFont && text && areaWidth > 0 && areaHeight > 0) {
+      const metrics = loadedFont.measureText(text);
+      const textX = areaWidth / 2 - metrics.width / 2;
+      const textY = areaHeight / 2 + metrics.height / 3;
+      return {
+        x: textX,
+        y: textY,
+        width: metrics.width,
+        height: metrics.height
+      };
+    }
+    return null;
+  }, [loadedFont, text, areaWidth, areaHeight]);
+  const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
+    style: {
+      justifyContent: "center",
+      alignContent: "center"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      onLayout: handleLayout,
+      style: [styles.container, style, {
+        width,
+        height
+      }],
+      children: [canRenderCanvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.content,
+        children: children
+      }), !isScratched && canRenderCanvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+        gesture: pan,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
+          style: styles.canvas,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Mask, {
+            mode: "luminance",
+            mask: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
+                x: 0,
+                y: 0,
+                width: areaWidth,
+                height: areaHeight,
+                color: "white"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
+                path: path,
+                color: "black",
+                style: "stroke",
+                strokeJoin: "round",
+                strokeCap: "round",
+                strokeWidth: brushStrokeWidth
+              })]
+            }),
+            children: loadedImg ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Image, {
+              image: loadedImg,
+              fit: "cover",
+              x: 0,
+              y: 0,
+              width: areaWidth,
+              height: areaHeight
+            }) : gradient ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.LinearGradient, {
+                start: gradient.start ?? {
+                  x: 0,
+                  y: 0
+                },
+                end: gradient.end ?? {
+                  x: areaWidth,
+                  y: areaHeight
+                },
+                colors: gradient.colors
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
+                x: 0,
+                y: 0,
+                width: areaWidth,
+                height: areaHeight
+              }), loadedFont && textMetrics && text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
+                x: textMetrics.x,
+                y: textMetrics.y,
+                text: text,
+                color: textFontColor,
+                font: loadedFont
+              }) : null]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
+                x: 0,
+                y: 0,
+                width: areaWidth,
+                height: areaHeight,
+                color: backgroundColor
+              }), loadedFont && textMetrics && text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
+                x: textMetrics.x,
+                y: textMetrics.y,
+                text: text,
+                color: textFontColor,
+                font: loadedFont
+              }) : null]
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: "relative",
+    overflow: "hidden"
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1
+  },
+  canvas: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 2
+  }
+});
+var _default = exports.default = ScratchCard;
+//# sourceMappingURL=ScratchCard.js.map