1

I'm trying to move a dot along my svg chart following the user's thumb on the screen, however, I am getting an offset when doing so, which means it won't follow the user's thumb but instead will always be a little behind and that offset increases as we scroll left of right. I can' figure out where this offset come from.

Here is my code

const properties = path.svgPathProperties(data);
const cursor = useRef();
const [x, setX] = useState(new Animated.Value(0))

const moveCursor = (value) => {
        const xVal = properties.getPointAtLength(lineLength - value).x
        const yVal = properties.getPointAtLength(lineLength - value).y
        cursor?.current?.setNativeProps({
            top: yVal - cursorRadius,
            left: xVal - cursorRadius
        });

useEffect(() => {
     x.addListener(({ value }) => moveCursor(value));
     moveCursor(0);
}, [])

return(
    
    <Path
        d={data}
        fill='transparent'
        stroke={color}
        strokeWidth={2}></Path>
    <View ref={cursor} style={styles.cursor} />
    <Animated.ScrollView
                        style={StyleSheet.absoluteFill}
                        contentContainerStyle={{ width: lineLength * 2 }}
                        showsHorizontalScrollIndicator={false}
                        scrollEventThrottle={16}
                        bounces={false}
                        onScroll={Animated.event(
                            [
                              {
                                nativeEvent: {
                                  contentOffset: { x },
                                },
                              },
                            ],
                            { useNativeDriver: true },
                      )}
                      horizontal
                    />
)
Hugo
  • 2,073
  • 6
  • 23
  • 46
  • i can imagine the touch event by thumb isn't pixelpefect and that leads to this tolerance – Gismo1337 Feb 25 '22 at 15:14
  • @Gismo1337 I don't think that's the case, I'm following this tut and he doesnt have that issue https://snack.expo.dev/@wcandillon/revolut-chart – Hugo Feb 25 '22 at 15:21
  • He did with reanimated 2, which performance much better than Animated API and used react-native-gesture-handler. – Dániel Boros Feb 25 '22 at 15:25
  • @DánielBoros I don't see that as being the case, in the snack he uses the react native animated api and does not import react-native-gesture-handler – Hugo Feb 25 '22 at 16:11
  • I know this chart and I had the same issue, that the dot was always in the wrong position. You have to fix the position with the margins and paddings. – Dániel Boros Feb 25 '22 at 17:11
  • @DánielBoros the dit is correctly positioned on the line, the issue is that it does not move fast enough, I have to scroll multiple times, instead I would like it to follow the exact location of my finger on the x axis. – Hugo Feb 26 '22 at 18:05
  • If it doesn't move fast enough check the JS thread frame drop. I think there is a lot of calculation. Check it and write the result. I try to help to figure out the solution. – Dániel Boros Feb 27 '22 at 07:51
  • I'm using useNativeDriver: true on my animation so according to this thread from the doc it should not cause a frame drop issue. "The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you set useNativeDriver: true, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops." @DánielBoros – Hugo Feb 28 '22 at 09:08
  • It is true, but I think your chart causing js thread throttling and because of that can't be rendered fast enough. I can suggest that check the js thread drop rate on the performance monitor, or you can check your app performance with dev tools. – Dániel Boros Feb 28 '22 at 15:02
  • I checked it is around 60, how can I figure out if that's the cause of the problem or not? @DánielBoros – Hugo Feb 28 '22 at 15:15
  • I checked the expo example. I think your `issue` is not an issue. The `cursor` has a saved position in all states and when you are moving your finger the coordinates will change. William has a newer chart tutorial that is the same as this but can follow the finger correctly. https://www.youtube.com/watch?v=i20R4lwkJzw&t=835s – Dániel Boros Feb 28 '22 at 15:38

0 Answers0