React-native-reanimated: Animated values NaN at first frame ?

[colinux]

In an animation I have found my Animated values are NaN at the very first frame when clock is started, ignoring values given at initialization.

Because of that in my example involving react-native-svg, a strokeDashoffset NaN prop of a Circle is converted into 0 for that frame (instead of 2πR), which leads to a visual blink of the circle on devices not having an optimal FPS (iphone 6, Google Pixel or low end devices). (A faster device can see the issue too by slowing the render method (console.log or in a dev environment))

Here is a simplified snack https://snack.expo.io/@colinux/animated-value-nan-in-first-frame

I don't know if it's an expected behavior or if I'm doing something wrong with my components, or if it's an issue with react-native-svg handling this edge case.

From my understanding and my tests, progress value coming from runTiming is NaN, causing derived values to be NaN as well in cascade, until final strokeDashoffset.

If it's the normal behavior, I didn't find a proper way to "wait" for the clock to be started before showing the animation.

Reproduced in v1.2.0 and v1.4.0

Here is where strokeDashoffset is used in the svg lib https://github.com/react-native-community/react-native-svg/blob/master/src/lib/extract/extractStroke.ts#L84

[dominiczaq]

I'm also having this issue. When rendering list of elements inside Flatlist the visual blink on element mount is very noticeable and it's very janky when scrolling.

Any idea about possible workarounds or where to start looking when trying to fix it?

[Ashoat]

I'm seeing a similar "flicker" type issue, which I've documented in #857. It doesn't have to do with react-native-svg, and doing a cond(defined( check doesn't seem to address it, so I don't think it has to do with NaN.

[jakub-gonet]

This is probably fixed by #1027.