fix: support scroll to top on profile screen

[kadikraman]

Fixes #719

This follows the existing pattern used on the other tabs: we listen to the onScreenSoftReset event and scroll to top when it is fired.

The diff looks bigger than the actual change (due to the forwardRef indentation), the main thing was wrapping ViewSelector in a forwardRef and adding this:

React.useImperativeHandle(ref, () => ({
  scrollToTop: () => {
    flatListRef.current?.scrollToOffset({offset: 0})
  },
}))

so it could be called from the ProfileScreen when a soft reset is triggered.

Before

profile-scroll-before.mp4

After

profile-scroll-after.mp4

[piotrski]

Instead of using useImperativeHandle to handle the scroll-to-top behavior, I suggest using the useScrollToTop hook from react-navigation. It's a more convenient option provided by the library. Check out the documentation for more details.

[kadikraman]

@piotrski for sure, I thought the same, but it is not used for the other tabs (I think because they want to do other actions like refresh the feed as well as scroll to top), so it seemed better to use an existing pattern instead of introducing something new for one tab. For reference, here's Search, Notifications, Home.

[ansh]

Thank you for this! It would be better to use the existing button we have for scrolling to top. Just so we can match the current style on every page.

[kadikraman]

Hi @ansh would you mind explaining what you mean by "existing button"? This uses the same pattern as the other screens. The only difference is that the scrollable page is in a component so we're having to pass the scroll to top event one level down.

[pfrazee]

@kadikraman I think ansh was referring to the useMainScroll and "scroll to top button" facilities we recently ironed out

https://github.com/bluesky-social/social-app/blob/main/src/view/screens/CustomFeed.tsx#L55

https://github.com/bluesky-social/social-app/blob/main/src/view/screens/CustomFeed.tsx#L346

However, I'm pretty sure the changes you've made here are independent of that and a necessary precursor so I'll give this a look. (This is one of those diffs that looks way worse than it is due to the indentation change.)

[pfrazee]

Yeah looks great. Well done, thank you!