Allow a hook like `react-navigation`'s hook `useScrollToTop` to scroll all tabs to the top

[pedrobern]

Allow a hook like `react-navigation`'s hook `useScrollToTop` to scroll all tabs to the top

[PedroBern]

Related: #2

[alexpchin]

@PedroBern I was going to reference that issue actually! Also thanks for the good first issue 👍 Lol

[PedroBern]

@alexpchin this is a must-have feature, I was thinking about it since the beginning, you can see the related issue is number 2, the second opened issue ever. But I didn't have the time to work on it yet.

I think your suggestion to implement a hook simply to scroll to top is a lot easier to implement than #2.

[PedroBern]

This is easy to implement in v3.

[alexpchin]

@PedroBern Now with v3, this will scroll all tabs to the top FYI. We can DRY this implementation but just adding a note here for the moment.

// Setup some tab refs 
const containerRef = useAnimatedRef();
const uploadsRef = useAnimatedRef();
const aboutRef = useAnimatedRef();
const likesRef = useAnimatedRef();
const travelsRef = useAnimatedRef();

.
.
.

// Function to scroll all tabs to the top when the user clicks on the bottom tab
// - https://reactnavigation.org/docs/use-scroll-to-top/  
useScrollToTop(containerRef);
useScrollToTop(uploadsRef);
useScrollToTop(aboutRef);
useScrollToTop(likesRef);
useScrollToTop(travelsRef);

[alexpchin]

In the latest v4 version, if you use https://reactnavigation.org/docs/use-scroll-to-top/

const pageRef = useRef();
useScrollToTop(pageRef);

.
.
.
<Tabs.FlatList
      .
      .
      ref={pageRef}
      .
      .
    />

Then the page will scroll up so that the Tab is at the top of the screen rather than scrolling Down to reset the page so that the header is at the top of the screen.

E.g: From

To:

As per https://reactnavigation.org/docs/use-scroll-to-top/#providing-scroll-offset, you can add an offset. However, it's still a bit buggy... I'm trying to work out why.

useScrollToTop(
    useRef({
      scrollToTop: () =>
        pageRef.current?.scrollToOffset({
          // Doesn't work
          // offset: -(headerHeight + tabBarHeight),
          // Does work
          offset: -999,
        }),
    }),
  );