Search code examples
react-nativescrollexposcrollview

scrollToEnd in React Native Scrollview

I'm working on an App with React Native (expo) which has to scroll to the end of a ScrollView component. I've tried both scrollTo() and scrollToEnd() but neither is working. The error messages are always some kind of "... is not a function".

I've tried every example of the task I've found but it's still not working.

I tried different ways of using ref's and functions. For example one of the most shown patterns on the web:

const scrollRef = useRef()
<ScrollView ref={scrollRef} onContentSizeChange={scrollRef.current.scrollToEnd()}>

The error message for this one is:

TypeError: undefined is not an object (evaluating 'scrollRef.current.scrollToEnd')

(useRef() is imported from react)

I've also tried to scroll to the end via scrollTo() from a function outside of the return section but this always led to

scrollTo() is not defined

(same thing when I tried scrollToEnd())

I'm using a function and not a class in my App.js, is this making any difference in this specific case?

Please feel free to share your thoughts even if they might not be that specific, everything might be helpful.

Have a nice day.

Solution

  • Change

    onContentSizeChange={scrollRef.current.scrollToEnd()}

    to

    onContentSizeChange={() => scrollRef.current.scrollToEnd()}

    Learn More about Arrow Function in Render here.