SVG Path PanGestureHandler animatedProps does not rerender on drag / sketch

[azim-barcove]

Description

I was trying to build a simple sketch functionality. Base code is looking like this:-

import React from 'react';
import Svg, { Path } from 'react-native-svg';
import Animated, { useSharedValue, useAnimatedProps, useAnimatedGestureHandler } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler'

function TestAnnotate(props) {
    const AnimatedPath = Animated.createAnimatedComponent(Path);
    const AnimatedSvg = Animated.createAnimatedComponent(Svg);

    const sharedVal = useSharedValue([]);

    const gestureHandler = useAnimatedGestureHandler({
        onStart: (event, ctx) => {
            let val = sharedVal.value;
            console.log(val)
            val.push(`M ${event.x} ${event.y}`);
            sharedVal.value = val;
        },
        onActive: (event, ctx) => {
            let val = sharedVal.value;
            val.push(`L ${event.x} ${event.y}`);
            sharedVal.value = val;
        },
        // onEnd: (_) => {
        //   // Not Yet
        // },
    });

    const animatedProps = useAnimatedProps(() => {

        console.log(sharedVal.value)

        const path = sharedVal.value.join();

        console.log(path)

        return {
            d: path,
            // d: "M 186.16432189941406 160.71844482421875,L 197.12118530273438 160.71844482421875",
        };
    });

    return (
        <PanGestureHandler onGestureEvent={gestureHandler}>
            <Animated.View style={{
                flex: 1,
                backgroundColor: 'transparent'
            }}
            >
                <AnimatedSvg height="100%" width="100%">
                    <AnimatedPath
                        animatedProps={animatedProps}
                        fill="none"
                        stroke="red"
                        strokeWidth={5}
                    />
                </AnimatedSvg>
            </Animated.View>
        </PanGestureHandler>
    );
}

export default TestAnnotate;

I can get the sharedVal.value changes (via console.log()) in useAnimatedProps but it does not reflect the updated value on the <AnimatedPath/> component (See Actual behavior & steps to reproduce).

But If I hardcoded the value into the path and refresh the app (See Expected behavior), it does draw the path accordingly.

I think I did everything by the book but still it doesn't work. Did I miss some steps / logics? Or was it a bug?

Expected behavior

It was suppose to look like this (Hardcoded path value):-

Actual behavior & steps to reproduce

But it was behaved like this:-

Can try the code on snack below but I doubt can debug it.

Snack or minimal code example

https://snack.expo.dev/6gv9Coy2L

Package versions

name	version
react	17.0.2
react-native	0.66.3
react-native-reanimated	^2.8.0
react-native-gesture-handler	^2.4.2
react-native-svg	^12.1.0
Xcode	13.2.1
Java	11.0.13
Gradle	4.2.2

Affected platforms

• [x] Android
• [x] iOS

[vladyslavNiemtsev]

The same problem for me!

inside useAnimatedProps hook with console.log - I can see that the dependent shared value changed, but when I pass this animated props into component - it doesn't respect them and doesn't render changes.

react native version: 0.66.0 reanimated version: 2.7.0

[mBarlescu]

The same problem for me!

inside useAnimatedProps hook with console.log - I can see that the dependent shared value changed, but when I pass this animated props into component - it doesn't respect them and doesn't render changes.

react native version: 0.66.0 reanimated version: 2.7.0

same. did you figure it out?

[azim-barcove]

Seems like this issue is doom to trash.

The same problem for me! inside useAnimatedProps hook with console.log - I can see that the dependent shared value changed, but when I pass this animated props into component - it doesn't respect them and doesn't render changes. react native version: 0.66.0 reanimated version: 2.7.0

same. did you figure it out?

In the end I didn't use this library. No respond from "experts" here at all. What I did was, I used basic Animated from React Native itself to draw basic shapes which works almost the same as I wanted.

[vladyslavNiemtsev]

@azim-barcove Hi, I understand your problem, once I ran out of patience when working with bugs in RN.. But unfortunately or fortunately, this is an OS project and no one is obliged to answer you as a priority.

If you want to receive priority support, become a sponsor of the project or support it in some way.

As for this issue, I temporarily bypassed it with setTimeout to force the property setting again.

[mBarlescu]

I had also solved my issue. For anyone with similar problems you can try the following: First I ended up using their built in useAnimatedRef, to call "setNativeProps" within the useDerivedValue hook. I was using 2.8 however, and it seems this version isn't quite as stable as those prior. So i ended scrapping my first solution by switching to version 2.2.4, where useAnimatedProps and useAnimatedStyles works as expected.

[AuroPick]

I had also solved my issue. For anyone with similar problems you can try the following: First I ended up using their built in useAnimatedRef, to call "setNativeProps" within the useDerivedValue hook. I was using 2.8 however, and it seems this version isn't quite as stable as those prior. So i ended scrapping my first solution by switching to version 2.2.4, where useAnimatedProps and useAnimatedStyles works as expected.

Can you share your code

[marksyzm]

I'm finding this also with react-native-svg - the props simply won't update often enough on the SVG element where I'm trying to resize it. I'll try your useAnimatedRef usage to see if that makes a difference. I'm using 2.9.1 for this.

[raphaeldcout]

same issue. Any solution?

[marksyzm]

I managed to get some stuff working well with use of style animations instead of properties but it varies. Y values on a Rect require the property to change, but height is a style. I'm away at the moment but I'll present an example of how they can differ.

[marksyzm]

I think I've got this path issue you mention working with this:

Animated.addWhitelistedNativeProps({d: true});