-
Notifications
You must be signed in to change notification settings - Fork 0
/
Cursor.tsx
68 lines (63 loc) · 1.7 KB
/
Cursor.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React from "react";
import { StyleSheet, View } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
import { clamp, getYForX, Path } from "react-native-redash";
const CURSOR = 50;
const styles = StyleSheet.create({
cursor: {
width: CURSOR,
height: CURSOR,
borderRadius: CURSOR / 2,
backgroundColor: "rgba(0, 0, 0, 0.1)",
justifyContent: "center",
alignItems: "center",
},
cursorBody: {
width: 15,
height: 15,
borderRadius: 7.5,
backgroundColor: "#367be2",
},
});
interface CursorProps {
data: Animated.SharedValue<{ path: Path }>;
y: Animated.SharedValue<number>;
x: Animated.SharedValue<number>;
}
export const Cursor = ({ data, y, x }: CursorProps) => {
const active = useSharedValue(false);
const onGestureEvent = useAnimatedGestureHandler({
onStart: () => {
active.value = true;
},
onActive: (event) => {
x.value = clamp(event.x, 25, 335);
y.value = getYForX(data.value.path, x.value)!;
},
onEnd: () => {
active.value = false;
},
});
const style = useAnimatedStyle(() => {
const translateX = x.value - CURSOR / 2;
const translateY = y.value - CURSOR / 2;
return {
transform: [{ translateX }, { translateY }],
opacity: 1,
};
});
return (
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View style={StyleSheet.absoluteFill}>
<Animated.View style={[styles.cursor, style]}>
<View style={styles.cursorBody} />
</Animated.View>
</Animated.View>
</PanGestureHandler>
);
};