From d7a75a206281b99ad38fea576aa20a0557fd3d65 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 11 Oct 2022 09:37:01 -0500 Subject: [PATCH] Home button scrolls to top when on home page --- src/view/com/posts/Feed.tsx | 5 ++++- src/view/routes.ts | 4 +++- src/view/screens/Home.tsx | 13 +++++-------- src/view/shell/mobile/index.tsx | 19 +++++++++++++++---- todos.txt | 4 ++-- 5 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 028480eb..dc341ddd 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 + scrollElRef?: MutableRefObject | 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 && {feed.error}} {feed.hasContent && ( item._reactKey} renderItem={renderItem} diff --git a/src/view/routes.ts b/src/view/routes.ts index 1f2f3544..1054ff8d 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 visible: boolean + scrollElRef: MutableRefObject | undefined> } export type Route = [React.FC, IconProp, RegExp] export type MatchResult = { diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 508ce78c..f48c8cde 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(false) - const [selectedViewIndex, setSelectedViewIndex] = useState(0) const defaultFeedView = useMemo( () => 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 ( - + ) diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index b8e83e87..73252796 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() const winDim = useWindowDimensions() const swipeGestureInterp = useSharedValue(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, ]}> - + ) diff --git a/todos.txt b/todos.txt index ce07e83c..8f1a892e 100644 --- a/todos.txt +++ b/todos.txt @@ -4,11 +4,11 @@ Paul's todo list - Update to RN 0.70 - Cache some profile/userinfo lookups - Cursor behaviors on all views + - Home button should scroll to top - Onboarding flow - * - Private beta - Users list - - Firehose - Linking - Web linking - App linking @@ -20,4 +20,4 @@ Paul's todo list - Bugs - Check that sub components arent reloading too much - Titles are getting screwed up (possibly swipe related) - - Home feed not showing own posts \ No newline at end of file + - Home feed sizing is off now \ No newline at end of file