react-native-collapsable-tab-view onScroll not working

I've been working on a React Native project for about six months. Despite this time, I'm continuously learning and encountering new challenges, underscoring that there's always more to master

One problem I encountered was a bug in the react-native-collapsible-tab-view package, specifically related to callback props like onScroll, onScrollEndDrag, among others

Initially I tried to extract the nativeEvent from onScrollEndDrag inside <Tabs.ScrollView onScrollEndDrag={callback} /> but it return nothing and I tried everything but I didn't seem to work.

Solution 1

By using usCurrentTabScrollY() directly from the package and useAnimatedReaction from react-native-animated, you can extract the onScroll's native event value from it by following below code. P.S: This approach only work if you are using that hook separately in a standalone component and it's wrapped by <Tabs.Container> from react-native-collapsable-tab-view package.

  const scrollY = useCurrentTabScrollY();

  //Function to extra 
  const scrollHandler = useCallback((value) => {
    //Execute statement with scrollEvent value here
  }, []);

  useAnimatedReaction(
    () => scrollY.value,
    (y) => {
      runOnJS(scrollHandler)(y);
    },
    [],
  );

Solution 2

Finally, I decided to assign an empty function () => {} to onScroll. After this adjustment, I found that only onScrollEndDrag callbacks inside <Tabs.ScrollView /> work and it started to return nativeEvent as expected and functioned properly.

I hope my experience can offer some guidance. Thank you for reading