The code below does not generate any errors. BUT, during the return, which occurs during a pan gesture, the Circle moves as it should, but the the Path end and Line end do not move. I want either the Path or the Line end to move with the Circle (once it works, i'll remove the +-20 in the args).
The problem seems to be that the Path and Line need to access the quantities skiaX
and skiaY
(each of these is a 'SkiaMutableValue' which are updated via useSharedValueEffect
), not just the 'numbers' skiaX.current
and skiaY.current
, or currentX.value
and currentY.value
(which for some Skia reason are not updated when accessed during the return).
However, the Line and Path will only accept points of 'number' type (skiaX.current
and skiaY.current
, or currentX.value
and currentY.value
).
Notice that the Circle DOES access skiaX
and skiaY
. Any ideas on how to allow the Line or Path to somehow also access the quantites skiaX
and skiaY
(not just skiaX.current
and skiaY.current
, or currentX.value
and currentY.value
)? Thanks for reading!
import {Canvas,
Circle,
Line,
vec,
Path,
Rect,
Skia,
useSharedValueEffect,
useValue,
} from '@shopify/react-native-skia';
import React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
} from 'react-native-reanimated';
const {width, height} = Dimensions.get('window');
const App = () => {
const strokeWidth = 5;
const circleRadius = 15;
const centerX = width / 2;
const centerY = height / 2;
const initialX = useSharedValue(centerX);
const initialY = useSharedValue(centerY);
const currentX = useSharedValue(centerX);
const currentY = useSharedValue(centerY);
const skiaX = useValue(centerX);
const skiaY = useValue(centerY);
const gesture = Gesture.Pan()
.onUpdate(({translationX, translationY}) => {
currentX.value = translationX + initialX.value;
currentY.value = translationY + initialY.value;
})
.onEnd(() => {
currentX.value = withSpring(initialX.value);
currentY.value = withSpring(initialY.value);
});
useSharedValueEffect(
() => {
skiaX.current = currentX.value;
skiaY.current = currentY.value;
},
currentX,
currentY,
);
return (
<GestureHandlerRootView style={styles.container}>
<GestureDetector gesture={gesture}>
<View style={styles.container}>
<Canvas style={styles.canvas}>
<Rect x={0} y={0} width={width} height={height} color="black" />
<Path
path={`M ${currentX.value - 20} ${currentY.value + 20} L ${width/2} ${height/2}`}
style="stroke"
strokeWidth={strokeWidth}
strokeCap="round"
color={'orange'}
/>
<Line
p1={vec(skiaX.current + 20, skiaY.current + 20)}
p2={vec(width/2, height/2)}
color="white"
style="stroke"
strokeWidth={strokeWidth}
/>
<Circle
cx={skiaX}
cy={skiaY}
r={circleRadius}
color="green"
style="fill"
/>
</Canvas>
</View>
</GestureDetector>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
canvas: {
flex: 1,
},
cursor: {
backgroundColor: 'green',
},
});
export default App;
For example, if I replace the line
path={
M ${skiaX.current - 20} ${skiaY.current + 20} L ${width/2} ${height/2}}
with
path={
M ${skiaX - 20} ${skiaY + 20} L ${width/2} ${height/2}}
this error is generated: "Error is: Operator '+' cannot be applied to types 'SkiaMutableValue' and 'number'."