use flash list

Memmy-App · Oct 15, 2023 · c1268f1 · c1268f1
1 parent 251d1f9
commit c1268f1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 40 deletions.
diff --git a/src/components/Navigation/MainScreens.tsx b/src/components/Navigation/MainScreens.tsx
@@ -33,47 +33,29 @@ export default function MainScreens(
 ): React.JSX.Element {
   return (
     <>
-      <stack.Group>
-        <stack.Screen
-          name="Feed"
-          component={FeedIndexScreen}
-          options={{
-            headerShown: true,
-          }}
-        />
-        <stack.Screen
-          name="Post"
-          component={PostScreen}
-          options={{
-            headerShown: true,
-          }}
-        />
+      <stack.Group
+        screenOptions={{
+          headerShown: true,
+        }}
+      >
+        <stack.Screen name="Feed" component={FeedIndexScreen} />
+        <stack.Screen name="Post" component={PostScreen} />
         <stack.Screen
           name="CommentChain"
           component={CommentChainScreen}
           options={{
-            headerShown: true,
             headerTitle: 'More Comments',
           }}
         />
-        <stack.Screen
-          name="Community"
-          component={MainFeed}
-          options={{
-            headerShown: true,
-          }}
-        />
+        <stack.Screen name="Community" component={MainFeed} />
       </stack.Group>
       <stack.Group
         screenOptions={{
           presentation: 'modal',
+          headerShown: true,
         }}
       >
-        <stack.Screen
-          name="Reply"
-          component={ReplyScreen}
-          options={{ headerShown: true }}
-        />
+        <stack.Screen name="Reply" component={ReplyScreen} />
       </stack.Group>
     </>
   );

diff --git a/src/components/Navigation/Stack.tsx b/src/components/Navigation/Stack.tsx
@@ -1,20 +1,37 @@
-import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import React, { useMemo } from 'react';
+import { DarkTheme, NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Tabs from '@components/Navigation/Tabs';
 import { useAccounts } from '@src/state/account/accountStore';
 import OnboardingIndexScreen from '@components/Onboarding/OnboardingIndex/OnboardingIndexScreen';
 import OnboardingInstanceListScreen from '@components/Onboarding/OnboardingInstanceList/OnboardingInstanceListScreen';
 import CreateAccountModal from '@components/Account/CreateAccountModal';
 import AddAccountModal from '@components/Account/AddAccountModal';
+import { useTheme } from 'tamagui';
 
 const Stack = createNativeStackNavigator();
 
 export default function MainStack(): React.JSX.Element {
   const accounts = useAccounts();
+  const theme = useTheme();
+
+  const navTheme = useMemo(
+    () => ({
+      ...DarkTheme,
+      colors: {
+        ...DarkTheme.colors,
+        primary: theme.accent.val,
+        background: theme.bg.val,
+        card: theme.navBarBg.val,
+        text: theme.color.val,
+        border: theme.border.val,
+      },
+    }),
+    [theme],
+  );
 
   return (
-    <NavigationContainer>
+    <NavigationContainer theme={navTheme}>
       <Stack.Navigator>
         {accounts.length < 1 ? (
           <>

diff --git a/src/components/Post/screens/PostScreen.tsx b/src/components/Post/screens/PostScreen.tsx
@@ -11,9 +11,9 @@ import Post from '@components/Post/components/Post';
 import instance from '@src/Instance';
 import { ICommentInfo } from '@src/types';
 import CommentChain from '@components/Comment/components/CommentChain';
-import { FlatList } from 'react-native';
 import { useLoadData } from '@hooks/useLoadData';
 import FeedLoadingIndicator from '@components/Feed/components/Feed/FeedLoadingIndicator';
+import { FlashList } from '@shopify/flash-list';
 
 interface RenderItem {
   item: ICommentInfo;
@@ -58,15 +58,11 @@ export default function PostScreen({
 
   return (
     <VStack flex={1}>
-      <FlatList
+      <FlashList
         renderItem={renderItem}
         data={postsToShow}
         keyExtractor={keyExtractor}
-        initialNumToRender={10}
-        maxToRenderPerBatch={5}
-        updateCellsBatchingPeriod={300}
-        windowSize={10}
-        removeClippedSubviews={true}
+        estimatedItemSize={100}
         ListHeaderComponent={<Post />}
         ListEmptyComponent={
           <FeedLoadingIndicator loading={isLoading} error={isError} />

diff --git a/src/helpers/comments/buildCommentChains.ts b/src/helpers/comments/buildCommentChains.ts
@@ -89,8 +89,8 @@ const buildReplies = (
         collapsed: false,
         hidden: false,
         path,
-        showInPost: depth <= 1 && i <= 1,
-        showLoadMore: depth === 1 && i === 1,
+        showInPost: depth <= 4 && i <= 4,
+        showLoadMore: depth === 4 && i === 4,
         topId: pathIds[1],
         parentId: pathIds[pathIds.length - 2],
       });