How can I use two of 'ref' for scroll up in react-native environment

Question

I am making an application with React Native.

Currently, we are implementing navigation through the bottom tab.

Bottom tab → Stack → Screen composition is simple.

Clicking the bottom tab icon raises the scroll to the top even if the scroll is at the bottom

I am using useScrollToTop(ref). This function works fine.

At the same time as the corresponding function, I want to implement a function that raises the scroll to the top when the scroll is located at the bottom by making a ^ (arrow image) at the bottom right point for each screen.

But, as a result of googleling, it was mostly a way to use ref.

Each screen uses a FlatList, and ref={ref} is already assigned in the FlatList.

Here, I am trying to apply the Googleing results, so I can't get a sense of what to do.

If you know any other way, please let me know

Answer 1

I just want to make things clearer regarding this part "and ref={ref} is already assigned in the FlatList" from what you've said: each class component could have its own ref ( ref={ref}, the ref after the = sign could've been easily named flatListRef for a clearer understanding, having then ref={flatListRef}). These being said, you could have, a function for pressing that arrow (^), which uses the flatListRef to scroll to the top. Something like this:

 const scrollToTop = () => {
    this.flatListRef.scrollToOffset({ animated: true, offset: 0 });
 }