From b8f36a8bca0eab08e09e0a56be63ade40e710f34 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 6 Mar 2024 11:02:48 -0800 Subject: Fix double border on web hashtag list (#3091) * add `topBorder` to Views.tsx * fix double border --- src/screens/Hashtag.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'src/screens/Hashtag.tsx') diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 09a1f2824..82ea75aa2 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -1,6 +1,5 @@ import React from 'react' import {ListRenderItemInfo, Pressable} from 'react-native' -import {atoms as a, useBreakpoints} from '#/alf' import {useFocusEffect} from '@react-navigation/native' import {useSetMinimalShellMode} from 'state/shell' import {ViewHeader} from 'view/com/util/ViewHeader' @@ -19,7 +18,6 @@ import {List} from 'view/com/util/List' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {sanitizeHandle} from 'lib/strings/handles' -import {CenteredView} from 'view/com/util/Views' import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' import {shareUrl} from 'lib/sharing' import {HITSLOP_10} from 'lib/constants' @@ -38,7 +36,6 @@ export default function HashtagScreen({ }: NativeStackScreenProps) { const {tag, author} = route.params const setMinimalShellMode = useSetMinimalShellMode() - const {gtMobile} = useBreakpoints() const {_} = useLingui() const [isPTR, setIsPTR] = React.useState(false) @@ -103,7 +100,7 @@ export default function HashtagScreen({ }, [isFetching, hasNextPage, error, fetchNextPage]) return ( - + <> )} - + ) } -- cgit 1.4.1 From 8b0e575f6423575c08e9a6748be41c888611d631 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 6 Mar 2024 15:33:23 -0800 Subject: Adjust FlatList performance in main feeds (#3134) * adjust flatlist perf settings * calculate initial num to render based on screen height * adjust window size * don't react to screen height changes --- src/lib/hooks/useInitialNumToRender.ts | 11 +++++++++++ src/screens/Hashtag.tsx | 4 ++++ src/view/com/posts/Feed.tsx | 4 ++++ 3 files changed, 19 insertions(+) create mode 100644 src/lib/hooks/useInitialNumToRender.ts (limited to 'src/screens/Hashtag.tsx') diff --git a/src/lib/hooks/useInitialNumToRender.ts b/src/lib/hooks/useInitialNumToRender.ts new file mode 100644 index 000000000..942f0404a --- /dev/null +++ b/src/lib/hooks/useInitialNumToRender.ts @@ -0,0 +1,11 @@ +import React from 'react' +import {Dimensions} from 'react-native' + +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]) +} diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 82ea75aa2..f1b817370 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -22,6 +22,7 @@ import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOut import {shareUrl} from 'lib/sharing' import {HITSLOP_10} from 'lib/constants' import {isNative} from 'platform/detection' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' const renderItem = ({item}: ListRenderItemInfo) => { return @@ -37,6 +38,7 @@ export default function HashtagScreen({ const {tag, author} = route.params const setMinimalShellMode = useSetMinimalShellMode() const {_} = useLingui() + const initialNumToRender = useInitialNumToRender() const [isPTR, setIsPTR] = React.useState(false) const fullTag = React.useMemo(() => { @@ -154,6 +156,8 @@ export default function HashtagScreen({ onRetry={fetchNextPage} /> } + initialNumToRender={initialNumToRender} + windowSize={11} /> )} diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 54d8aa224..cd3e98785 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -32,6 +32,7 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {DiscoverFallbackHeader} from './DiscoverFallbackHeader' import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' const LOADING_ITEM = {_reactKey: '__loading__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} @@ -84,6 +85,7 @@ let Feed = ({ const {_} = useLingui() const queryClient = useQueryClient() const {currentAccount} = useSession() + const initialNumToRender = useInitialNumToRender() const [isPTRing, setIsPTRing] = React.useState(false) const checkForNewRef = React.useRef<(() => void) | null>(null) const lastFetchRef = React.useRef(Date.now()) @@ -327,6 +329,8 @@ let Feed = ({ desktopFixedHeight={ desktopFixedHeightOffset ? desktopFixedHeightOffset : true } + initialNumToRender={initialNumToRender} + windowSize={11} /> ) -- cgit 1.4.1