Refactor the scroll-to-top UX

This commit is contained in:
Paul Frazee 2023-05-24 18:46:27 -05:00
parent 9673225f78
commit 4e1876fe85
9 changed files with 102 additions and 100 deletions

View file

@ -150,7 +150,8 @@ const FeedPage = observer(
renderEmptyState?: () => JSX.Element
}) => {
const store = useStores()
const onMainScroll = useOnMainScroll(store)
const [onMainScroll, isScrolledDown, resetMainScroll] =
useOnMainScroll(store)
const {screen, track} = useAnalytics()
const scrollElRef = React.useRef<FlatList>(null)
const {appState} = useAppState({
@ -178,12 +179,13 @@ const FeedPage = observer(
const scrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET})
}, [scrollElRef])
resetMainScroll()
}, [scrollElRef, resetMainScroll])
const onSoftReset = React.useCallback(() => {
if (isPageFocused) {
feed.refresh()
scrollToTop()
feed.refresh()
}
}, [isPageFocused, scrollToTop, feed])
@ -254,10 +256,11 @@ const FeedPage = observer(
showPostFollowBtn
onPressTryAgain={onPressTryAgain}
onScroll={onMainScroll}
scrollEventThrottle={100}
renderEmptyState={renderEmptyState}
headerOffset={HEADER_OFFSET}
/>
{feed.hasNewLatest && !feed.isRefreshing && (
{isScrolledDown && (
<LoadLatestBtn onPress={onPressLoadLatest} label="Load new posts" />
)}
<FAB