Access shared value of scrollY in Scrollables

Ask your Question

Is there a way to access the scrollY value of BottomSheetScrollView so I can animate other elements while the user scrolls? If so, how can I achieve this? In v3 I was able to achieve this by setting value in onScroll prop which is not accessible anymore.

[branislaav]

@mohandere sorry for the late response. I was able to access scrollY by customizing scrollEventsHandlersHook. My solution is not perfect but works for now if anyone has an idea how this can be achieved in a better way let us know, please.

Solution: I copied useScrollEventsHandlersDefault to my repository and renamed it to useCustomScrollEventsHandlers also added third argument scrollY, than I added this block of code to handleOnScroll callback

if (animatedScrollableState.value !== SCROLLABLE_STATE.LOCKED) {
       scrollY.value = e.contentOffset.y
 }

after that, you can use it in a bottom sheet like this

const scrollY = useSharedValue(0)

<BottomSheetScrollView
      scrollEventsHandlersHook={(ref, contentOffsetY) =>
          useCustomScrollEventsHandlers(ref, contentOffsetY, scrollY)
      }
>

[branislaav]

just spotted a bug in my implementation. 🙈 I had sticky header animation styles applied on scrollY but after I called bottomSheetRef.current?.collapse() when still scrolled and then expanded bottom sheet back to full height, header animated styles were still applied.

It looks that I was able to fix it by adding

if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
     scrollY.value = 0
}

to handleOnScroll callback