onScroll prop is never called

The onScroll prop is ignored because it is overridden within this module.

onScroll is internally set to a Reanimated Event, and does not call the onScroll that is passed as a prop.

Is there any way we can get this to behave the same as a normal FlatList, and still do what is needed internally?

I have created a new issue because the original one #53, DID get fixed but a subsequent update broke it again.

Edit: typos

[jwaosh]

facing the same issue as well. Is there currently a timeline where this issue will be addressed? would love to be able to have something similar to onScroll without having to incorporate another library.

---

edit - was able to get it to work as well. here’s a tweaked implementation of @computerjazz 's workaround using hooks

import Animated from 'react-native-reanimated'

  const { call, onChange, useCode } = Animated
  const [scrollAnim, setScrollAnim] = useState<AnimatedValue>(new Animated.Value(0))
  const scrollableListRef = useRef<DraggableFlatList>(null)
  const onScrollTest = ([scrollOffset]: readonly number[]) => console.log("on scroll", scrollOffset)

  useEffect(() => {
    if(scrollableListRef) setScrollAnim(scrollableListRef.current?.scrollOffset)
  }, [scrollableListRef])

  useCode(() => onChange(scrollAnim, call([scrollAnim], onScrollTest)), [scrollAnim])

return (
    <DraggableFlatList
      ref={scrollableListRef}
      ...other props
     />)

[computerjazz]

I have not worked on it, but if all you need is a callback with the scrollOffset, you shouldn’t need to fork – you can grab the scrollOffset from the ref and then use it in an <Animated.Code> block:

import Animated from 'react-native-reanimated'
const { call, onChange } = Aniamted

class MyComponent {

  scrollAnim = new Animated.Value(0)
  onScroll = ([scrollOffset]) => console.log("on scroll", scrollOffset)

  render() {
    return (
       <>
          <DraggableFlatList  
             ref={ref => {
                if (ref) {
                  this.scrollAnim = ref.scrollOffset
                 }
                }}
             // ...other props
          />
          <Animated.Code>
            {() => onChange(this.scrollAnim, call([this.scrollAnim], this.onScroll))}
          </Animated.Code>
    </>
    )
  }
}

see https://snack.expo.io/@computerjazz/swipetodelete-pkg for an example