related-ui-components 1.6.1 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/commonjs/components/ScratchCard/ScratchCard.js +55 -92
  2. package/lib/commonjs/components/ScratchCard/ScratchCard.js.map +1 -1
  3. package/lib/module/components/ScratchCard/ScratchCard.js +59 -103
  4. package/lib/module/components/ScratchCard/ScratchCard.js.map +1 -1
  5. package/lib/typescript/commonjs/components/ScratchCard/ScratchCard.d.ts.map +1 -1
  6. package/lib/typescript/module/components/ScratchCard/ScratchCard.d.ts.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/ScratchCard/ScratchCard.tsx +100 -151
package/lib/commonjs/components/ScratchCard/ScratchCard.js CHANGED
@@ -12,15 +12,10 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
13
  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); }
14
14
  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; }
15
- // Import runOnJS and useSharedValue
16
-
17
- // Ignore specific warning if it appears, related to path mutation - use cautiously
18
- // LogBox.ignoreLogs(['Skia: SkPath.Make()']);
19
-
20
15
  const ScratchCard = ({
21
16
  style,
22
17
  children,
23
- image,
18
+ image = null,
24
19
  brushStrokeWidth = 50,
25
20
  revealThreshold = 0.8,
26
21
  width = 300,
@@ -32,89 +27,57 @@ const ScratchCard = ({
32
27
  textFontSize = 16,
33
28
  onScratched
34
29
  }) => {
35
- const loadedImg = (0, _reactNativeSkia.useImage)(image);
36
- const loadedFont = (0, _reactNativeSkia.useFont)(textFont, textFontSize);
30
+ const img = (0, _reactNativeSkia.useImage)(image);
31
+ const font = (0, _reactNativeSkia.useFont)(textFont, textFontSize);
37
32
  const [[areaWidth, areaHeight], setSize] = (0, _react.useState)([0, 0]);
38
33
  const [isScratched, setScratched] = (0, _react.useState)(false);
39
- const [isLayoutReady, setLayoutReady] = (0, _react.useState)(false);
40
- const isThresholdReached = (0, _reactNativeReanimated.useSharedValue)(false);
41
- const path = (0, _reactNativeReanimated.useSharedValue)(_reactNativeSkia.Skia.Path.Make());
42
- (0, _react.useEffect)(() => {
43
- path.value = _reactNativeSkia.Skia.Path.Make();
44
- isThresholdReached.value = false;
45
- setScratched(false);
46
- }, [areaWidth, areaHeight]);
47
- const handleLayout = (0, _react.useCallback)(event => {
48
- const {
49
- width: newWidth,
50
- height: newHeight
51
- } = event.nativeEvent.layout;
52
- if (newWidth > 0 && newHeight > 0) {
53
- if (newWidth !== areaWidth || newHeight !== areaHeight) {
54
- setSize([newWidth, newHeight]);
55
- }
56
- if (!isLayoutReady) {
57
- setLayoutReady(true);
34
+ const path = (0, _reactNativeReanimated.useSharedValue)(_reactNativeSkia.Skia.Path.Make().moveTo(0, 0));
35
+
36
+ //Check scratch progress
37
+ const checkScratchProgress = () => {
38
+ const bounds = path.value.getBounds();
39
+ const scratchedArea = bounds.height * bounds.width;
40
+ const totalArea = areaWidth * areaHeight;
41
+ if (scratchedArea / totalArea > revealThreshold && !isScratched) {
42
+ setScratched(true);
43
+ if (onScratched) {
44
+ onScratched();
58
45
  }
59
- } else {
60
- setLayoutReady(false);
61
46
  }
62
- }, [areaWidth, areaHeight, isLayoutReady]);
63
- const revealCardOnJS = (0, _react.useCallback)(() => {
64
- setScratched(true);
65
- onScratched?.();
66
- }, [onScratched]);
47
+ };
48
+ (0, _react.useEffect)(() => {
49
+ console.log("HI");
50
+ }, [path]);
67
51
  const pan = _reactNativeGestureHandler.Gesture.Pan().averageTouches(true).maxPointers(1).onBegin(e => {
68
- if (!isLayoutReady) return;
69
- try {
70
- const newPath = path.value.copy();
71
- newPath.moveTo(e.x, e.y);
72
- newPath.lineTo(e.x + 0.001, e.y + 0.001);
73
- path.value = newPath;
74
- (0, _reactNativeSkia.notifyChange)(path);
75
- } catch (error) {
76
- console.error("ScratchCard: Error in onBegin:", error);
77
- }
52
+ path.value.moveTo(e.x, e.y);
53
+ path.value.lineTo(e.x, e.y);
54
+ (0, _reactNativeSkia.notifyChange)(path);
78
55
  }).onChange(e => {
79
- if (!isLayoutReady || isThresholdReached.value) return;
80
56
  try {
81
- const newPath = path.value.copy();
82
- newPath.lineTo(e.x, e.y);
83
- path.value = newPath;
57
+ // checkScratchProgress();
58
+ path.value.lineTo(e.x, e.y);
84
59
  (0, _reactNativeSkia.notifyChange)(path);
85
- const bounds = path.value.getBounds();
86
- if (!bounds || areaWidth <= 0 || areaHeight <= 0) {
87
- return;
88
- }
89
- const scratchedArea = bounds.width * bounds.height;
90
- const totalArea = areaWidth * areaHeight;
91
- if (totalArea > 0 && scratchedArea / totalArea > revealThreshold) {
92
- if (!isThresholdReached.value) {
93
- isThresholdReached.value = true;
94
- (0, _reactNativeReanimated.runOnJS)(revealCardOnJS)();
95
- }
96
- }
60
+ // const bounds = path.value.getBounds();
61
+ // const scratchedArea = bounds.height * bounds.width;
62
+ // const totalArea = areaWidth * areaHeight;
63
+
64
+ // if (scratchedArea / totalArea > revealThreshold && !isScratched) {
65
+ // console.log("SCRATCHED")
66
+ // // setScratched(true);
67
+ // // if (onScratched) {
68
+ // // onScratched();
69
+ // // }
70
+ // }
97
71
  } catch (error) {
98
- console.error("ScratchCard: Error in onChange (UI Thread):", error);
72
+ console.log(error);
99
73
  }
74
+
75
+ // checkScratchProgress();
100
76
  });
101
- const textMetrics = _react.default.useMemo(() => {
102
- if (loadedFont && text && areaWidth > 0 && areaHeight > 0) {
103
- const metrics = loadedFont.measureText(text);
104
- const textX = areaWidth / 2 - metrics.width / 2;
105
- const textY = areaHeight / 2 + metrics.height / 3;
106
- return {
107
- x: textX,
108
- y: textY,
109
- width: metrics.width,
110
- height: metrics.height
111
- };
112
- }
113
- return null;
114
- }, [loadedFont, text, areaWidth, areaHeight]);
115
- const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
116
77
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
117
- onLayout: handleLayout,
78
+ onLayout: e => {
79
+ setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
80
+ },
118
81
  style: [styles.container, style, {
119
82
  width,
120
83
  height
@@ -122,7 +85,7 @@ const ScratchCard = ({
122
85
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
123
86
  style: styles.content,
124
87
  children: children
125
- }), !isScratched && canRenderCanvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
88
+ }), !isScratched && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
126
89
  gesture: pan,
127
90
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Canvas, {
128
91
  style: styles.canvas,
@@ -132,8 +95,8 @@ const ScratchCard = ({
132
95
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Rect, {
133
96
  x: 0,
134
97
  y: 0,
135
- width: areaWidth,
136
- height: areaHeight,
98
+ width: 1000,
99
+ height: 1000,
137
100
  color: "white"
138
101
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Path, {
139
102
  path: path,
@@ -144,8 +107,8 @@ const ScratchCard = ({
144
107
  strokeWidth: brushStrokeWidth
145
108
  })]
146
109
  }),
147
- children: loadedImg ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Image, {
148
- image: loadedImg,
110
+ children: img ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Image, {
111
+ image: img,
149
112
  fit: "cover",
150
113
  x: 0,
151
114
  y: 0,
@@ -158,13 +121,13 @@ const ScratchCard = ({
158
121
  width: areaWidth,
159
122
  height: areaHeight,
160
123
  color: backgroundColor
161
- }), loadedFont && textMetrics && text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
162
- x: textMetrics.x,
163
- y: textMetrics.y,
124
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Text, {
125
+ x: areaWidth / 2 - (font?.measureText(text).width || 0) / 2,
126
+ y: areaHeight / 2 + (font?.measureText(text).height || 0) / 2,
164
127
  text: text,
165
128
  color: textFontColor,
166
- font: loadedFont
167
- }) : null]
129
+ font: font
130
+ })]
168
131
  })
169
132
  })
