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

src/view/com/feeds/ProfileFeedgens.tsx

@@ -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