react-native-skia-gesture 0.3.5 → 0.4.0-beta.1
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.
- package/README.md +1 -1
- package/lib/commonjs/canvas/canvas.js +8 -3
- package/lib/commonjs/canvas/canvas.js.map +1 -1
- package/lib/commonjs/utils/unwrap-animated-value.js +8 -4
- package/lib/commonjs/utils/unwrap-animated-value.js.map +1 -1
- package/lib/module/canvas/canvas.js +8 -3
- package/lib/module/canvas/canvas.js.map +1 -1
- package/lib/module/utils/unwrap-animated-value.js +8 -4
- package/lib/module/utils/unwrap-animated-value.js.map +1 -1
- package/lib/typescript/canvas/canvas.d.ts.map +1 -1
- package/lib/typescript/components/index.d.ts +2 -2
- package/lib/typescript/utils/unwrap-animated-value.d.ts +1 -1
- package/lib/typescript/utils/unwrap-animated-value.d.ts.map +1 -1
- package/package.json +7 -6
- package/src/canvas/canvas.tsx +6 -5
- package/src/utils/unwrap-animated-value.ts +8 -4
package/README.md
CHANGED
@@ -62,7 +62,7 @@ export default function App() {
|
|
62
62
|
y: cy.value,
|
63
63
|
}
|
64
64
|
},
|
65
|
-
onActive: ({ translationX, translationY }
|
65
|
+
onActive: ({ translationX, translationY }) => {
|
66
66
|
'worklet';
|
67
67
|
cx.value = context.value.x + translationX;
|
68
68
|
cy.value = context.value.y + translationY;
|
@@ -7,11 +7,10 @@ exports.Canvas = void 0;
|
|
7
7
|
var _reactNativeSkia = require("@shopify/react-native-skia");
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
var _reactNativeGestureHandler = require("react-native-gesture-handler");
|
10
|
-
var _reactNativeReanimated =
|
10
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
11
11
|
var _context = require("./context");
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
-
const AnimatedSkiaCanvas = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSkia.Canvas);
|
15
14
|
const Canvas = _ref => {
|
16
15
|
let {
|
17
16
|
children,
|
@@ -40,6 +39,8 @@ const Canvas = _ref => {
|
|
40
39
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
41
40
|
}, [timeoutBeforeCollectingRefs]);
|
42
41
|
const mainGesture = panGesture.onBegin(event => {
|
42
|
+
'worklet';
|
43
|
+
|
43
44
|
const keys = Object.keys(loadedRefs);
|
44
45
|
for (let i = 0; i < keys.length; i++) {
|
45
46
|
const key = keys[i];
|
@@ -52,6 +53,8 @@ const Canvas = _ref => {
|
|
52
53
|
}
|
53
54
|
}
|
54
55
|
}).onUpdate(event => {
|
56
|
+
'worklet';
|
57
|
+
|
55
58
|
var _activatedKey$split, _touchableItem$onActi;
|
56
59
|
const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
|
57
60
|
if (!activatedKey) {
|
@@ -64,6 +67,8 @@ const Canvas = _ref => {
|
|
64
67
|
const touchableItem = loadedRefs[indexedKey];
|
65
68
|
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
|
66
69
|
}).onFinalize(event => {
|
70
|
+
'worklet';
|
71
|
+
|
67
72
|
var _activatedKey$split2, _touchableItem$onEnd;
|
68
73
|
const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
|
69
74
|
if (!activatedKey) {
|
@@ -84,7 +89,7 @@ const Canvas = _ref => {
|
|
84
89
|
}, [touchableRefs]);
|
85
90
|
return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.GestureDetector, {
|
86
91
|
gesture: mainGesture
|
87
|
-
}, /*#__PURE__*/_react.default.createElement(
|
92
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, props, /*#__PURE__*/_react.default.createElement(_context.TouchHandlerContext.Provider, {
|
88
93
|
value: touchableRefs
|
89
94
|
}, children)));
|
90
95
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["Canvas","children","panGesture","Gesture","Pan","timeoutBeforeCollectingRefs","props","touchableRefs","useMemo","value","activeKey","useSharedValue","loadedRefs","prepareLoadedRefs","useState","ref","useRef","useEffect","current","setTimeout","clearTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
|
@@ -17,10 +17,14 @@ const unwrapAnimatedValueObject = value => {
|
|
17
17
|
'worklet';
|
18
18
|
|
19
19
|
return Object.keys(value).reduce((acc, key) => {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
20
|
+
const val = value[key];
|
21
|
+
if (val !== undefined) {
|
22
|
+
return {
|
23
|
+
...acc,
|
24
|
+
[key]: unwrapAnimatedValue(val)
|
25
|
+
};
|
26
|
+
}
|
27
|
+
return acc;
|
24
28
|
}, {});
|
25
29
|
};
|
26
30
|
exports.unwrapAnimatedValueObject = unwrapAnimatedValueObject;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unwrapAnimatedValue","value","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":";;;;;;AAEA,MAAMA,mBAAmB,GAAOC,KAAyB,IAAQ;EAC/D,SAAS;;EAET,IAAKA,KAAK,CAAoBA,KAAK,IAAI,IAAI,EAAE;IAC3C,OAAQA,KAAK,CAAoBA,KAAK;EACxC;EAEA,OAAOA,KAAK;AACd,CAAC;AAAC;AAEF,MAAMC,yBAAyB,GAC7BD,
|
1
|
+
{"version":3,"names":["unwrapAnimatedValue","value","unwrapAnimatedValueObject","Object","keys","reduce","acc","key","val","undefined"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":";;;;;;AAEA,MAAMA,mBAAmB,GAAOC,KAAyB,IAAQ;EAC/D,SAAS;;EAET,IAAKA,KAAK,CAAoBA,KAAK,IAAI,IAAI,EAAE;IAC3C,OAAQA,KAAK,CAAoBA,KAAK;EACxC;EAEA,OAAOA,KAAK;AACd,CAAC;AAAC;AAEF,MAAMC,yBAAyB,GAC7BD,KAAyC,IACnB;EACtB,SAAS;;EACT,OAAOE,MAAM,CAACC,IAAI,CAACH,KAAK,CAAC,CAACI,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IAC7C,MAAMC,GAAG,GAAGP,KAAK,CAACM,GAAG,CAAC;IACtB,IAAIC,GAAG,KAAKC,SAAS,EAAE;MACrB,OAAO;QAAE,GAAGH,GAAG;QAAE,CAACC,GAAG,GAAGP,mBAAmB,CAACQ,GAAG;MAAE,CAAC;IACpD;IACA,OAAOF,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC,CAAsB;AAC7B,CAAC;AAAC"}
|
@@ -1,9 +1,8 @@
|
|
1
1
|
import { Canvas as SkiaCanvas } from '@shopify/react-native-skia';
|
2
2
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
3
3
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
4
|
-
import
|
4
|
+
import { useSharedValue } from 'react-native-reanimated';
|
5
5
|
import { TouchHandlerContext } from './context';
|
6
|
-
const AnimatedSkiaCanvas = Animated.createAnimatedComponent(SkiaCanvas);
|
7
6
|
const Canvas = _ref => {
|
8
7
|
let {
|
9
8
|
children,
|
@@ -32,6 +31,8 @@ const Canvas = _ref => {
|
|
32
31
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
33
32
|
}, [timeoutBeforeCollectingRefs]);
|
34
33
|
const mainGesture = panGesture.onBegin(event => {
|
34
|
+
'worklet';
|
35
|
+
|
35
36
|
const keys = Object.keys(loadedRefs);
|
36
37
|
for (let i = 0; i < keys.length; i++) {
|
37
38
|
const key = keys[i];
|
@@ -44,6 +45,8 @@ const Canvas = _ref => {
|
|
44
45
|
}
|
45
46
|
}
|
46
47
|
}).onUpdate(event => {
|
48
|
+
'worklet';
|
49
|
+
|
47
50
|
var _activatedKey$split, _touchableItem$onActi;
|
48
51
|
const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
|
49
52
|
if (!activatedKey) {
|
@@ -56,6 +59,8 @@ const Canvas = _ref => {
|
|
56
59
|
const touchableItem = loadedRefs[indexedKey];
|
57
60
|
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
|
58
61
|
}).onFinalize(event => {
|
62
|
+
'worklet';
|
63
|
+
|
59
64
|
var _activatedKey$split2, _touchableItem$onEnd;
|
60
65
|
const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
|
61
66
|
if (!activatedKey) {
|
@@ -76,7 +81,7 @@ const Canvas = _ref => {
|
|
76
81
|
}, [touchableRefs]);
|
77
82
|
return /*#__PURE__*/React.createElement(GestureDetector, {
|
78
83
|
gesture: mainGesture
|
79
|
-
}, /*#__PURE__*/React.createElement(
|
84
|
+
}, /*#__PURE__*/React.createElement(SkiaCanvas, props, /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
|
80
85
|
value: touchableRefs
|
81
86
|
}, children)));
|
82
87
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Canvas","SkiaCanvas","React","useEffect","useMemo","useRef","useState","Gesture","GestureDetector","
|
1
|
+
{"version":3,"names":["Canvas","SkiaCanvas","React","useEffect","useMemo","useRef","useState","Gesture","GestureDetector","useSharedValue","TouchHandlerContext","children","panGesture","Pan","timeoutBeforeCollectingRefs","props","touchableRefs","value","activeKey","loadedRefs","prepareLoadedRefs","ref","current","setTimeout","clearTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
|
@@ -10,10 +10,14 @@ const unwrapAnimatedValueObject = value => {
|
|
10
10
|
'worklet';
|
11
11
|
|
12
12
|
return Object.keys(value).reduce((acc, key) => {
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
13
|
+
const val = value[key];
|
14
|
+
if (val !== undefined) {
|
15
|
+
return {
|
16
|
+
...acc,
|
17
|
+
[key]: unwrapAnimatedValue(val)
|
18
|
+
};
|
19
|
+
}
|
20
|
+
return acc;
|
17
21
|
}, {});
|
18
22
|
};
|
19
23
|
export { unwrapAnimatedValue, unwrapAnimatedValueObject };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unwrapAnimatedValue","value","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":"AAEA,MAAMA,mBAAmB,GAAOC,KAAyB,IAAQ;EAC/D,SAAS;;EAET,IAAKA,KAAK,CAAoBA,KAAK,IAAI,IAAI,EAAE;IAC3C,OAAQA,KAAK,CAAoBA,KAAK;EACxC;EAEA,OAAOA,KAAK;AACd,CAAC;AAED,MAAMC,yBAAyB,GAC7BD,
|
1
|
+
{"version":3,"names":["unwrapAnimatedValue","value","unwrapAnimatedValueObject","Object","keys","reduce","acc","key","val","undefined"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":"AAEA,MAAMA,mBAAmB,GAAOC,KAAyB,IAAQ;EAC/D,SAAS;;EAET,IAAKA,KAAK,CAAoBA,KAAK,IAAI,IAAI,EAAE;IAC3C,OAAQA,KAAK,CAAoBA,KAAK;EACxC;EAEA,OAAOA,KAAK;AACd,CAAC;AAED,MAAMC,yBAAyB,GAC7BD,KAAyC,IACnB;EACtB,SAAS;;EACT,OAAOE,MAAM,CAACC,IAAI,CAACH,KAAK,CAAC,CAACI,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IAC7C,MAAMC,GAAG,GAAGP,KAAK,CAACM,GAAG,CAAC;IACtB,IAAIC,GAAG,KAAKC,SAAS,EAAE;MACrB,OAAO;QAAE,GAAGH,GAAG;QAAE,CAACC,GAAG,GAAGP,mBAAmB,CAACQ,GAAG;MAAE,CAAC;IACpD;IACA,OAAOF,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC,CAAsB;AAC7B,CAAC;AAED,SAASN,mBAAmB,EAAEE,yBAAyB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAGL,UAAU,EACX,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC,CAAC;
|
1
|
+
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAGL,UAAU,EACX,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiG1C,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
@@ -2,8 +2,8 @@ export { Canvas } from '../canvas';
|
|
2
2
|
export declare const Circle: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").CircleProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
|
3
3
|
export declare const RoundedRect: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").RoundedRectProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
|
4
4
|
export declare const Rect: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").RectProps, never> & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
|
5
|
-
export declare const Path: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: Omit<import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").PathProps, never>, "
|
6
|
-
end?: import("@shopify/react-native-skia").AnimatedProp<number> | undefined;
|
5
|
+
export declare const Path: ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: Omit<import("@shopify/react-native-skia").AnimatedProps<import("@shopify/react-native-skia").PathProps, never>, "start" | "end"> & {
|
7
6
|
start?: import("@shopify/react-native-skia").AnimatedProp<number> | undefined;
|
7
|
+
end?: import("@shopify/react-native-skia").AnimatedProp<number> | undefined;
|
8
8
|
} & Partial<import("../hoc").TouchableHandlerProps>) => JSX.Element;
|
9
9
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { SharedValue } from 'react-native-reanimated';
|
2
2
|
declare const unwrapAnimatedValue: <T>(value: T | SharedValue<T>) => T;
|
3
|
-
declare const unwrapAnimatedValueObject: <T>(value: Record<
|
3
|
+
declare const unwrapAnimatedValueObject: <T>(value: Record<string, T | SharedValue<T>>) => Record<string, T>;
|
4
4
|
export { unwrapAnimatedValue, unwrapAnimatedValueObject };
|
5
5
|
//# sourceMappingURL=unwrap-animated-value.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"unwrap-animated-value.d.ts","sourceRoot":"","sources":["../../../src/utils/unwrap-animated-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,QAAA,MAAM,mBAAmB,qCAQxB,CAAC;AAEF,QAAA,MAAM,yBAAyB
|
1
|
+
{"version":3,"file":"unwrap-animated-value.d.ts","sourceRoot":"","sources":["../../../src/utils/unwrap-animated-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,QAAA,MAAM,mBAAmB,qCAQxB,CAAC;AAEF,QAAA,MAAM,yBAAyB,qEAW9B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-skia-gesture",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.4.0-beta.1",
|
4
4
|
"description": "A detection system for React Native Skia components",
|
5
5
|
"main": "lib/commonjs/index",
|
6
6
|
"module": "lib/module/index",
|
@@ -55,7 +55,7 @@
|
|
55
55
|
"@evilmartians/lefthook": "^1.2.2",
|
56
56
|
"@react-native-community/eslint-config": "^3.0.2",
|
57
57
|
"@release-it/conventional-changelog": "^5.0.0",
|
58
|
-
"@shopify/react-native-skia": "
|
58
|
+
"@shopify/react-native-skia": "2.0.0-next.4",
|
59
59
|
"@types/jest": "^28.1.2",
|
60
60
|
"@types/react": "18.0.26",
|
61
61
|
"@types/react-native": "0.70.0",
|
@@ -68,11 +68,11 @@
|
|
68
68
|
"metro-react-native-babel-preset": "^0.77.0",
|
69
69
|
"pod-install": "^0.1.0",
|
70
70
|
"prettier": "^2.0.5",
|
71
|
-
"react": "
|
72
|
-
"react-native": "0.
|
71
|
+
"react": "19.0.0",
|
72
|
+
"react-native": "0.79.2",
|
73
73
|
"react-native-builder-bob": "^0.20.0",
|
74
74
|
"react-native-gesture-handler": "~2.16.1",
|
75
|
-
"react-native-reanimated": "~3.
|
75
|
+
"react-native-reanimated": "~3.17.4",
|
76
76
|
"release-it": "^15.0.0",
|
77
77
|
"typescript": "^4.5.2"
|
78
78
|
},
|
@@ -159,5 +159,6 @@
|
|
159
159
|
}
|
160
160
|
]
|
161
161
|
]
|
162
|
-
}
|
162
|
+
},
|
163
|
+
"dependencies": {}
|
163
164
|
}
|
package/src/canvas/canvas.tsx
CHANGED
@@ -5,7 +5,7 @@ import {
|
|
5
5
|
GestureDetector,
|
6
6
|
PanGesture,
|
7
7
|
} from 'react-native-gesture-handler';
|
8
|
-
import
|
8
|
+
import { useSharedValue } from 'react-native-reanimated';
|
9
9
|
|
10
10
|
import {
|
11
11
|
TouchHandlerContext,
|
@@ -19,8 +19,6 @@ type TouchableCanvasProps = CanvasProps & {
|
|
19
19
|
timeoutBeforeCollectingRefs?: number; // default 100
|
20
20
|
};
|
21
21
|
|
22
|
-
const AnimatedSkiaCanvas = Animated.createAnimatedComponent(SkiaCanvas);
|
23
|
-
|
24
22
|
const Canvas: React.FC<TouchableCanvasProps> = ({
|
25
23
|
children,
|
26
24
|
panGesture = Gesture.Pan(),
|
@@ -54,6 +52,7 @@ const Canvas: React.FC<TouchableCanvasProps> = ({
|
|
54
52
|
|
55
53
|
const mainGesture = panGesture
|
56
54
|
.onBegin((event) => {
|
55
|
+
'worklet';
|
57
56
|
const keys = Object.keys(loadedRefs);
|
58
57
|
for (let i = 0; i < keys.length; i++) {
|
59
58
|
const key = keys[i] as string;
|
@@ -66,6 +65,7 @@ const Canvas: React.FC<TouchableCanvasProps> = ({
|
|
66
65
|
}
|
67
66
|
})
|
68
67
|
.onUpdate((event) => {
|
68
|
+
'worklet';
|
69
69
|
const activatedKey = activeKey.value.find((key) =>
|
70
70
|
key.includes(event.handlerTag.toString())
|
71
71
|
);
|
@@ -83,6 +83,7 @@ const Canvas: React.FC<TouchableCanvasProps> = ({
|
|
83
83
|
return touchableItem?.onActive?.(event);
|
84
84
|
})
|
85
85
|
.onFinalize((event) => {
|
86
|
+
'worklet';
|
86
87
|
const activatedKey = activeKey.value.find((key) =>
|
87
88
|
key.includes(event.handlerTag.toString())
|
88
89
|
);
|
@@ -108,11 +109,11 @@ const Canvas: React.FC<TouchableCanvasProps> = ({
|
|
108
109
|
|
109
110
|
return (
|
110
111
|
<GestureDetector gesture={mainGesture}>
|
111
|
-
<
|
112
|
+
<SkiaCanvas {...props}>
|
112
113
|
<TouchHandlerContext.Provider value={touchableRefs}>
|
113
114
|
{children}
|
114
115
|
</TouchHandlerContext.Provider>
|
115
|
-
</
|
116
|
+
</SkiaCanvas>
|
116
117
|
</GestureDetector>
|
117
118
|
);
|
118
119
|
};
|
@@ -11,12 +11,16 @@ const unwrapAnimatedValue = <T>(value: SharedValue<T> | T): T => {
|
|
11
11
|
};
|
12
12
|
|
13
13
|
const unwrapAnimatedValueObject = <T>(
|
14
|
-
value: Record<
|
15
|
-
): Record<
|
14
|
+
value: Record<string, SharedValue<T> | T>
|
15
|
+
): Record<string, T> => {
|
16
16
|
'worklet';
|
17
17
|
return Object.keys(value).reduce((acc, key) => {
|
18
|
-
|
19
|
-
|
18
|
+
const val = value[key];
|
19
|
+
if (val !== undefined) {
|
20
|
+
return { ...acc, [key]: unwrapAnimatedValue(val) };
|
21
|
+
}
|
22
|
+
return acc;
|
23
|
+
}, {} as Record<string, T>);
|
20
24
|
};
|
21
25
|
|
22
26
|
export { unwrapAnimatedValue, unwrapAnimatedValueObject };
|