diff --git a/src/lib/hooks/useInitialNumToRender.ts b/src/lib/hooks/useInitialNumToRender.ts index 942f0404..82bc89c0 100644 --- a/src/lib/hooks/useInitialNumToRender.ts +++ b/src/lib/hooks/useInitialNumToRender.ts @@ -1,11 +1,19 @@ -import React from 'react' -import {Dimensions} from 'react-native' +import {useWindowDimensions} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' + +import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset' const MIN_POST_HEIGHT = 100 -export function useInitialNumToRender(minItemHeight: number = MIN_POST_HEIGHT) { - return React.useMemo(() => { - const screenHeight = Dimensions.get('window').height - return Math.ceil(screenHeight / minItemHeight) + 1 - }, [minItemHeight]) +export function useInitialNumToRender({ + minItemHeight = MIN_POST_HEIGHT, + screenHeightOffset = 0, +}: {minItemHeight?: number; screenHeightOffset?: number} = {}) { + const {height: screenHeight} = useWindowDimensions() + const {top: topInset} = useSafeAreaInsets() + const bottomBarHeight = useBottomBarOffset() + + const finalHeight = + screenHeight - screenHeightOffset - topInset - bottomBarHeight + return Math.floor(finalHeight / minItemHeight) + 1 } diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx index 2fd9990c..e7823958 100644 --- a/src/screens/Messages/List/index.tsx +++ b/src/screens/Messages/List/index.tsx @@ -96,7 +96,7 @@ export function MessagesScreen({navigation, route}: Props) { ) }, [_, t]) - const initialNumToRender = useInitialNumToRender(80) + const initialNumToRender = useInitialNumToRender({minItemHeight: 80}) const [isPTRing, setIsPTRing] = useState(false) const { diff --git a/src/screens/Profile/Sections/Feed.tsx b/src/screens/Profile/Sections/Feed.tsx index e7ceaab0..fc4eff02 100644 --- a/src/screens/Profile/Sections/Feed.tsx +++ b/src/screens/Profile/Sections/Feed.tsx @@ -8,6 +8,7 @@ import {isNative} from '#/platform/detection' import {FeedDescriptor} from '#/state/queries/post-feed' import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' import {truncateAndInvalidate} from '#/state/queries/util' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' import {usePalette} from 'lib/hooks/usePalette' import {Text} from '#/view/com/util/text/Text' import {Feed} from 'view/com/posts/Feed' @@ -42,6 +43,10 @@ export const ProfileFeedSection = React.forwardRef< const queryClient = useQueryClient() const [hasNew, setHasNew] = React.useState(false) const [isScrolledDown, setIsScrolledDown] = React.useState(false) + const shouldUseAdjustedNumToRender = feed.endsWith('posts_and_author_threads') + const adjustedInitialNumToRender = useInitialNumToRender({ + screenHeightOffset: headerHeight, + }) const onScrollToTop = React.useCallback(() => { scrollElRef.current?.scrollToOffset({ @@ -79,7 +84,9 @@ export const ProfileFeedSection = React.forwardRef< headerOffset={headerHeight} renderEndOfFeed={ProfileEndOfFeed} ignoreFilterFor={ignoreFilterFor} - outsideHeaderOffset={headerHeight} + initialNumToRender={ + shouldUseAdjustedNumToRender ? adjustedInitialNumToRender : undefined + } /> {(isScrolledDown || hasNew) && ( JSX.Element extraData?: any savedFeedConfig?: AppBskyActorDefs.SavedFeed - outsideHeaderOffset?: number + initialNumToRender?: number }): React.ReactNode => { const theme = useTheme() const {track} = useAnalytics() @@ -545,7 +546,7 @@ let Feed = ({ desktopFixedHeight={ desktopFixedHeightOffset ? desktopFixedHeightOffset : true } - initialNumToRender={initialNumToRender} + initialNumToRender={initialNumToRenderOverride ?? initialNumToRender} windowSize={11} onItemSeen={feedFeedback.onItemSeen} />