170
133
  })
@@ -174,23 +137,23 @@ const ScratchCard = ({
174
137
  const styles = _reactNative.StyleSheet.create({
175
138
  container: {
176
139
  position: "relative",
177
- overflow: "hidden"
140
+ overflow: "hidden",
141
+ width: "100%",
142
+ height: "100%"
178
143
  },
179
144
  content: {
180
145
  position: "absolute",
181
146
  top: 0,
182
147
  left: 0,
183
148
  width: "100%",
184
- height: "100%",
185
- zIndex: 1
149
+ height: "100%"
186
150
  },
187
151
  canvas: {
188
152
  position: "absolute",
189
153
  top: 0,
190
154
  left: 0,
191
155
  width: "100%",
192
- height: "100%",
193
- zIndex: 2
156
+ height: "100%"
194
157
  }
195
158
  });
196
159
  var _default = exports.default = ScratchCard;
package/lib/commonjs/components/ScratchCard/ScratchCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeSkia","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScratchCard","style","children","image","brushStrokeWidth","revealThreshold","width","height","backgroundColor","text","textFont","textFontColor","textFontSize","onScratched","loadedImg","useImage","loadedFont","useFont","areaWidth","areaHeight","setSize","useState","isScratched","setScratched","isLayoutReady","setLayoutReady","isThresholdReached","useSharedValue","path","Skia","Path","Make","useEffect","value","handleLayout","useCallback","event","newWidth","newHeight","nativeEvent","layout","revealCardOnJS","pan","Gesture","Pan","averageTouches","maxPointers","onBegin","newPath","copy","moveTo","x","y","lineTo","notifyChange","error","console","onChange","bounds","getBounds","scratchedArea","totalArea","runOnJS","textMetrics","React","useMemo","metrics","measureText","textX","textY","canRenderCanvas","jsxs","View","onLayout","styles","container","jsx","content","GestureDetector","gesture","Canvas","canvas","Mask","mode","mask","Group","Rect","color","strokeJoin","strokeCap","strokeWidth","Image","fit","Text","font","StyleSheet","create","position","overflow","top","left","zIndex","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/ScratchCard.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeSkia","_reactNative","_reactNativeReanimated","_reactNativeGestureHandler","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ScratchCard","style","children","image","brushStrokeWidth","revealThreshold","width","height","backgroundColor","text","textFont","textFontColor","textFontSize","onScratched","img","useImage","font","useFont","areaWidth","areaHeight","setSize","useState","isScratched","setScratched","path","useSharedValue","Skia","Path","Make","moveTo","checkScratchProgress","bounds","value","getBounds","scratchedArea","totalArea","useEffect","console","log","pan","Gesture","Pan","averageTouches","maxPointers","onBegin","x","y","lineTo","notifyChange","onChange","error","jsxs","View","onLayout","nativeEvent","layout","styles","container","jsx","content","GestureDetector","gesture","Canvas","canvas","Mask","mode","mask","Group","Rect","color","strokeJoin","strokeCap","strokeWidth","Image","fit","Text","measureText","StyleSheet","create","position","overflow","top","left","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/ScratchCard.tsx"],"mappings":"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","ignoreList":[]}
package/lib/module/components/ScratchCard/ScratchCard.js CHANGED
@@ -1,27 +1,15 @@
1
1
  "use strict";
2
2
 
3
- import React, { useState, useEffect, useCallback // Import useCallback
4
- } from "react";
5
- import { Canvas, Group, Image, Mask, Path, Rect, Skia, useImage, Text, useFont, notifyChange
6
- // Import SkPath type
7
- // Import SkFont type
8
- // Import SkImage type
9
- } from "@shopify/react-native-skia";
10
- import { View, StyleSheet
11
-
12
- // Optional: for ignoring specific logs if needed
13
- } from "react-native";
14
- // Import runOnJS and useSharedValue
15
- import { runOnJS, useSharedValue } from "react-native-reanimated";
3
+ import React, { useEffect, useState } from "react";
4
+ import { Canvas, Group, Image, Mask, Path, Rect, Skia, useImage, Text, useFont, notifyChange } from "@shopify/react-native-skia";
5
+ import { View, StyleSheet } from "react-native";
6
+ import { useSharedValue } from "react-native-reanimated";
16
7
  import { Gesture, GestureDetector } from "react-native-gesture-handler";
17
-
18
- // Ignore specific warning if it appears, related to path mutation - use cautiously
19
- // LogBox.ignoreLogs(['Skia: SkPath.Make()']);
20
8
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
21
9
  const ScratchCard = ({
22
10
  style,
23
11
  children,
24
- image,
12
+ image = null,
25
13
  brushStrokeWidth = 50,
26
14
  revealThreshold = 0.8,
27
15
  width = 300,
@@ -33,89 +21,57 @@ const ScratchCard = ({
33
21
  textFontSize = 16,
34
22
  onScratched
35
23
  }) => {
36
- const loadedImg = useImage(image);
37
- const loadedFont = useFont(textFont, textFontSize);
24
+ const img = useImage(image);
25
+ const font = useFont(textFont, textFontSize);
38
26
  const [[areaWidth, areaHeight], setSize] = useState([0, 0]);
39
27
  const [isScratched, setScratched] = useState(false);
40
- const [isLayoutReady, setLayoutReady] = useState(false);
41
- const isThresholdReached = useSharedValue(false);
42
- const path = useSharedValue(Skia.Path.Make());
43
- useEffect(() => {
44
- path.value = Skia.Path.Make();
45
- isThresholdReached.value = false;
46
- setScratched(false);
47
- }, [areaWidth, areaHeight]);
48
- const handleLayout = useCallback(event => {
49
- const {
50
- width: newWidth,
51
- height: newHeight
52
- } = event.nativeEvent.layout;
53
- if (newWidth > 0 && newHeight > 0) {
54
- if (newWidth !== areaWidth || newHeight !== areaHeight) {
55
- setSize([newWidth, newHeight]);
56
- }
57
- if (!isLayoutReady) {
58
- setLayoutReady(true);
28
+ const path = useSharedValue(Skia.Path.Make().moveTo(0, 0));
29
+
30
+ //Check scratch progress
31
+ const checkScratchProgress = () => {
32
+ const bounds = path.value.getBounds();
33
+ const scratchedArea = bounds.height * bounds.width;
34
+ const totalArea = areaWidth * areaHeight;
35
+ if (scratchedArea / totalArea > revealThreshold && !isScratched) {
36
+ setScratched(true);
37
+ if (onScratched) {
38
+ onScratched();
59
39
  }
60
- } else {
61
- setLayoutReady(false);
62
40
  }
63
- }, [areaWidth, areaHeight, isLayoutReady]);
64
- const revealCardOnJS = useCallback(() => {
65
- setScratched(true);
66
- onScratched?.();
67
- }, [onScratched]);
41
+ };
42
+ useEffect(() => {
43
+ console.log("HI");
44
+ }, [path]);
68
45
  const pan = Gesture.Pan().averageTouches(true).maxPointers(1).onBegin(e => {
69
- if (!isLayoutReady) return;
70
- try {
71
- const newPath = path.value.copy();
72
- newPath.moveTo(e.x, e.y);
73
- newPath.lineTo(e.x + 0.001, e.y + 0.001);
74
- path.value = newPath;
75
- notifyChange(path);
76
- } catch (error) {
77
- console.error("ScratchCard: Error in onBegin:", error);
78
- }
46
+ path.value.moveTo(e.x, e.y);
47
+ path.value.lineTo(e.x, e.y);
48
+ notifyChange(path);
79
49
  }).onChange(e => {
80
- if (!isLayoutReady || isThresholdReached.value) return;
81
50
  try {
82
- const newPath = path.value.copy();
83
- newPath.lineTo(e.x, e.y);
84
- path.value = newPath;
51
+ // checkScratchProgress();
52
+ path.value.lineTo(e.x, e.y);
85
53
  notifyChange(path);
86
- const bounds = path.value.getBounds();
87
- if (!bounds || areaWidth <= 0 || areaHeight <= 0) {
88
- return;
89
- }
90
- const scratchedArea = bounds.width * bounds.height;
91
- const totalArea = areaWidth * areaHeight;
92
- if (totalArea > 0 && scratchedArea / totalArea > revealThreshold) {
93
- if (!isThresholdReached.value) {
94
- isThresholdReached.value = true;
95
- runOnJS(revealCardOnJS)();
96
- }
97
- }
54
+ // const bounds = path.value.getBounds();
55
+ // const scratchedArea = bounds.height * bounds.width;
56
+ // const totalArea = areaWidth * areaHeight;
57
+
58
+ // if (scratchedArea / totalArea > revealThreshold && !isScratched) {
59
+ // console.log("SCRATCHED")
60
+ // // setScratched(true);
61
+ // // if (onScratched) {
62
+ // // onScratched();
63
+ // // }
64
+ // }
98
65
  } catch (error) {
99
- console.error("ScratchCard: Error in onChange (UI Thread):", error);
66
+ console.log(error);
100
67
  }
68
+
69
+ // checkScratchProgress();
101
70
  });
102
- const textMetrics = React.useMemo(() => {
103
- if (loadedFont && text && areaWidth > 0 && areaHeight > 0) {
104
- const metrics = loadedFont.measureText(text);
105
- const textX = areaWidth / 2 - metrics.width / 2;
106
- const textY = areaHeight / 2 + metrics.height / 3;
107
- return {
108
- x: textX,
109
- y: textY,
110
- width: metrics.width,
111
- height: metrics.height
112
- };
113
- }
114
- return null;
115
- }, [loadedFont, text, areaWidth, areaHeight]);
116
- const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
117
71
  return /*#__PURE__*/_jsxs(View, {
118
- onLayout: handleLayout,
72
+ onLayout: e => {
73
+ setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
74
+ },
119
75
  style: [styles.container, style, {
120
76
  width,
121
77
  height
@@ -123,7 +79,7 @@ const ScratchCard = ({
123
79
  children: [/*#__PURE__*/_jsx(View, {
124
80
  style: styles.content,
125
81
  children: children
126
- }), !isScratched && canRenderCanvas && /*#__PURE__*/_jsx(GestureDetector, {
82
+ }), !isScratched && /*#__PURE__*/_jsx(GestureDetector, {
127
83
  gesture: pan,
128
84
  children: /*#__PURE__*/_jsx(Canvas, {
129
85
  style: styles.canvas,
@@ -133,8 +89,8 @@ const ScratchCard = ({
133
89
  children: [/*#__PURE__*/_jsx(Rect, {
134
90
  x: 0,
135
91
  y: 0,
136
- width: areaWidth,
137
- height: areaHeight,
92
+ width: 1000,
93
+ height: 1000,
138
94
  color: "white"
139
95
  }), /*#__PURE__*/_jsx(Path, {
140
96
  path: path,
@@ -145,8 +101,8 @@ const ScratchCard = ({
145
101
  strokeWidth: brushStrokeWidth
146
102
  })]
147
103
  }),
148
- children: loadedImg ? /*#__PURE__*/_jsx(Image, {
149
- image: loadedImg,
104
+ children: img ? /*#__PURE__*/_jsx(Image, {
105
+ image: img,
150
106
  fit: "cover",
151
107
  x: 0,
152
108
  y: 0,
@@ -159,13 +115,13 @@ const ScratchCard = ({
159
115
  width: areaWidth,
160
116
  height: areaHeight,
161
117
  color: backgroundColor
162
- }), loadedFont && textMetrics && text ? /*#__PURE__*/_jsx(Text, {
163
- x: textMetrics.x,
164
- y: textMetrics.y,
118
+ }), /*#__PURE__*/_jsx(Text, {
119
+ x: areaWidth / 2 - (font?.measureText(text).width || 0) / 2,
120
+ y: areaHeight / 2 + (font?.measureText(text).height || 0) / 2,
165
121
  text: text,
166
122
  color: textFontColor,
167
- font: loadedFont
168
- }) : null]
123
+ font: font
124
+ })]
169
125
  })
170
126
  })
171
127
  })
@@ -175,23 +131,23 @@ const ScratchCard = ({
175
131
  const styles = StyleSheet.create({
176
132
  container: {
177
133
  position: "relative",
178
- overflow: "hidden"
134
+ overflow: "hidden",
135
+ width: "100%",
136
+ height: "100%"
179
137
  },
180
138
  content: {
181
139
  position: "absolute",
182
140
  top: 0,
183
141
  left: 0,
184
142
  width: "100%",
185
- height: "100%",
186
- zIndex: 1
143
+ height: "100%"
187
144
  },
188
145
  canvas: {
189
146
  position: "absolute",
190
147
  top: 0,
191
148
  left: 0,
192
149
  width: "100%",
193
- height: "100%",
194
- zIndex: 2
150
+ height: "100%"
195
151
  }
196
152
  });
197
153
  export default ScratchCard;
package/lib/module/components/ScratchCard/ScratchCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","useState","useEffect","useCallback","Canvas","Group","Image","Mask","Path","Rect","Skia","useImage","Text","useFont","notifyChange","View","StyleSheet","runOnJS","useSharedValue","Gesture","GestureDetector","jsx","_jsx","jsxs","_jsxs","ScratchCard","style","children","image","brushStrokeWidth","revealThreshold","width","height","backgroundColor","text","textFont","textFontColor","textFontSize","onScratched","loadedImg","loadedFont","areaWidth","areaHeight","setSize","isScratched","setScratched","isLayoutReady","setLayoutReady","isThresholdReached","path","Make","value","handleLayout","event","newWidth","newHeight","nativeEvent","layout","revealCardOnJS","pan","Pan","averageTouches","maxPointers","onBegin","e","newPath","copy","moveTo","x","y","lineTo","error","console","onChange","bounds","getBounds","scratchedArea","totalArea","textMetrics","useMemo","metrics","measureText","textX","textY","canRenderCanvas","onLayout","styles","container","content","gesture","canvas","mode","mask","color","strokeJoin","strokeCap","strokeWidth","fit","font","create","position","overflow","top","left","zIndex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/ScratchCard.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useEffect","useState","Canvas","Group","Image","Mask","Path","Rect","Skia","useImage","Text","useFont","notifyChange","View","StyleSheet","useSharedValue","Gesture","GestureDetector","jsx","_jsx","jsxs","_jsxs","ScratchCard","style","children","image","brushStrokeWidth","revealThreshold","width","height","backgroundColor","text","textFont","textFontColor","textFontSize","onScratched","img","font","areaWidth","areaHeight","setSize","isScratched","setScratched","path","Make","moveTo","checkScratchProgress","bounds","value","getBounds","scratchedArea","totalArea","console","log","pan","Pan","averageTouches","maxPointers","onBegin","e","x","y","lineTo","onChange","error","onLayout","nativeEvent","layout","styles","container","content","gesture","canvas","mode","mask","color","strokeJoin","strokeCap","strokeWidth","fit","measureText","create","position","overflow","top","left"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ScratchCard/ScratchCard.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/commonjs/components/ScratchCard/ScratchCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAQtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8K3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAItB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqI3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}
package/lib/typescript/module/components/ScratchCard/ScratchCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAQtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8K3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ScratchCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScratchCard/ScratchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,OAAO,EACL,SAAS,EAET,SAAS,EAET,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAItB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqI3C,CAAC;AAyBF,eAAe,WAAW,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
3
  "main": "./src/index.ts",
4
- "version": "1.6.1",
4
+ "version": "1.6.2",
5
5
  "scripts": {
6
6
  "start": "expo start",
7
7
  "reset-project": "node ./scripts/reset-project.js",
package/src/components/ScratchCard/ScratchCard.tsx CHANGED
@@ -1,9 +1,4 @@
1
- import React, {
2
- useRef,
3
- useState,
4
- useEffect,
5
- useCallback, // Import useCallback
6
- } from "react";
1
+ import React, { useEffect, useRef, useState } from "react";
7
2
  import {
8
3
  Canvas,
9
4
  Group,
@@ -12,13 +7,12 @@ import {
12
7
  Path,
13
8
  Rect,
14
9
  Skia,
10
+ LinearGradient,
11
+ vec,
15
12
  useImage,
16
13
  Text,
17
14
  useFont,
18
15
  notifyChange,
19
- SkPath, // Import SkPath type
20
- SkFont, // Import SkFont type
21
- SkImage, // Import SkImage type
22
16
  } from "@shopify/react-native-skia";
23
17
  import {
24
18
  StyleProp,
@@ -26,21 +20,17 @@ import {
26
20
  ViewStyle,
27
21
  StyleSheet,
28
22
  ImageRequireSource,
29
- LogBox, // Optional: for ignoring specific logs if needed
23
+ NativeTouchEvent,
30
24
  } from "react-native";
31
- // Import runOnJS and useSharedValue
32
- import { runOnJS, useSharedValue } from "react-native-reanimated";
25
+ import { useDerivedValue, useSharedValue } from "react-native-reanimated";
33
26
  import { Gesture, GestureDetector } from "react-native-gesture-handler";
34
27
 
35
- // Ignore specific warning if it appears, related to path mutation - use cautiously
36
- // LogBox.ignoreLogs(['Skia: SkPath.Make()']);
37
-
38
28
  type ScratchCardProps = {
39
29
  style?: StyleProp<ViewStyle>;
40
30
  image?: ImageRequireSource;
41
31
  children?: React.ReactNode;
42
32
  brushStrokeWidth?: number;
43
- revealThreshold?: number; // Percentage (0 to 1) - Based on bounding box
33
+ revealThreshold?: number;
44
34
  width?: number;
45
35
  height?: number;
46
36
  backgroundColor?: string;
@@ -48,15 +38,15 @@ type ScratchCardProps = {
48
38
  textFont?: ImageRequireSource;
49
39
  textFontSize?: number;
50
40
  textFontColor?: string;
51
- onScratched?: () => void;
41
+ onScratched?: () => void;
52
42
  };
53
43
 
54
44
  const ScratchCard: React.FC<ScratchCardProps> = ({
55
45
  style,
56
46
  children,
57
- image,
47
+ image = null,
58
48
  brushStrokeWidth = 50,
59
- revealThreshold = 0.8,
49
+ revealThreshold = 0.8,
60
50
  width = 300,
61
51
  height = 300,
62
52
  backgroundColor = "#CCCCCC",
@@ -66,161 +56,120 @@ const ScratchCard: React.FC<ScratchCardProps> = ({
66
56
  textFontSize = 16,
67
57
  onScratched,
68
58
  }) => {
69
- const loadedImg = useImage(image);
70
- const loadedFont = useFont(textFont, textFontSize);
59
+ const img = useImage(image);
60
+ const font = useFont(textFont, textFontSize);
71
61
 
72
62
  const [[areaWidth, areaHeight], setSize] = useState([0, 0]);
73
63
  const [isScratched, setScratched] = useState(false);
74
- const [isLayoutReady, setLayoutReady] = useState(false);
75
-
76
- const isThresholdReached = useSharedValue(false);
77
64
 
78
- const path = useSharedValue<SkPath>(Skia.Path.Make());
65
+ const path = useSharedValue(Skia.Path.Make().moveTo(0,0));
79
66
 
80
- useEffect(() => {
81
- path.value = Skia.Path.Make();
82
- isThresholdReached.value = false
83
- setScratched(false);
84
- }, [areaWidth, areaHeight]);
67
+ //Check scratch progress
68
+ const checkScratchProgress = () => {
69
+ const bounds = path.value.getBounds();
70
+ const scratchedArea = bounds.height * bounds.width;
71
+ const totalArea = areaWidth * areaHeight;
85
72
 
86
- const handleLayout = useCallback((event: any) => {
87
- const { width: newWidth, height: newHeight } = event.nativeEvent.layout;
88
- if (newWidth > 0 && newHeight > 0) {
89
- if (newWidth !== areaWidth || newHeight !== areaHeight) {
90
- setSize([newWidth, newHeight]);
73
+ if (scratchedArea / totalArea > revealThreshold && !isScratched) {
74
+ setScratched(true);
75
+ if (onScratched) {
76
+ onScratched();
91
77
  }
92
- if (!isLayoutReady) {
93
- setLayoutReady(true);
94
- }
95
- } else {
96
- setLayoutReady(false);
97
78
  }
98
- }, [areaWidth, areaHeight, isLayoutReady]);
79
+ };
99
80
 
100
- const revealCardOnJS = useCallback(() => {
101
- setScratched(true);
102
- onScratched?.();
103
- }, [onScratched]);
81
+ useEffect(() => {console.log("HI")}, [path])
104
82
 
105
83
  const pan = Gesture.Pan()
106
- .averageTouches(true)
107
- .maxPointers(1)
108
- .onBegin((e) => {
109
- if (!isLayoutReady) return;
110
- try {
111
- const newPath = path.value.copy();
112
- newPath.moveTo(e.x, e.y);
113
- newPath.lineTo(e.x + 0.001, e.y + 0.001);
114
- path.value = newPath;
115
- notifyChange(path as any);
116
- } catch (error) {
117
- console.error("ScratchCard: Error in onBegin:", error);
118
- }
119
- })
120
- .onChange((e) => {
121
- if (!isLayoutReady || isThresholdReached.value) return;
122
-
123
- try {
124
- const newPath = path.value.copy();
125
- newPath.lineTo(e.x, e.y);
126
- path.value = newPath;
127
- notifyChange(path as any);
128
-
129
- const bounds = path.value.getBounds();
130
-
131
- if (!bounds || areaWidth <= 0 || areaHeight <= 0) {
132
- return;
133
- }
134
-
135
- const scratchedArea = bounds.width * bounds.height;
136
- const totalArea = areaWidth * areaHeight;
137
-
138
- if (totalArea > 0 && scratchedArea / totalArea > revealThreshold) {
139
- if (!isThresholdReached.value) {
140
- isThresholdReached.value = true;
141
- runOnJS(revealCardOnJS)();
142
- }
143
- }
144
- } catch (error) {
145
- console.error("ScratchCard: Error in onChange (UI Thread):", error);
146
- }
147
- })
148
-
149
- const textMetrics = React.useMemo(() => {
150
- if (loadedFont && text && areaWidth > 0 && areaHeight > 0) {
151
- const metrics = loadedFont.measureText(text);
152
- const textX = areaWidth / 2 - metrics.width / 2;
153
- const textY = areaHeight / 2 + metrics.height / 3;
154
- return { x: textX, y: textY, width: metrics.width, height: metrics.height };
84
+ .averageTouches(true)
85
+ .maxPointers(1)
86
+ .onBegin(e => {
87
+ path.value.moveTo(e.x, e.y);
88
+ path.value.lineTo(e.x, e.y);
89
+ notifyChange(path as any);
90
+ })
91
+ .onChange(e => {
92
+ try {
93
+ // checkScratchProgress();
94
+ path.value.lineTo(e.x, e.y);
95
+ notifyChange(path as any);
96
+ // const bounds = path.value.getBounds();
97
+ // const scratchedArea = bounds.height * bounds.width;
98
+ // const totalArea = areaWidth * areaHeight;
99
+
100
+ // if (scratchedArea / totalArea > revealThreshold && !isScratched) {
101
+ // console.log("SCRATCHED")
102
+ // // setScratched(true);
103
+ // // if (onScratched) {
104
+ // // onScratched();
105
+ // // }
106
+ // }
107
+ } catch (error) {
108
+ console.log(error)
155
109
  }
156
- return null;
157
- }, [loadedFont, text, areaWidth, areaHeight]);
158
110
 
159
- const canRenderCanvas = isLayoutReady && areaWidth > 0 && areaHeight > 0;
111
+ // checkScratchProgress();
112
+ })
160
113
 
161
114
  return (
162
115
  <View
163
- onLayout={handleLayout}
116
+ onLayout={(e) => {
117
+ setSize([e.nativeEvent.layout.width, e.nativeEvent.layout.height]);
118
+ }}
164
119
  style={[styles.container, style, { width, height }]}
165
120
  >
166
121
  <View style={styles.content}>{children}</View>
167
122
 
168
- {!isScratched && canRenderCanvas && (
123
+ {!isScratched && (
169
124
  <GestureDetector gesture={pan}>
170
- <Canvas style={styles.canvas}>
171
- <Mask
172
- mode="luminance"
173
- mask={
174
- <Group>
175
- <Rect
176
- x={0}
177
- y={0}
178
- width={areaWidth}
179
- height={areaHeight}
180
- color="white"
181
- />
182
- <Path
183
- path={path}
184
- color="black"
185
- style="stroke"
186
- strokeJoin="round"
187
- strokeCap="round"
188
- strokeWidth={brushStrokeWidth}
189
- />
190
- </Group>
191
- }
192
- >
193
- {loadedImg ? (
194
- <Image
195
- image={loadedImg}
196
- fit="cover"
125
+ <Canvas
126
+ style={styles.canvas}
127
+ >
128
+ <Mask
129
+ mode="luminance"
130
+ mask={
131
+ <Group>
132
+ <Rect x={0} y={0} width={1000} height={1000} color="white" />
133
+ <Path
134
+ path={path}
135
+ color="black"
136
+ style="stroke"
137
+ strokeJoin="round"
138
+ strokeCap="round"
139
+ strokeWidth={brushStrokeWidth}
140
+ />
141
+ </Group>
142
+ }
143
+ >
144
+ {img ? (
145
+ <Image
146
+ image={img}
147
+ fit="cover"
148
+ x={0}
149
+ y={0}
150
+ width={areaWidth}
151
+ height={areaHeight}
152
+ />
153
+ ) : (
154
+ <Group>
155
+ <Rect
197
156
  x={0}
198
157
  y={0}
199
158
  width={areaWidth}
200
159
  height={areaHeight}
160
+ color={backgroundColor}
201
161
  />
202
- ) : (
203
- <Group>
204
- <Rect
205
- x={0}
206
- y={0}
207
- width={areaWidth}
208
- height={areaHeight}
209
- color={backgroundColor}
210
- />
211
- {loadedFont && textMetrics && text ? (
212
- <Text
213
- x={textMetrics.x}
214
- y={textMetrics.y}
215
- text={text}
216
- color={textFontColor}
217
- font={loadedFont}
218
- />
219
- ) : null}
220
- </Group>
221
- )}
222
- </Mask>
223
- </Canvas>
162
+ <Text
163
+ x={areaWidth / 2 - (font?.measureText(text).width || 0) / 2}
164
+ y={areaHeight / 2 + (font?.measureText(text).height || 0) / 2}
165
+ text={text}
166
+ color={textFontColor}
167
+ font={font}
168
+ />
169
+ </Group>
170
+ )}
171
+ </Mask>
172
+ </Canvas>
224
173
  </GestureDetector>
225
174
  )}
226
175
  </View>
@@ -231,6 +180,8 @@ const styles = StyleSheet.create({
231
180
  container: {
232
181
  position: "relative",
233
182
  overflow: "hidden",
183
+ width: "100%",
184
+ height: "100%",
234
185
  },
235
186
  content: {
236
187
  position: "absolute",
@@ -238,7 +189,6 @@ const styles = StyleSheet.create({
238
189
  left: 0,
239
190
  width: "100%",
240
191
  height: "100%",
241
- zIndex: 1,
242
192
  },
243
193
  canvas: {
244
194
  position: "absolute",
@@ -246,8 +196,7 @@ const styles = StyleSheet.create({
246
196
  left: 0,
247
197
  width: "100%",
248
198
  height: "100%",
249
- zIndex: 2,
250
199
  },
251
200
  });
252
201
 
253
- export default ScratchCard;
202
+ export default ScratchCard;