diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index d819cc76..d078cb8e 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react' +import React, {useRef} from 'react' import {observer} from 'mobx-react-lite' import {ActivityIndicator, FlatList, Text, View} from 'react-native' import { @@ -16,9 +16,31 @@ export const PostThread = observer(function PostThread({ uri: string view: PostThreadViewModel }) { + const ref = useRef(null) + const posts = view.thread ? Array.from(flattenThread(view.thread)) : [] const onRefresh = () => { view?.refresh().catch(err => console.error('Failed to refresh', err)) } + const onLayout = () => { + const index = posts.findIndex(post => post._isHighlightedPost) + if (index !== -1) { + ref.current?.scrollToIndex({ + index, + animated: false, + viewOffset: 40, + }) + } + } + const onScrollToIndexFailed = (info: { + index: number + highestMeasuredFrameIndex: number + averageItemLength: number + }) => { + ref.current?.scrollToOffset({ + animated: false, + offset: info.averageItemLength * info.index, + }) + } // loading // = @@ -47,17 +69,19 @@ export const PostThread = observer(function PostThread({ // loaded // = - const posts = view.thread ? Array.from(flattenThread(view.thread)) : [] const renderItem = ({item}: {item: PostThreadViewPostModel}) => ( ) return ( item._reactKey} renderItem={renderItem} refreshing={view.isRefreshing} onRefresh={onRefresh} + onLayout={onLayout} + onScrollToIndexFailed={onScrollToIndexFailed} style={{flex: 1}} /> ) diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 8ea79b92..e7c695ca 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -134,7 +134,12 @@ export const MobileShell: React.FC = observer(() => { if (store.nav.tab.current.url === '/') { scrollElRef.current?.scrollToOffset({offset: 0}) } else { - store.nav.tab.goBackToZero() + if (store.nav.tab.canGoBack) { + // sanity check + store.nav.tab.goBackToZero() + } else { + store.nav.navigate('/') + } } } const onPressMenu = () => setMainMenuActive(true)