Improve performance

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

package-lock.json

@@ -23,6 +23,7 @@
         "react": "18.2.0",
         "react-native": "0.72.2",
         "react-native-document-picker": "^9.0.1",
+        "react-native-fast-image": "^8.6.3",
         "react-native-file-access": "^3.0.4",
         "react-native-gesture-handler": "^2.12.0",
         "react-native-get-random-values": "^1.9.0",
@@ -13434,6 +13435,15 @@
         }
       }
     },
+    "node_modules/react-native-fast-image": {
+      "version": "8.6.3",
+      "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz",
+      "integrity": "sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==",
+      "peerDependencies": {
+        "react": "^17 || ^18",
+        "react-native": ">=0.60.0"
+      }
+    },
     "node_modules/react-native-file-access": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-native-file-access/-/react-native-file-access-3.0.4.tgz",
@@ -25861,6 +25871,12 @@
         "invariant": "^2.2.4"
       }
     },
+    "react-native-fast-image": {
+      "version": "8.6.3",
+      "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz",
+      "integrity": "sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==",
+      "requires": {}
+    },
     "react-native-file-access": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-native-file-access/-/react-native-file-access-3.0.4.tgz",

package.json

@@ -28,6 +28,7 @@
     "react": "18.2.0",
     "react-native": "0.72.2",
     "react-native-document-picker": "^9.0.1",
+    "react-native-fast-image": "^8.6.3",
     "react-native-file-access": "^3.0.4",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-get-random-values": "^1.9.0",

