acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fix profile lists/feeds/starterpacks tabs position issue (#8935)

Browse Source
This commit is contained in:
Samuel Newman
2025-09-10 18:49:04 +03:00
committed by GitHub
parent 5be753ecdf
commit 5b8631d188
5 changed files with 239 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StarterPack/ProfileStarterPacks.tsx
+13 -17
View File
@@ -1,13 +1,9 @@
import React, {
useCallback,
useEffect,
useImperativeHandle,
useState,
} from 'react'
import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
import {
findNodeHandle,
type ListRenderItemInfo,
type StyleProp,
useWindowDimensions,
View,
type ViewStyle,
} from 'react-native'
@@ -42,6 +38,7 @@ interface SectionRef {
}
interface ProfileFeedgensProps {
ref?: React.Ref<SectionRef>
scrollElRef: ListRef
did: string
headerOffset: number
@@ -56,11 +53,8 @@ function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
return item.uri
}
export const ProfileStarterPacks = React.forwardRef<
SectionRef,
ProfileFeedgensProps
>(function ProfileFeedgensImpl(
{
export function ProfileStarterPacks({
ref,
scrollElRef,
did,
headerOffset,
@@ -69,11 +63,10 @@ export const ProfileStarterPacks = React.forwardRef<
testID,
setScrollViewTag,
isMe,
},
ref,
) {
}: ProfileFeedgensProps) {
const t = useTheme()
const bottomBarOffset = useBottomBarOffset(100)
const {height} = useWindowDimensions()
const [isPTRing, setIsPTRing] = useState(false)
const {
data,
@@ -101,7 +94,7 @@ export const ProfileStarterPacks = React.forwardRef<
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
@@ -144,7 +137,10 @@ export const ProfileStarterPacks = React.forwardRef<
refreshing={isPTRing}
headerOffset={headerOffset}
progressViewOffset={ios(0)}
contentContainerStyle={{paddingBottom: headerOffset + bottomBarOffset}}
contentContainerStyle={{
minHeight: height + headerOffset,
paddingBottom: bottomBarOffset,
}}
removeClippedSubviews={true}
desktopFixedHeight
onEndReached={onEndReached}
@@ -158,7 +154,7 @@ export const ProfileStarterPacks = React.forwardRef<
/>
</View>
)
})
}
function CreateAnother() {
const {_} = useLingui()
src/screens/Profile/Sections/Feed.tsx
+12 -16
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
import {findNodeHandle, View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -18,6 +18,7 @@ import {Text} from '#/components/Typography'
import {type SectionRef} from './types'
interface FeedSectionProps {
ref?: React.Ref<SectionRef>
feed: FeedDescriptor
headerHeight: number
isFocused: boolean
@@ -25,31 +26,26 @@ interface FeedSectionProps {
ignoreFilterFor?: string
setScrollViewTag: (tag: number | null) => void
}
export const ProfileFeedSection = React.forwardRef<
SectionRef,
FeedSectionProps
>(function FeedSectionImpl(
{
export function ProfileFeedSection({
ref,
feed,
headerHeight,
isFocused,
scrollElRef,
ignoreFilterFor,
setScrollViewTag,
},
ref,
) {
}: FeedSectionProps) {
const {_} = useLingui()
const queryClient = useQueryClient()
const [hasNew, setHasNew] = React.useState(false)
const [isScrolledDown, setIsScrolledDown] = React.useState(false)
const [hasNew, setHasNew] = useState(false)
const [isScrolledDown, setIsScrolledDown] = useState(false)
const shouldUseAdjustedNumToRender = feed.endsWith('posts_and_author_threads')
const isVideoFeed = isNative && feed.endsWith('posts_with_video')
const adjustedInitialNumToRender = useInitialNumToRender({
screenHeightOffset: headerHeight,
})
const onScrollToTop = React.useCallback(() => {
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerHeight,
@@ -58,15 +54,15 @@ export const ProfileFeedSection = React.forwardRef<
setHasNew(false)
}, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const renderPostsEmpty = React.useCallback(() => {
const renderPostsEmpty = useCallback(() => {
return <EmptyState icon="growth" message={_(msg`No posts yet.`)} />
}, [_])
React.useEffect(() => {
useEffect(() => {
if (isIOS && isFocused && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
@@ -101,7 +97,7 @@ export const ProfileFeedSection = React.forwardRef<
)}
</View>
)
})
}
function ProfileEndOfFeed() {
const t = useTheme()
src/screens/Profile/Sections/Labels.tsx
+1
View File
@@ -33,6 +33,7 @@ interface LabelsSectionProps {
isFocused: boolean
setScrollViewTag: (tag: number | null) => void
}
export function ProfileLabelsSection({
ref,
isLabelerLoading,
src/view/com/feeds/ProfileFeedgens.tsx
+32 -19
View File
@@ -1,8 +1,15 @@
import React from 'react'
import {
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from 'react'
import {
findNodeHandle,
type ListRenderItemInfo,
type StyleProp,
useWindowDimensions,
View,
type ViewStyle,
} from 'react-native'
@@ -34,6 +41,7 @@ interface SectionRef {
}
interface ProfileFeedgensProps {
ref?: React.Ref<SectionRef>
did: string
scrollElRef: ListRef
headerOffset: number
@@ -43,17 +51,21 @@ interface ProfileFeedgensProps {
setScrollViewTag: (tag: number | null) => void
}
export const ProfileFeedgens = React.forwardRef<
SectionRef,
ProfileFeedgensProps
>(function ProfileFeedgensImpl(
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
export function ProfileFeedgens({
ref,
) {
did,
scrollElRef,
headerOffset,
enabled,
style,
testID,
setScrollViewTag,
}: ProfileFeedgensProps) {
const {_} = useLingui()
const t = useTheme()
const [isPTRing, setIsPTRing] = React.useState(false)
const opts = React.useMemo(() => ({enabled}), [enabled])
const [isPTRing, setIsPTRing] = useState(false)
const {height} = useWindowDimensions()
const opts = useMemo(() => ({enabled}), [enabled])
const {
data,
isPending,
@@ -67,7 +79,7 @@ export const ProfileFeedgens = React.forwardRef<
const isEmpty = !isPending && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const items = React.useMemo(() => {
const items = useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
@@ -91,7 +103,7 @@ export const ProfileFeedgens = React.forwardRef<
const queryClient = useQueryClient()
const onScrollToTop = React.useCallback(() => {
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerOffset,
@@ -99,11 +111,11 @@ export const ProfileFeedgens = React.forwardRef<
queryClient.invalidateQueries({queryKey: RQKEY(did)})
}, [scrollElRef, queryClient, headerOffset, did])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const onRefresh = React.useCallback(async () => {
const onRefresh = useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
@@ -113,7 +125,7 @@ export const ProfileFeedgens = React.forwardRef<
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
@@ -123,14 +135,14 @@ export const ProfileFeedgens = React.forwardRef<
}
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
const onPressRetryLoadMore = React.useCallback(() => {
const onPressRetryLoadMore = useCallback(() => {
fetchNextPage()
}, [fetchNextPage])
// rendering
// =
const renderItem = React.useCallback(
const renderItem = useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
@@ -174,14 +186,14 @@ export const ProfileFeedgens = React.forwardRef<
[_, t, error, refetch, onPressRetryLoadMore, preferences],
)
React.useEffect(() => {
useEffect(() => {
if (isIOS && enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
}, [enabled, scrollElRef, setScrollViewTag])
const ProfileFeedgensFooter = React.useCallback(() => {
const ProfileFeedgensFooter = useCallback(() => {
if (isEmpty) return null
return (
<ListFooter
@@ -217,10 +229,11 @@ export const ProfileFeedgens = React.forwardRef<
removeClippedSubviews={true}
desktopFixedHeight
onEndReached={onEndReached}
contentContainerStyle={{minHeight: height + headerOffset}}
/>
</View>
)
})
}
function keyExtractor(item: any) {
return item._reactKey || item.uri
src/view/com/lists/ProfileLists.tsx
+33 -22
View File
@@ -1,8 +1,15 @@
import React from 'react'
import {
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from 'react'
import {
findNodeHandle,
type ListRenderItemInfo,
type StyleProp,
useWindowDimensions,
View,
type ViewStyle,
} from 'react-native'
@@ -33,6 +40,7 @@ interface SectionRef {
}
interface ProfileListsProps {
ref?: React.Ref<SectionRef>
did: string
scrollElRef: ListRef
headerOffset: number
@@ -42,15 +50,21 @@ interface ProfileListsProps {
setScrollViewTag: (tag: number | null) => void
}
export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
function ProfileListsImpl(
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
export function ProfileLists({
ref,
) {
did,
scrollElRef,
headerOffset,
enabled,
style,
testID,
setScrollViewTag,
}: ProfileListsProps) {
const t = useTheme()
const {_} = useLingui()
const [isPTRing, setIsPTRing] = React.useState(false)
const opts = React.useMemo(() => ({enabled}), [enabled])
const {height} = useWindowDimensions()
const [isPTRing, setIsPTRing] = useState(false)
const opts = useMemo(() => ({enabled}), [enabled])
const {
data,
isPending,
@@ -63,7 +77,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
} = useProfileListsQuery(did, opts)
const isEmpty = !isPending && !data?.pages[0]?.lists.length
const items = React.useMemo(() => {
const items = useMemo(() => {
let items: any[] = []
if (isError && isEmpty) {
items = items.concat([ERROR_ITEM])
@@ -88,7 +102,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
const queryClient = useQueryClient()
const onScrollToTop = React.useCallback(() => {
const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({
animated: isNative,
offset: -headerOffset,
@@ -96,11 +110,11 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
queryClient.invalidateQueries({queryKey: RQKEY(did)})
}, [scrollElRef, queryClient, headerOffset, did])
React.useImperativeHandle(ref, () => ({
useImperativeHandle(ref, () => ({
scrollToTop: onScrollToTop,
}))
const onRefresh = React.useCallback(async () => {
const onRefresh = useCallback(async () => {
setIsPTRing(true)
try {
await refetch()
@@ -110,7 +124,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = React.useCallback(async () => {
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
@@ -119,14 +133,14 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
}
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
const onPressRetryLoadMore = React.useCallback(() => {
const onPressRetryLoadMore = useCallback(() => {
fetchNextPage()
}, [fetchNextPage])
// rendering
// =
const renderItemInner = React.useCallback(
const renderItemInner = useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
@@ -138,10 +152,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
)
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage
message={cleanError(error)}
onPressTryAgain={refetch}
/>
<ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
)
} else if (item === LOAD_MORE_ERROR_ITEM) {
return (
@@ -170,14 +181,14 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
[error, refetch, onPressRetryLoadMore, _, t.atoms.border_contrast_low],
)
React.useEffect(() => {
useEffect(() => {
if (isIOS && enabled && scrollElRef.current) {
const nativeTag = findNodeHandle(scrollElRef.current)
setScrollViewTag(nativeTag)
}
}, [enabled, scrollElRef, setScrollViewTag])
const ProfileListsFooter = React.useCallback(() => {
const ProfileListsFooter = useCallback(() => {
if (isEmpty) return null
return (
<ListFooter
@@ -213,11 +224,11 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
removeClippedSubviews={true}
desktopFixedHeight
onEndReached={onEndReached}
contentContainerStyle={{minHeight: height + headerOffset}}
/>
</View>
)
},
)
}
function keyExtractor(item: any) {
return item._reactKey || item.uri