Improve performance

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/screens/memes/memesList/memesList.tsx

@@ -15,6 +15,7 @@ import { getFlashListItemHeight } from '../../../utilities';
 import MemesMasonryItem from './memesMasonryItem';
 import MemesGridItem from './memesGridItem';
 import MemesListItem from './memesListItem';
+import { AndroidScoped } from 'react-native-file-access';
 
 const sharedMemesListStyles = StyleSheet.create({
   flashList: {
@@ -66,6 +67,10 @@ const MemesList = ({
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
   return (
     <>
@@ -82,7 +87,12 @@ const MemesList = ({
           numColumns={masonryColumns}
           showsVerticalScrollIndicator={false}
           renderItem={({ item: meme, index }) => (
-            <MemesMasonryItem meme={meme} index={index} focusMeme={focusMeme} />
+            <MemesMasonryItem
+              meme={meme}
+              focusMeme={() => focusMeme(index)}
+              uri={AndroidScoped.appendPath(storageUri, meme.filename)}
+              columns={masonryColumns}
+            />
           )}
           contentContainerStyle={{
             paddingTop: flashListPadding,
@@ -96,6 +106,7 @@ const MemesList = ({
           )}
           onScroll={handleScroll}
           fadingEdgeLength={100}
+          overScrollMode="never"
         />
       )}
       {view === VIEW.GRID && (
@@ -111,7 +122,12 @@ const MemesList = ({
           numColumns={gridColumns}
           showsVerticalScrollIndicator={false}
           renderItem={({ item: meme, index }) => (
-            <MemesGridItem meme={meme} index={index} focusMeme={focusMeme} />
+            <MemesGridItem
+              meme={meme}
+              focusMeme={() => focusMeme(index)}
+              uri={AndroidScoped.appendPath(storageUri, meme.filename)}
+              columns={gridColumns}
+            />
           )}
           contentContainerStyle={{
             paddingTop: flashListPadding,
@@ -125,20 +141,25 @@ const MemesList = ({
           )}
           onScroll={handleScroll}
           fadingEdgeLength={100}
+          overScrollMode="never"
         />
       )}
       {view === VIEW.LIST && (
         <FlashList
           ref={flashListRef}
           data={memes}
-          estimatedItemSize={50}
+          estimatedItemSize={90}
           estimatedListSize={{
             height: height,
             width: width * 0.92,
           }}
           showsVerticalScrollIndicator={false}
           renderItem={({ item: meme, index }) => (
-            <MemesListItem meme={meme} index={index} focusMeme={focusMeme} />
+            <MemesListItem
+              meme={meme}
+              focusMeme={() => focusMeme(index)}
+              uri={AndroidScoped.appendPath(storageUri, meme.filename)}
+            />
           )}
           ItemSeparatorComponent={() => <Divider />}
           contentContainerStyle={{
@@ -153,6 +174,7 @@ const MemesList = ({
           )}
           onScroll={handleScroll}
           fadingEdgeLength={100}
+          overScrollMode="never"
         />
       )}
     </>