src/screens/editors/meme/memeEditor.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
-import { Image, LayoutAnimation, View } from 'react-native';
+import { LayoutAnimation, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import Video from 'react-native-video';
+import TextRecognition, {
+  TextRecognitionResult,
+} from '@react-native-ml-kit/text-recognition';
+import FastImage from 'react-native-fast-image';
 import { LoadingView, MemeFail, TextOverlay } from '../../../components';
 import {
   getFilenameFromUri,
@@ -13,9 +17,6 @@ import { StagingMeme } from '../../../types';
 import { useMemeDimensions } from '../../../hooks';
 import { MEME_TYPE } from '../../../database';
 import MemeTagSelector from './memeTagSelector/memeTagSelector';
-import TextRecognition, {
-  TextRecognitionResult,
-} from '@react-native-ml-kit/text-recognition';
 
 const memeEditorStyles = {
   media: {
@@ -95,7 +96,7 @@ const MemeEditor = ({
       case MEME_TYPE.GIF: {
         return (
           <View>
-            <Image
+            <FastImage
               source={{ uri }}
               style={[memeEditorStyles.media, dimensionStyles]}
               resizeMode="contain"

src/screens/memes/memesList/memesGridItem.tsx

@@ -1,52 +1,41 @@
 import React, { useMemo } from 'react';
-import { Image, TouchableHighlight } from 'react-native';
+import { TouchableHighlight } from 'react-native';
-import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { AndroidScoped } from 'react-native-file-access';
+import FastImage from 'react-native-fast-image';
 import { MEME_TYPE, Meme } from '../../../database';
-import { RootState } from '../../../state';
 import { MemeFail } from '../../../components';
 import { getFontAwesome5IconSize } from '../../../utilities';
 import { useMemeDimensions } from '../../../hooks';
 
 const MemesGridItem = ({
   meme,
-  index,
   focusMeme,
+  uri,
+  columns,
 }: {
   meme: Meme;
-  index: number;
+  focusMeme: () => void;
-  focusMeme: (index: number) => void;
+  uri: string;
+  columns: number;
 }) => {
   const { width } = useSafeAreaFrame();
-  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,
-  )!;
 
-  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+  const itemWidth = useMemo(
+    () => (width * 0.92 - 5) / columns,
+    [columns, width],
+  );
 
   const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
 
-  const itemWidth = (width * 0.92 - 5) / gridColumns;
-
   const mediaComponent = useMemo(() => {
     switch (meme.memeType) {
       case MEME_TYPE.IMAGE:
       case MEME_TYPE.GIF:
       case MEME_TYPE.VIDEO: {
         return (
-          <Image
+          <FastImage
             source={{ uri }}
-            style={[
+            style={[{ width: itemWidth, height: itemWidth }]}
-              {
-                width: itemWidth,
-                height: itemWidth,
-              },
-            ]}
           />
         );
       }
@@ -59,14 +48,11 @@ const MemesGridItem = ({
   if (!error && (loading || !dimensions)) return <></>;
 
   return (
-    <TouchableHighlight onPress={() => focusMeme(index)}>
+    <TouchableHighlight onPress={focusMeme}>
       {error ? (
         <MemeFail
-          style={{
+          style={{ width: itemWidth, height: itemWidth }}
-            width: (width * 0.92 - 5) / gridColumns,
+          iconSize={getFontAwesome5IconSize(columns)}
-            height: (width * 0.92 - 5) / gridColumns,
-          }}
-          iconSize={getFontAwesome5IconSize(gridColumns)}
         />
       ) : (
         mediaComponent

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"
         />
       )}
     </>

src/screens/memes/memesList/memesListItem.tsx

@@ -1,12 +1,10 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { AndroidScoped } from 'react-native-file-access';
+import FastImage from 'react-native-fast-image';
-import { useSelector } from 'react-redux';
 import { MEME_TYPE, Meme } from '../../../database';
 import { MemeFail } from '../../../components';
-import { RootState } from '../../../state';
 import { useMemeDimensions } from '../../../hooks';
 
 const memesListItemStyles = StyleSheet.create({
@@ -35,20 +33,19 @@ const memesListItemStyles = StyleSheet.create({
 
 const MemesListItem = ({
   meme,
-  index,
   focusMeme,
+  uri,
 }: {
   meme: Meme;
-  index: number;
+  focusMeme: () => void;
-  focusMeme: (index: number) => void;
+  uri: string;
 }) => {
   const { width } = useSafeAreaFrame();
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const storageUri = useSelector(
-    (state: RootState) => state.settings.storageUri,
-  )!;
 
-  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+  const listItemWidth = useMemo(
+    () => ({ width: width * 0.92 - 75 - 10 }),
+    [width],
+  );
 
   const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
 
@@ -57,7 +54,7 @@ const MemesListItem = ({
       case MEME_TYPE.IMAGE:
       case MEME_TYPE.GIF:
       case MEME_TYPE.VIDEO: {
-        return <Image source={{ uri }} style={[memesListItemStyles.image]} />;
+        return <FastImage source={{ uri }} style={[memesListItemStyles.image]} />;
       }
       default: {
         return <></>;
@@ -68,22 +65,14 @@ const MemesListItem = ({
   if (!error && (loading || !dimensions)) return <></>;
 
   return (
-    <TouchableRipple
+    <TouchableRipple onPress={focusMeme} style={memesListItemStyles.view}>
-      onPress={() => focusMeme(index)}
-      style={memesListItemStyles.view}>
       <>
         {error ? (
           <MemeFail style={memesListItemStyles.image} />
         ) : (
           mediaComponent
         )}
-        <View
+        <View style={[memesListItemStyles.detailsView, listItemWidth]}>
-          style={[
-            memesListItemStyles.detailsView,
-            {
-              width: width * 0.92 - 75 - 10,
-            },
-          ]}>
           <Text variant="titleMedium" style={memesListItemStyles.text}>
             {meme.title}
           </Text>

src/screens/memes/memesList/memesMasonryItem.tsx

@@ -1,10 +1,8 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, TouchableHighlight } from 'react-native';
+import { StyleSheet, TouchableHighlight } from 'react-native';
-import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { AndroidScoped } from 'react-native-file-access';
+import FastImage from 'react-native-fast-image';
 import { MEME_TYPE, Meme } from '../../../database';
-import { RootState } from '../../../state';
 import { MemeFail } from '../../../components';
 import { getFontAwesome5IconSize } from '../../../utilities';
 import { useMemeDimensions } from '../../../hooks';
@@ -21,29 +19,28 @@ const memeMasonryItemStyles = StyleSheet.create({
 
 const MemesMasonryItem = ({
   meme,
-  index,
   focusMeme,
+  uri,
+  columns,
 }: {
   meme: Meme;
-  index: number;
+  focusMeme: () => void;
-  focusMeme: (index: number) => void;
+  uri: string;
+  columns: number;
 }) => {
   const { width } = useSafeAreaFrame();
-  const masonryColumns = useSelector(
-    (state: RootState) => state.settings.masonryColumns,
-  );
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const storageUri = useSelector(
-    (state: RootState) => state.settings.storageUri,
-  )!;
 
-  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+  const itemWidth = useMemo(
+    () => (width * 0.92 - 5) / columns - 5,
+    [columns, width],
+  );
 
   const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
 
-  const itemWidth = (width * 0.92 - 5) / masonryColumns - 5;
+  const itemHeight = useMemo(
-  const itemHeight =
+    () => ((width * 0.92) / columns - 5) / (dimensions?.aspectRatio ?? 1),
-    ((width * 0.92) / masonryColumns - 5) / (dimensions?.aspectRatio ?? 1);
+    [columns, dimensions?.aspectRatio, width],
+  );
 
   const mediaComponent = useMemo(() => {
     switch (meme.memeType) {
@@ -51,7 +48,7 @@ const MemesMasonryItem = ({
       case MEME_TYPE.GIF:
       case MEME_TYPE.VIDEO: {
         return (
-          <Image
+          <FastImage
             source={{ uri }}
             style={[
               memeMasonryItemStyles.image,
@@ -72,16 +69,14 @@ const MemesMasonryItem = ({
   if (!error && (loading || !dimensions)) return <></>;
 
   return (
-    <TouchableHighlight
+    <TouchableHighlight onPress={focusMeme} style={memeMasonryItemStyles.view}>
-      onPress={() => focusMeme(index)}
-      style={memeMasonryItemStyles.view}>
       {error || !dimensions ? (
         <MemeFail
           style={[
             memeMasonryItemStyles.image,
             { width: itemWidth, height: itemHeight },
           ]}
-          iconSize={getFontAwesome5IconSize(masonryColumns)}
+          iconSize={getFontAwesome5IconSize(columns)}
         />
       ) : (
         mediaComponent