show scroll to top button when scrolling stops
parent
0fd5c9294a
commit
858ec6438d
|
@ -2,6 +2,9 @@ import {useState} from 'react'
|
|||
import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
|
||||
import {RootStoreModel} from 'state/index'
|
||||
|
||||
export type onMomentumScrollEndCb = (
|
||||
event: NativeSyntheticEvent<NativeScrollEvent>,
|
||||
) => void
|
||||
export type OnScrollCb = (
|
||||
event: NativeSyntheticEvent<NativeScrollEvent>,
|
||||
) => void
|
||||
|
|
|
@ -14,7 +14,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
|
|||
import {PostsFeedModel} from 'state/models/feeds/posts'
|
||||
import {FeedSlice} from './FeedSlice'
|
||||
import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
|
||||
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
|
||||
import {OnScrollCb, onMomentumScrollEndCb} from 'lib/hooks/useOnMainScroll'
|
||||
import {s} from 'lib/styles'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
|
@ -31,6 +31,8 @@ export const Feed = observer(function Feed({
|
|||
scrollElRef,
|
||||
onPressTryAgain,
|
||||
onScroll,
|
||||
scrollEventThrottle,
|
||||
onMomentumScrollEnd,
|
||||
renderEmptyState,
|
||||
testID,
|
||||
headerOffset = 0,
|
||||
|
@ -43,6 +45,8 @@ export const Feed = observer(function Feed({
|
|||
scrollElRef?: MutableRefObject<FlatList<any> | null>
|
||||
onPressTryAgain?: () => void
|
||||
onScroll?: OnScrollCb
|
||||
scrollEventThrottle?: number
|
||||
onMomentumScrollEnd?: onMomentumScrollEndCb
|
||||
renderEmptyState?: () => JSX.Element
|
||||
testID?: string
|
||||
headerOffset?: number
|
||||
|
@ -180,6 +184,8 @@ export const Feed = observer(function Feed({
|
|||
contentContainerStyle={s.contentContainer}
|
||||
style={{paddingTop: headerOffset}}
|
||||
onScroll={onScroll}
|
||||
scrollEventThrottle={scrollEventThrottle}
|
||||
onMomentumScrollEnd={onMomentumScrollEnd}
|
||||
onEndReached={onEndReached}
|
||||
onEndReachedThreshold={0.6}
|
||||
removeClippedSubviews={true}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useMemo, useRef} from 'react'
|
||||
import React, {useMemo, useRef, useState} from 'react'
|
||||
import {NativeStackScreenProps} from '@react-navigation/native-stack'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
|
@ -25,6 +25,8 @@ import {useSetTitle} from 'lib/hooks/useSetTitle'
|
|||
import {shareUrl} from 'lib/sharing'
|
||||
import {toShareUrl} from 'lib/strings/url-helpers'
|
||||
import {Haptics} from 'lib/haptics'
|
||||
import { LoadLatestBtn } from 'view/com/util/load-latest/LoadLatestBtn'
|
||||
import { onMomentumScrollEndCb } from 'lib/hooks/useOnMainScroll'
|
||||
|
||||
const HITSLOP = {top: 5, left: 5, bottom: 5, right: 5}
|
||||
|
||||
|
@ -48,7 +50,7 @@ export const CustomFeedScreen = withAuthRequired(
|
|||
return feed
|
||||
}, [store, uri])
|
||||
const isPinned = store.me.savedFeeds.isPinned(uri)
|
||||
|
||||
const [allowScrollToTop, setAllowScrollToTop] = useState(false)
|
||||
useSetTitle(currentFeed?.displayName)
|
||||
|
||||
const onToggleSaved = React.useCallback(async () => {
|
||||
|
@ -266,15 +268,29 @@ export const CustomFeedScreen = withAuthRequired(
|
|||
isPinned,
|
||||
])
|
||||
|
||||
const onMomentumScrollEnd: onMomentumScrollEndCb = React.useCallback((event) => {
|
||||
if (event.nativeEvent.contentOffset.y > 200) {
|
||||
setAllowScrollToTop(true)
|
||||
} else {
|
||||
setAllowScrollToTop(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View style={s.hContentRegion}>
|
||||
<ViewHeader title="" renderButton={renderHeaderBtns} />
|
||||
<Feed
|
||||
scrollElRef={scrollElRef}
|
||||
feed={algoFeed}
|
||||
onMomentumScrollEnd={onMomentumScrollEnd}
|
||||
ListHeaderComponent={renderListHeaderComponent}
|
||||
extraData={[uri, isPinned]}
|
||||
/>
|
||||
{allowScrollToTop ? <LoadLatestBtn onPress={() => {
|
||||
scrollElRef.current?.scrollToOffset({offset: 0, animated: true})
|
||||
}}
|
||||
label='Scroll to top'
|
||||
/> : null}
|
||||
</View>
|
||||
)
|
||||
}),
|
||||
|
|
Loading…
Reference in New Issue