feat: optimize memory usage across components with downsampling and pagination

Author: pushpender-singh-ap

android/app/build.gradle

@@ -87,7 +87,30 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 22
         versionName "1.3.3"
+
+        // Increase memory allocated to Gradle
+        dexOptions {
+            javaMaxHeapSize "4g"
+        }
+    }
+
+    // Add large heap support to the application
+    aaptOptions {
+        cruncherEnabled = false
     }
+
+    packagingOptions {
+        // Exclude unnecessary files to reduce APK size
+        exclude 'META-INF/DEPENDENCIES'
+        exclude 'META-INF/LICENSE'
+        exclude 'META-INF/LICENSE.txt'
+        exclude 'META-INF/license.txt'
+        exclude 'META-INF/NOTICE'
+        exclude 'META-INF/NOTICE.txt'
+        exclude 'META-INF/notice.txt'
+        exclude 'META-INF/ASL2.0'
+    }
+
     signingConfigs {
         debug {
             storeFile file('debug.keystore')

android/app/src/main/AndroidManifest.xml

@@ -11,7 +11,8 @@
       android:allowBackup="false"
       android:theme="@style/AppTheme"
       android:supportsRtl="true"
-      android:gwpAsanMode="always">
+      android:gwpAsanMode="always"
+      android:largeHeap="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

src/Components/Gallery/src/index.tsx

@@ -11,6 +11,7 @@ import {
   useWindowDimensions,
   View,
   ViewStyle,
+  InteractionManager,
 } from 'react-native';
 import Animated, {
   useAnimatedStyle,
@@ -41,8 +42,8 @@ import {BannerAdSize} from 'react-native-google-mobile-ads';
 
 const rtl = I18nManager.isRTL;
 
-const DOUBLE_TAP_SCALE = 3;
-const MAX_SCALE = 6;
+const DOUBLE_TAP_SCALE = 2.5; // Reduced from 3
+const MAX_SCALE = 4; // Reduced from 6
 const SPACE_BETWEEN_IMAGES = 40;
 
 type Dimensions = {
@@ -88,6 +89,11 @@ const defaultRenderImage = ({
         url: item,
         progressiveLoadingEnabled: true,
         allowHardware: true,
+        // Add downsampling to reduce memory usage
+        downsampling: {
+          width: 1500, // Reasonable limit for comic images
+          height: 1800,
+        },
         headers: {
           Referer: item,
         },
@@ -247,6 +253,15 @@ const ResizableImage = React.memo(
       offset.y.value = animated ? withTiming(0) : 0;
       translation.x.value = animated ? withTiming(0) : 0;
       translation.y.value = animated ? withTiming(0) : 0;
+      
+      // Request garbage collection when scaling back to normal size
+      if (scale.value > 1.5) {
+        runOnJS(InteractionManager.runAfterInteractions)(() => {
+          setTimeout(() => {
+            global.gc && global.gc();
+          }, 1000);
+        });
+      }
     };
 
     const getEdgeX = () => {
@@ -262,28 +277,6 @@ const ResizableImage = React.memo(
       return [-point, point];
     };
 
-    const clampY = (value: number, newScale: number) => {
-      'worklet';
-      const newHeight = newScale * layout.y.value;
-      const point = (newHeight - height) / 2;
-
-      if (newHeight < height) {
-        return 0;
-      }
-      return clamp(value, -point, point);
-    };
-
-    const clampX = (value: number, newScale: number) => {
-      'worklet';
-      const newWidth = newScale * layout.x.value;
-      const point = (newWidth - width) / 2;
-
-      if (newWidth < width) {
-        return 0;
-      }
-      return clamp(value, -point, point);
-    };
-
     const getEdgeY = () => {
       'worklet';
 
@@ -575,11 +568,11 @@ const ResizableImage = React.memo(
       .onUpdate(({translationX, translationY, velocityY}) => {
         'worklet';
         if (!isActive.value) return;
+        const x = getEdgeX();
+
         if (disableVerticalSwipe && scale.value === 1 && isVertical.value)
           return;
 
-        const x = getEdgeX();
-
         if (!isVertical.value || scale.value > 1) {
           const clampedX = clamp(
             translationX,
@@ -674,7 +667,6 @@ const ResizableImage = React.memo(
           let snapPoints = [index - 1, index, index + 1]
             .filter((_, y) => {
               if (loop) return true;
-
               if (y === 0) {
                 return !isFirst;
               }
@@ -848,6 +840,42 @@ const ResizableImage = React.memo(
         }
       });
 
+    // Cleanup on unmount to prevent memory leaks
+    useEffect(() => {
+      return () => {
+        InteractionManager.runAfterInteractions(() => {
+          offset.x.value = 0;
+          offset.y.value = 0;
+          scale.value = 1;
+          translation.x.value = 0;
+          translation.y.value = 0;
+        });
+      };
+    }, []);
+
+    // Clamp functions
+    const clampY = (value: number, newScale: number) => {
+      'worklet';
+      const newHeight = newScale * layout.y.value;
+      const point = (newHeight - height) / 2;
+
+      if (newHeight < height) {
+        return 0;
+      }
+      return clamp(value, -point, point);
+    };
+
+    const clampX = (value: number, newScale: number) => {
+      'worklet';
+      const newWidth = newScale * layout.x.value;
+      const point = (newWidth - width) / 2;
+
+      if (newWidth < width) {
+        return 0;
+      }
+      return clamp(value, -point, point);
+    };
+
     return (
       <GestureDetector
         gesture={Gesture.Race(
@@ -929,7 +957,6 @@ const GalleryComponent = <T extends any>(
 ) => {
   const windowDimensions = useWindowDimensions();
   const dimensions = containerDimensions || windowDimensions;
-
   const isLoop = loop && data?.length > 1;
 
   const [index, setIndex] = useState(initialIndex);
@@ -998,6 +1025,16 @@ const GalleryComponent = <T extends any>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data?.length, dimensions.width]);
 
+  // Release resources when Gallery is unmounted
+  useEffect(() => {
+    return () => {
+      InteractionManager.runAfterInteractions(() => {
+        refs.current = [];
+        global.gc && global.gc();
+      });
+    };
+  }, []);
+
   return (
     <GestureHandlerRootView style={[styles.container, style]}>
       <Animated.View style={[styles.rowContainer, animatedStyle]}>

src/Components/UIComp/Image.js

@@ -1,10 +1,11 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   ActivityIndicator,
   Image as Img,
   Platform,
   Text,
   View,
+  Dimensions,
 } from 'react-native';
 import {FasterImageView} from '@candlefinance/faster-image';
 
@@ -14,8 +15,73 @@ const Image = ({
   onFailer,
   resizeMode = null,
   onSuccess = null,
+  downsample = true, // Enable downsampling by default
   ...rest
 }) => {
+  const [imageError, setImageError] = useState(false);
+  const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
+  
+  // Calculate optimal resize dimensions based on screen size and style
+  const getOptimalDimensions = () => {
+    // If style has specific dimensions, use those as a base
+    let targetWidth = style?.width || screenWidth;
+    let targetHeight = style?.height || screenHeight;
+    
+    // Convert percentage values to actual dimensions
+    if (typeof targetWidth === 'string' && targetWidth.endsWith('%')) {
+      const percentage = parseFloat(targetWidth) / 100;
+      targetWidth = screenWidth * percentage;
+    }
+    if (typeof targetHeight === 'string' && targetHeight.endsWith('%')) {
+      const percentage = parseFloat(targetHeight) / 100;
+      targetHeight = screenHeight * percentage;
+    }
+    
+    // For flex layouts, use screen dimensions
+    if (targetWidth === undefined || targetHeight === undefined) {
+      targetWidth = screenWidth;
+      targetHeight = screenHeight;
+    }
+    
+    // Calculate a reasonable downsampling value to save memory
+    // The 2 multiplier accounts for high-density screens
+    return {
+      width: Math.round(targetWidth * 2),
+      height: Math.round(targetHeight * 2),
+    };
+  };
+  
+  const dimensions = getOptimalDimensions();
+  
+  // Clean up error state when source changes
+  useEffect(() => {
+    setImageError(false);
+  }, [source]);
+  
+  // If image loading fails
+  const handleError = (event) => {
+    setImageError(true);
+    if (onFailer) {
+      onFailer(event);
+    }
+  };
+  
+  // Handle successful image load
+  const handleSuccess = (event) => {
+    if (onSuccess) {
+      onSuccess(event);
+    }
+  };
+  
+  // If there's an error, show a fallback
+  if (imageError) {
+    return (
+      <View style={[style, { justifyContent: 'center', alignItems: 'center' }]}>
+        <Text style={{ color: '#999' }}>Image Error</Text>
+      </View>
+    );
+  }
+  
   return (
     <View style={[style]}>
       <FasterImageView
@@ -33,15 +99,16 @@ const Image = ({
           headers: {
             Referer: source.uri,
           },
+          // Add downsampling configuration if enabled
+          ...(downsample ? {
+            downsampling: {
+              width: dimensions.width,
+              height: dimensions.height,
+            }
+          } : {}),
         }}
-        onSuccess={event => {
-          if (onSuccess) onSuccess(event);
-        }}
-        onError={event => {
-          if (onFailer) {
-            onFailer(event);
-          }
-        }}
+        onSuccess={handleSuccess}
+        onError={handleError}
       />
     </View>
   );

src/Components/VerticalGallery/index.js

@@ -72,6 +72,8 @@ const VerticalGallery = ({
             source={{ uri: item }}
             style={styles.image}
             resizeMode="contain"
+            // Enable downsampling to reduce memory usage
+            downsample={true}
           />
         </View>
       </TouchableWithoutFeedback>
@@ -84,23 +86,24 @@ const VerticalGallery = ({
     index,
   });
 
-  // Debug the data prop
-  console.log('VerticalGallery data:', data && data.length ? 'Has items' : 'Empty or invalid', 
-    Array.isArray(data) ? `(${data.length} items)` : '(Not an array)');
+  // Memory cleanup for images that are no longer visible
+  const keyExtractor = useCallback((_, index) => `page-${index}`, []);
 
   return (
     <FlatList
       ref={flatListRef}
       data={data}
       renderItem={renderItem}
-      keyExtractor={(_, index) => index.toString()}
+      keyExtractor={keyExtractor}
       pagingEnabled
       showsVerticalScrollIndicator={false}
       viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
       getItemLayout={getItemLayout}
-      initialNumToRender={3}
-      maxToRenderPerBatch={3}
-      windowSize={5}
+      initialNumToRender={2} // Reduced from 3 to 2
+      maxToRenderPerBatch={2} // Reduced to save memory
+      windowSize={3} // Reduced from 5 to 3
+      removeClippedSubviews={true} // Important for memory management
+      updateCellsBatchingPeriod={100} // Delay updates to improve performance
       style={styles.container}
       onScrollToIndexFailed={info => {
         const wait = new Promise(resolve => setTimeout(resolve, 100));