Refreshing is working

src/components/Timelines.tsx

@@ -59,6 +59,21 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
     )
   }
 
+  const screenComponent = useCallback(
+    () => (
+      <TabView
+        lazy
+        swipeEnabled
+        renderScene={renderScene}
+        renderTabBar={() => null}
+        onIndexChange={index => setSegment(index)}
+        navigationState={{ index: segment, routes }}
+        initialLayout={{ width: Dimensions.get('window').width }}
+      />
+    ),
+    [segment]
+  )
+
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -85,21 +100,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
             })
         }}
       >
-        {() => {
-          return (
-            <TabView
-              style={styles.base}
-              navigationState={{ index: segment, routes }}
-              renderScene={renderScene}
-              renderTabBar={() => null}
-              onIndexChange={index => setSegment(index)}
-              initialLayout={{ width: Dimensions.get('window').width }}
-              lazy
-              swipeEnabled
-              swipeVelocityImpact={1}
-            />
-          )
-        }}
+        {screenComponent}
       </Stack.Screen>
 
       {sharedScreens(Stack)}
@@ -110,9 +111,6 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
 const styles = StyleSheet.create({
   segmentsContainer: {
     flexBasis: '60%'
-  },
-  base: {
-    width: Dimensions.get('window').width
   }
 })
 

src/components/Timelines/Timeline.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import { StyleSheet } from 'react-native'
+import { RefreshControl, StyleSheet } from 'react-native'
 import { InfiniteData, useInfiniteQuery } from 'react-query'
 
 import TimelineNotifications from '@components/Timelines/Timeline/Notifications'
@@ -57,6 +57,9 @@ const Timeline: React.FC<Props> = ({
     fetchNextPage,
     isFetchingNextPage
   } = useInfiniteQuery(queryKey, timelineFetch, {
+    select: data => {
+      return { ...data, pages: data.pages.filter(page => page.toots.length) }
+    },
     getPreviousPageParam: firstPage => ({
       direction: 'prev',
       id: firstPage.toots[0].id
@@ -137,6 +140,15 @@ const Timeline: React.FC<Props> = ({
     () => (!disableRefresh ? <TimelineEnd hasNextPage={hasNextPage} /> : null),
     [hasNextPage]
   )
+  const flRefreshControl = useMemo(
+    () => (
+      <RefreshControl
+        refreshing={isFetchingPreviousPage}
+        onRefresh={flOnRefresh}
+      />
+    ),
+    [isFetchingPreviousPage]
+  )
   const onScrollToIndexFailed = useCallback(error => {
     const offset = error.averageItemLength * error.index
     flRef.current?.scrollToOffset({ offset })
@@ -152,14 +164,16 @@ const Timeline: React.FC<Props> = ({
   return (
     <FlatList
       ref={flRef}
+      windowSize={11}
       data={flattenData}
+      initialNumToRender={5}
+      maxToRenderPerBatch={5}
       style={styles.flatList}
-      onRefresh={flOnRefresh}
       renderItem={flRenderItem}
       onEndReached={flOnEndReach}
       keyExtractor={flKeyExtrator}
       ListFooterComponent={flFooter}
-      refreshing={isFetchingPreviousPage}
+      refreshControl={flRefreshControl}
       ListEmptyComponent={flItemEmptyComponent}
       ItemSeparatorComponent={flItemSeparatorComponent}
       onEndReachedThreshold={!disableRefresh ? 0.75 : null}

src/screens/Shared/Account/SegmentedControl.tsx

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
     zIndex: 99,
     borderTopWidth: StyleSheet.hairlineWidth,
     padding: StyleConstants.Spacing.Global.PagePadding,
-    paddingBottom: StyleConstants.Spacing.Global.PagePadding * 3
+    height: 33 + StyleConstants.Spacing.Global.PagePadding * 2
   }
 })
 

src/screens/Shared/Account/Toots.tsx

@@ -1,6 +1,6 @@
-import React, { Dispatch, useCallback, useState } from 'react'
+import React, { Dispatch } from 'react'
 import { Dimensions, StyleSheet } from 'react-native'
-import { SceneMap, TabView } from 'react-native-tab-view'
+import { TabView } from 'react-native-tab-view'
 
 import Timeline from '@components/Timelines/Timeline'
 import { AccountAction, AccountState } from '../Account'
@@ -17,33 +17,35 @@ const AccountToots: React.FC<Props> = ({
   accountDispatch,
   id
 }) => {
-  const [routes] = useState([
+  const routes: { key: App.Pages }[] = [
     { key: 'Account_Default' },
     { key: 'Account_All' },
     { key: 'Account_Media' }
-  ])
-  const singleScene = useCallback(
-    ({ route }) => <Timeline page={route.key} account={id} disableRefresh />,
-    []
-  )
-  const renderScene = SceneMap({
-    Account_Default: singleScene,
-    Account_All: singleScene,
-    Account_Media: singleScene
-  })
+  ]
+
+  const renderScene = ({
+    route
+  }: {
+    route: {
+      key: App.Pages
+    }
+  }) => {
+    console.log(route)
+    return <Timeline page={route.key} account={id} disableRefresh />
+  }
 
   return (
     <TabView
+      lazy
+      swipeEnabled
       style={styles.base}
-      navigationState={{ index: accountState.segmentedIndex, routes }}
       renderScene={renderScene}
       renderTabBar={() => null}
+      initialLayout={{ width: Dimensions.get('window').width }}
+      navigationState={{ index: accountState.segmentedIndex, routes }}
       onIndexChange={index =>
         accountDispatch({ type: 'segmentedIndex', payload: index })
       }
-      initialLayout={{ width: Dimensions.get('window').width }}
-      lazy
-      swipeEnabled
     />
   )
 }