1

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'."

whatthedev
  • 11
  • 2

0 Answers0