Account page scrollable separately

src/components/Timelines/Timeline.tsx

@@ -50,6 +50,8 @@ const Timeline: React.FC<Props> = ({
     status,
     data,
     refetch,
+    isFetching,
+    isSuccess,
     hasPreviousPage,
     fetchPreviousPage,
     isFetchingPreviousPage,
@@ -84,7 +86,7 @@ const Timeline: React.FC<Props> = ({
 
   const flRef = useRef<FlatList<any>>(null)
   useEffect(() => {
-    if (toot && status === 'success') {
+    if (toot && isSuccess) {
       setTimeout(() => {
         flRef.current?.scrollToIndex({
           index: flattenPointer[0]!,
@@ -92,7 +94,7 @@ const Timeline: React.FC<Props> = ({
         })
       }, 500)
     }
-  }, [status])
+  }, [isSuccess])
 
   const flKeyExtrator = useCallback(({ id }) => id, [])
   const flRenderItem = useCallback(
@@ -137,10 +139,10 @@ const Timeline: React.FC<Props> = ({
     !disableRefresh &&
       (hasPreviousPage
         ? fetchPreviousPage()
-        : status !== 'loading'
+        : !isFetching
         ? refetch()
         : undefined)
-  }, [hasPreviousPage, status])
+  }, [hasPreviousPage, isFetching])
   const flOnEndReach = useCallback(() => !disableRefresh && fetchNextPage(), [])
   const flFooter = useCallback(
     () => (!disableRefresh ? <TimelineEnd hasNextPage={hasNextPage} /> : null),
@@ -149,14 +151,11 @@ const Timeline: React.FC<Props> = ({
   const flRefreshControl = useMemo(
     () => (
       <RefreshControl
-        refreshing={
-          isFetchingPreviousPage ||
-          (!isFetchingNextPage && status === 'loading')
-        }
+        refreshing={isFetchingPreviousPage || isFetching}
         onRefresh={flOnRefresh}
       />
     ),
-    [isFetchingPreviousPage, isFetchingNextPage, status]
+    [isFetchingPreviousPage, isFetching]
   )
   const onScrollToIndexFailed = useCallback(error => {
     const offset = error.averageItemLength * error.index
@@ -186,7 +185,7 @@ const Timeline: React.FC<Props> = ({
       ListEmptyComponent={flItemEmptyComponent}
       ItemSeparatorComponent={flItemSeparatorComponent}
       onEndReachedThreshold={!disableRefresh ? 0.75 : null}
-      {...(toot && status === 'success' && { onScrollToIndexFailed })}
+      {...(toot && isSuccess && { onScrollToIndexFailed })}
     />
   )
 }

src/screens/Shared/Account.tsx

@@ -11,10 +11,7 @@ import AccountSegmentedControl from './Account/SegmentedControl'
 import { HeaderRight } from '@root/components/Header'
 import BottomSheet from '@root/components/BottomSheet'
 import { useSelector } from 'react-redux'
-import {
-  getLocalAccountId,
-  getLocalUrl
-} from '@root/utils/slices/instancesSlice'
+import { getLocalAccountId } from '@root/utils/slices/instancesSlice'
 import HeaderDefaultActionsAccount from '@root/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
 
 // Moved account example: https://m.cmx.im/web/accounts/27812
@@ -77,7 +74,6 @@ const ScreenSharedAccount: React.FC<Props> = ({
   navigation
 }) => {
   const localAccountId = useSelector(getLocalAccountId)
-  const localDomain = useSelector(getLocalUrl)
   const { data } = useQuery(['Account', { id: account.id }], accountFetch)
 
   // const stateRelationships = useSelector(relationshipsState)

src/screens/Shared/Account/Toots.tsx

@@ -5,6 +5,8 @@ import { TabView } from 'react-native-tab-view'
 import Timeline from '@components/Timelines/Timeline'
 import { AccountAction, AccountState } from '../Account'
 import { StyleConstants } from '@root/utils/styles/constants'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
 
 export interface Props {
   accountState: AccountState
@@ -35,12 +37,20 @@ const AccountToots: React.FC<Props> = ({
     },
     []
   )
+  const headerHeight = useSafeAreaInsets().top + 44
+  const footerHeight = useSafeAreaInsets().bottom + useBottomTabBarHeight()
 
   return (
     <TabView
       lazy
       swipeEnabled
-      style={styles.base}
+      style={[
+        styles.base,
+        {
+          height:
+            Dimensions.get('window').height - headerHeight - footerHeight - 33
+        }
+      ]}
       renderScene={renderScene}
       renderTabBar={() => null}
       initialLayout={{ width: Dimensions.get('window').width }}