Accessing the scroll state on UI thread

[stevengoldberg]

Following up on the issue I described here. @jmeistrich recommended using getState on the list ref, which exposes the scroll offset. However, that won't work for my use case since the touch event needs to be processed in a worklet function.

I've patched it locally by declaring a scrollOffset shared value, updating it when state.scroll is updated, and exposing the shared value on the list ref. This solved the issue for me, but I'm not sure if you want a more comprehensive solution.

[jmeistrich]

Oh that's interesting! Are you using the LegendList export from /reanimated? I wonder if we can augment that by adding shared values to the state...

[stevengoldberg]

I'm not using the Reanimated export at the moment — I don't need to animate any list properties or write to any shared values, only read. This is a simplified version of what I'm doing:

const tapGesture = Gesture.Tap()
  .onStart({ absoluteX, absoluteY }) => {
    'worklet'
    const currentScrollOffset = listRef.current?.scrollOffsetSv.value
    const touchOffsetY = absoluteY + currentScrollOffset

    // Now I can determine which list item was touched and respond to the event

  })

return (
  <GestureDetector gesture={tapGesture}>
    <LegendList
      data={photoList}
      numColumns={3}
      // etc
    />
  />
)

[VladyslavMartynov10]

It's better to provide an ability to read scroll offset based on reanimated hook useAnimatedScrollHandler, might be not hard to add for reanimated version of a list.

[VladyslavMartynov10]

@stevengoldberg Is such scroll information enough for your needs?

 (NOBRIDGE) LOG  onScroll {"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 1630.3333333333333}, "contentSize": {"height": 16491.333984375, "width": 402}, "eventName": "onScroll", "layoutMeasurement": {"height": 739.6666666666666, "width": 402}, "zoomScale": 1}
 (NOBRIDGE) LOG  onScroll {"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 1631}, "contentSize": {"height": 16491.333984375, "width": 402}, "eventName": "onScroll", "layoutMeasurement": {"height": 739.6666666666666, "width": 402}, "zoomScale": 1}
 (NOBRIDGE) LOG  📍 Tap at scroll-adjusted Y: 1946
 (NOBRIDGE) LOG  📍 Tap at scroll-adjusted Y: 2097

[stevengoldberg]

@VladyslavMartynov10 Yeah, I think that would work!

[VladyslavMartynov10]

I'll open new PR soon.

[VladyslavMartynov10]

#222

[stevengoldberg]

@VladyslavMartynov10 I think that works!

It seems like the root of the issue is that I was syncing my scrollOffset shared value in onScrollEndDrag and onMomentumScrollEnd rather than onScroll, in order to avoid unnecessary work on the JS thread. But when the list scroll state changes without animating (e.g. when updating the list filter), onScroll will trigger but onScrollEndDrag and onMomentumScrollEnd will not, so my scrollOffset would get out of sync.

Updating the scrollOffset shared value in the onScroll of the useAnimatedScrollHandler thread keeps it synced and away from the JS thread, so it seems like a good solution.

[VladyslavMartynov10]

I'm passing event object to shared value directly so you can get all scroll offset information on UI thread & if my memory serves me right, it's happening synchronously without any additional JS overhead.