fix: support scroll to top on profile screen (#725)

* Support scroll to top on profile screen

* Refactor types

* Remove async

* Improve types

src/view/com/util/ViewSelector.tsx

@@ -13,18 +13,13 @@ const HEADER_ITEM = {_reactKey: '__header__'}
 const SELECTOR_ITEM = {_reactKey: '__selector__'}
 const STICKY_HEADER_INDICES = [1]
 
-export function ViewSelector({
+export type ViewSelectorHandle = {
-  sections,
+  scrollToTop: () => void
-  items,
+}
-  refreshing,
+
-  renderHeader,
+export const ViewSelector = React.forwardRef<
-  renderItem,
+  ViewSelectorHandle,
-  ListFooterComponent,
+  {
-  onSelectView,
-  onScroll,
-  onRefresh,
-  onEndReached,
-}: {
     sections: string[]
     items: any[]
     refreshing?: boolean
@@ -40,9 +35,26 @@ export function ViewSelector({
     onScroll?: OnScrollCb
     onRefresh?: () => void
     onEndReached?: (info: {distanceFromEnd: number}) => void
-}) {
+  }
+>(
+  (
+    {
+      sections,
+      items,
+      refreshing,
+      renderHeader,
+      renderItem,
+      ListFooterComponent,
+      onSelectView,
+      onScroll,
+      onRefresh,
+      onEndReached,
+    },
+    ref,
+  ) => {
     const pal = usePalette('default')
     const [selectedIndex, setSelectedIndex] = useState<number>(0)
+    const flatListRef = React.useRef<FlatList>(null)
 
     // events
     // =
@@ -57,6 +69,12 @@ export function ViewSelector({
       onSelectView?.(selectedIndex)
     }, [selectedIndex, onSelectView])
 
+    React.useImperativeHandle(ref, () => ({
+      scrollToTop: () => {
+        flatListRef.current?.scrollToOffset({offset: 0})
+      },
+    }))
+
     // rendering
     // =
 
@@ -88,6 +106,7 @@ export function ViewSelector({
     )
     return (
       <FlatList
+        ref={flatListRef}
         data={data}
         keyExtractor={keyExtractor}
         renderItem={renderItemInternal}
@@ -109,7 +128,8 @@ export function ViewSelector({
         scrollIndicatorInsets={{right: 1}} // fixes a bug where the scroll indicator is on the middle of the screen https://github.com/bluesky-social/social-app/pull/464
       />
     )
-}
+  },
+)
 
 export function Selector({
   selectedIndex,

src/view/screens/Profile.tsx

@@ -4,7 +4,7 @@ import {observer} from 'mobx-react-lite'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
-import {ViewSelector} from '../com/util/ViewSelector'
+import {ViewSelector, ViewSelectorHandle} from '../com/util/ViewSelector'
 import {CenteredView} from '../com/util/Views'
 import {ScreenHider} from 'view/com/util/moderation/ScreenHider'
 import {ProfileUiModel, Sections} from 'state/models/ui/profile'
@@ -35,6 +35,7 @@ export const ProfileScreen = withAuthRequired(
   observer(({route}: Props) => {
     const store = useStores()
     const {screen, track} = useAnalytics()
+    const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
 
     useEffect(() => {
       screen('Profile')
@@ -47,12 +48,17 @@ export const ProfileScreen = withAuthRequired(
     )
     useSetTitle(combinedDisplayName(uiState.profile))
 
+    const onSoftReset = React.useCallback(() => {
+      viewSelectorRef.current?.scrollToTop()
+    }, [])
+
     useEffect(() => {
       setHasSetup(false)
     }, [route.params.name])
 
     useFocusEffect(
       React.useCallback(() => {
+        const softResetSub = store.onScreenSoftReset(onSoftReset)
         let aborted = false
         store.shell.setMinimalShellMode(false)
         const feedCleanup = uiState.feed.registerListeners()
@@ -69,8 +75,9 @@ export const ProfileScreen = withAuthRequired(
         return () => {
           aborted = true
           feedCleanup()
+          softResetSub.remove()
         }
-      }, [hasSetup, uiState, store]),
+      }, [store, onSoftReset, uiState, hasSetup]),
     )
 
     // events
@@ -247,6 +254,7 @@ export const ProfileScreen = withAuthRequired(
           />
         ) : uiState.profile.hasLoaded ? (
           <ViewSelector
+            ref={viewSelectorRef}
             swipeEnabled={false}
             sections={uiState.selectorItems}
             items={uiState.uiItems}