Home button scrolls to top when on home page

4 files changed, 27 insertions, 14 deletions

diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 028480eb4..dc341ddd5 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/src/view/com/posts/Feed.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Text, View, FlatList, StyleProp, ViewStyle} from 'react-native'
 import {FeedModel, FeedItemModel} from '../../../state/models/feed-view'
@@ -7,9 +7,11 @@ import {FeedItem} from './FeedItem'
 export const Feed = observer(function Feed({
   feed,
   style,
+  scrollElRef,
 }: {
   feed: FeedModel
   style?: StyleProp<ViewStyle>
+  scrollElRef?: MutableRefObject<FlatList<any> | null>
 }) {
   // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
   //   VirtualizedList: You have a large list that is slow to update - make sure your
@@ -30,6 +32,7 @@ export const Feed = observer(function Feed({
       {feed.hasError && <Text>{feed.error}</Text>}
       {feed.hasContent && (
         <FlatList
+          ref={scrollElRef}
           data={feed.feed.slice()}
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
diff --git a/src/view/routes.ts b/src/view/routes.ts
index 1f2f3544f..1054ff8d2 100644
--- a/src/view/routes.ts
+++ b/src/view/routes.ts
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, {MutableRefObject} from 'react'
+import {FlatList} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {Home} from './screens/Home'
 import {Search} from './screens/Search'
@@ -15,6 +16,7 @@ import {Settings} from './screens/Settings'
 export type ScreenParams = {
   params: Record<string, any>
   visible: boolean
+  scrollElRef: MutableRefObject<FlatList<any> | undefined>
 }
 export type Route = [React.FC<ScreenParams>, IconProp, RegExp]
 export type MatchResult = {
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 508ce78c0..f48c8cde4 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,20 +1,20 @@
 import React, {useState, useEffect, useMemo} from 'react'
-import {useSharedValue} from 'react-native-reanimated'
 import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {Feed} from '../com/posts/Feed'
 import {FAB} from '../com/util/FloatingActionButton'
-import {Selector} from '../com/util/Selector'
 import {useStores} from '../../state'
 import {FeedModel} from '../../state/models/feed-view'
 import {ComposePostModel} from '../../state/models/shell'
 import {ScreenParams} from '../routes'
 import {s} from '../lib/styles'
 
-export const Home = observer(function Home({visible}: ScreenParams) {
+export const Home = observer(function Home({
+  visible,
+  scrollElRef,
+}: ScreenParams) {
   const store = useStores()
   const [hasSetup, setHasSetup] = useState<boolean>(false)
-  const [selectedViewIndex, setSelectedViewIndex] = useState<number>(0)
   const defaultFeedView = useMemo<FeedModel>(
     () =>
       new FeedModel(store, 'home', {
@@ -43,13 +43,10 @@ export const Home = observer(function Home({visible}: ScreenParams) {
   const onCreatePost = () => {
     defaultFeedView.loadLatest()
   }
-  const onSelectView = (viewIndex: number) => {
-    setSelectedViewIndex(viewIndex)
-  }
 
   return (
     <View style={s.flex1}>
-      <Feed key="default" feed={defaultFeedView} />
+      <Feed key="default" feed={defaultFeedView} scrollElRef={scrollElRef} />
       <FAB icon="pen-nib" onPress={onComposePress} />
     </View>
   )
diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx
index b8e83e873..732527963 100644
--- a/src/view/shell/mobile/index.tsx
+++ b/src/view/shell/mobile/index.tsx
@@ -1,9 +1,9 @@
-import React, {useState, useEffect} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import {observer} from 'mobx-react-lite'
 import {
   useWindowDimensions,
+  FlatList,
   GestureResponderEvent,
-  Image,
   SafeAreaView,
   StyleSheet,
   Text,
@@ -97,6 +97,7 @@ export const MobileShell: React.FC = observer(() => {
   const [isLocationMenuActive, setLocationMenuActive] = useState(false)
   const [isMainMenuActive, setMainMenuActive] = useState(false)
   const [isTabsSelectorActive, setTabsSelectorActive] = useState(false)
+  const scrollElRef = useRef<FlatList | undefined>()
   const winDim = useWindowDimensions()
   const swipeGestureInterp = useSharedValue<number>(0)
   const screenRenderDesc = constructScreenRenderDesc(store.nav)
@@ -109,7 +110,13 @@ export const MobileShell: React.FC = observer(() => {
 
   const onPressBack = () => store.nav.tab.goBack()
   const onPressForward = () => store.nav.tab.goForward()
-  const onPressHome = () => store.nav.navigate('/')
+  const onPressHome = () => {
+    if (store.nav.tab.current.url === '/') {
+      scrollElRef.current?.scrollToOffset({offset: 0})
+    } else {
+      store.nav.navigate('/')
+    }
+  }
   const onPressMenu = () => setMainMenuActive(true)
   const onPressTabs = () => setTabsSelectorActive(true)
 
@@ -184,7 +191,11 @@ export const MobileShell: React.FC = observer(() => {
                         styles.screen,
                         current ? swipeTransform : undefined,
                       ]}>
-                      <Com params={params} visible={true} />
+                      <Com
+                        params={params}
+                        visible={true}
+                        scrollElRef={current ? scrollElRef : undefined}
+                      />
                     </Animated.View>
                   </Screen>
                 )