Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onScroll prop is never called

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:13 (11 by maintainers)

github_iconTop GitHub Comments

jwaoshcommented, Mar 3, 2020

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 (
      ...other props

computerjazzcommented, Feb 20, 2020

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 (
             ref={ref => {
                if (ref) {
                  this.scrollAnim = ref.scrollOffset
             // ...other props
            {() => onChange(this.scrollAnim, call([this.scrollAnim], this.onScroll))}

see for an example

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Native onScroll Event is Not Being Called
You need to either bind handleOnScroll function in constructor or change it to arrow function. Bind handleOnScroll in constructor
Read more >
ScrollView - React Native
Called when the user stops dragging the scroll view and it either stops or begins to glide. Type. function. onScrollToTop. iOS. ​. Fires...
Read more >
react-scroll - npm
A scroll component for React.js. Latest version: 1.8.9, last published: 15 days ago. Start using react-scroll in your project by running ...
Read more >
React onScroll example - CodePen
This is a demonstration of how to get onScroll to work with a React Component. The div that I've created gets the scrollTop...
Read more >
Passing Functions to Components - React
Pass event handlers and other functions as props to child components: ... Why is my function being called every time the component renders?...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found