path.getTotalLength on IOS does not work

[vydimitrov]

Hey, first of all thanks for the great project.

I came across an issue when I try to get path's total length with getTotalLength on IOS. It always returns 0. It works just fine on Android.

I created small demo with Expo Snack to test it. Please refer to the link below:
https://snack.expo.io/@vydimitrov/gettotallength

1. First check it on Android device and you will see the total length is printed on the screen.
2. Change device to IOS and you will see the the length never changes, it is always 0 as the initial value.

It seems that the issue was first reported here - #986 and PR was created to fix it here - #1135. However there seems to be an issue with the IOS implementation.

[msand]

Thanks for reporting, this part of the api has barely been used/tested, great to have more examples. A bit too busy atm to look into it though. If you're interested, make a plain react-native project, and set breakpoints inside xcode, and step thru the logic to see if there's anything unexpected with the state/data.

https://github.com/react-native-community/react-native-svg/blob/e66e87a5b5c090509d5e2127237963f83e60f1e9/ios/ViewManagers/RNSVGRenderableManager.m#L101-L118

[vydimitrov]

Sure, let me see if I can debug it. I will let you know if I find anything.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[aditya1711]

Same with me!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[camilossantos2809]

I'm having the same problem... any updates?

[WoLewicki]

This comes from the fact that the native code dispatching the getTotalLength method runs earlier than the code drawing the components (which sets the path's length). Due to this, the length of a not yet set path equals 0. I think it is not a bug, but just the way those calls work. As a workaround, you can dispatch the method with a timeout so it runs later , something like this: setTimeout(() => setTotalLength(pathRef.current.getTotalLength()), 0);. I will close this issue then. Feel free to comment here if something is wrong and we can always reopen it then.

[Jojocaster]

Turns out there's another, more reliable workaround - you can just add an onLayout to the path, but instead of storing the ref straight away just inspect the values returned by the event (e.nativeEvent.layout):

The first onLayout will return {x: Infinity, y: Infinity, height: 0, width: some value} but there will be another couple of events fired once the values have been computed, and at that point both x, y, and height will be defined - you can now safely store the ref and call getTotalLength(). Here's a snippet:

    const onLayout = (e: LayoutChangeEvent) => {
        // it seems that onLayout is called before the path's length is set internally, hence the check for layout height to ensure the path is drawn before setting the ref and calculating the members' position
        // this is a known issue with react-native-svg - see https://github.com/software-mansion/react-native-svg/issues/1336#issuecomment-1363233611
        // while using setTimeout is recommended, this solution is cleaner and (so far) more reliable.
        if (e.nativeEvent.layout.height) {
            // the ref is stored in the state to trigger a re-render
            setRef(pathRef.current)
        }
    }