NestableScrollContainer missing "onScroll" prop

[karlkristopher]

Currently the project readme states:

NestableScrollContainer extends the ScrollView from react-native-gesture-handler, and NestableDraggableFlatList extends DraggableFlatList, so all available props may be passed into both of them.

However, the current implementation of NestableScrollContainer is overwriting the onScroll prop.

The DraggableFlatList uses a onScrollOffsetChange as a stand-in for onScroll, and I was hoping we could have a similar prop for NestableScrollContainer.

I went ahead and created a pull request for the change: https://github.com/computerjazz/react-native-draggable-flatlist/pull/459.

Open to feedback 🙂 And thanks for the library!

[MaxiAschenbrenner]

@computerjazz any update on this? having the same issue...

[Grantismo]

+1

[milkman4]

has anyone found a workaround for this? :/

[MaxiAschenbrenner]

@milkman4 I just patched the default values (autoscrollSpeed & autoscrollThreshold) in the useNestedAutoScroll function (Path: react-native-draggable-flatlist/src/hooks/useNestedAutoScroll.tsx) to the ones I need in my project. Keep in mind that this only works if you need the same offset/speed everywhere.

[milkman4]

were you able to pass in an event handler to the onScroll prop for the scrollView?

[MaxiAschenbrenner]

sorry, I misunderstood the question. The solution is also a patc :) This one should give you the onScrollOffsetChange for the NestableScrollContainer.

diff --git a/node_modules/react-native-draggable-flatlist/lib/typescript/components/NestableScrollContainer.d.ts b/node_modules/react-native-draggable-flatlist/lib/typescript/components/NestableScrollContainer.d.ts
index 3e13d2d..9586a20 100644
--- a/node_modules/react-native-draggable-flatlist/lib/typescript/components/NestableScrollContainer.d.ts
+++ b/node_modules/react-native-draggable-flatlist/lib/typescript/components/NestableScrollContainer.d.ts
@@ -1,4 +1,9 @@
 import React from "react";
 import { ScrollViewProps } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-export declare const NestableScrollContainer: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;
+
+type NestableScrollContainerInnerProps = {
+    onScrollOffsetChange?: (scrollOffset: number) => void;
+  } & Omit<ScrollViewProps, "onScroll">;
+
+export declare const NestableScrollContainer: React.ForwardRefExoticComponent<NestableScrollContainerInnerProps & React.RefAttributes<ScrollView>>;
diff --git a/node_modules/react-native-draggable-flatlist/src/components/NestableScrollContainer.tsx b/node_modules/react-native-draggable-flatlist/src/components/NestableScrollContainer.tsx
index 61054a7..9469d4a 100644
--- a/node_modules/react-native-draggable-flatlist/src/components/NestableScrollContainer.tsx
+++ b/node_modules/react-native-draggable-flatlist/src/components/NestableScrollContainer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { LayoutChangeEvent, ScrollViewProps } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import Animated, { useAnimatedScrollHandler } from "react-native-reanimated";
+import Animated, { useAnimatedScrollHandler, runOnJS } from "react-native-reanimated";
 import {
   NestableScrollContainerProvider,
   useSafeNestableScrollContainerContext,
@@ -9,8 +9,13 @@ import {
 import { useStableCallback } from "../hooks/useStableCallback";

 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+ type NestableScrollContainerInnerProps = {
+  onScrollOffsetChange?: (scrollOffset: number) => void;
+} & Omit<ScrollViewProps, "onScroll">;

-function NestableScrollContainerInner(props: ScrollViewProps) {
+function NestableScrollContainerInner(
+  props: NestableScrollContainerInnerProps
+) {
   const {
     outerScrollOffset,
     containerSize,
@@ -19,9 +24,14 @@ function NestableScrollContainerInner(props: ScrollViewProps) {
     outerScrollEnabled,
   } = useSafeNestableScrollContainerContext();

-  const onScroll = useAnimatedScrollHandler({
-    onScroll: ({ contentOffset }) => {
-      outerScrollOffset.value = contentOffset.y;
+  const onScroll = useStableCallback((scrollOffset: number) => {
+    props.onScrollOffsetChange?.(scrollOffset);
+  });
+
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      outerScrollOffset.value = event.contentOffset.y;
+      runOnJS(onScroll)(event.contentOffset.y);
     },
   });

@@ -45,13 +55,13 @@ function NestableScrollContainerInner(props: ScrollViewProps) {
       scrollEnabled={outerScrollEnabled}
       ref={scrollableRef}
       scrollEventThrottle={1}
-      onScroll={onScroll}
+      onScroll={scrollHandler}
     />
   );
 }

 export const NestableScrollContainer = React.forwardRef(
-  (props: ScrollViewProps, forwardedRef?: React.ForwardedRef<ScrollView>) => {
+  (props: NestableScrollContainerInnerProps, forwardedRef?: React.ForwardedRef<ScrollView>) => {
     return (
       <NestableScrollContainerProvider
         forwardedRef={

[chuanlol]

+1