diff options
| -rw-r--r-- | src/view/com/posts/Feed.tsx | 5 | ||||
| -rw-r--r-- | src/view/routes.ts | 4 | ||||
| -rw-r--r-- | src/view/screens/Home.tsx | 13 | ||||
| -rw-r--r-- | src/view/shell/mobile/index.tsx | 19 | ||||
| -rw-r--r-- | 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 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> ) diff --git a/todos.txt b/todos.txt index ce07e83c6..8f1a892ea 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 |