fix: android crash during sharing larger media

Author: isekovanic

package/native-package/src/optionalDependencies/shareImage.ts

@@ -8,19 +8,9 @@ try {
   console.log('react-native-share is not installed');
 }
 
-let RNBlobUtil;
-
-try {
-  RNBlobUtil = require('react-native-blob-util').default;
-} catch (e) {
-  console.log('react-native-blob-util is not installed');
-}
-
 export const shareImage = RNShare
   ? async ({ type, url }) => {
       try {
-        const base64Image = await RNBlobUtil.fs.readFile(url, 'base64');
-        const base64Url = `data:${type};base64,${base64Image}`;
         await RNShare.open({
           activityItemSources:
             Platform.OS === 'ios'
@@ -45,7 +35,7 @@ export const shareImage = RNShare
           excludedActivityTypes: [] as unknown as string,
           failOnCancel: false,
           type,
-          url: Platform.OS === 'android' ? base64Url : undefined,
+          url: Platform.OS === 'android' ? `file://${url}` : undefined,
         });
         return true;
       } catch (error) {

package/src/components/ImageGallery/ImageGallery.tsx

@@ -528,7 +528,7 @@ export const ImageGallery = (props: Props) => {
     <Animated.View
       accessibilityLabel='Image Gallery'
       pointerEvents={'auto'}
-      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+      style={[StyleSheet.absoluteFillObject, showScreenStyle, { paddingVertical: 30 }]}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,5 +1,13 @@
-import React, { useState } from 'react';
-import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import React, { useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -100,7 +108,8 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
   } = props;
 
   const [height, setHeight] = useState(200);
-  const [shareMenuOpen, setShareMenuOpen] = useState(false);
+  const [savingInProgress, setSavingInProgress] = useState(false);
+  const shareIsInProgressRef = useRef<boolean>(false);
   const {
     theme: {
       colors: { black, white },
@@ -124,25 +133,31 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
   );
 
   const share = async () => {
-    setShareMenuOpen(true);
+    if (shareIsInProgressRef.current) {
+      return;
+    }
+    shareIsInProgressRef.current = true;
     try {
       if (!NativeHandlers.shareImage || !NativeHandlers.deleteFile) {
         return;
       }
       const extension = photo.mime_type?.split('/')[1] || 'jpg';
+      setSavingInProgress(true);
       const localFile = await NativeHandlers.saveFile({
         fileName: `${photo.user?.id || 'ChatPhoto'}-${
           photo.messageId
         }-${selectedIndex}.${extension}`,
         fromUrl: photo.uri,
       });
+      setSavingInProgress(false);
       // `image/jpeg` is added for the case where the mime_type isn't available for a file/image
       await NativeHandlers.shareImage({ type: photo.mime_type || 'image/jpeg', url: localFile });
       await NativeHandlers.deleteFile({ uri: localFile });
     } catch (error) {
+      setSavingInProgress(false);
       console.log(error);
     }
-    setShareMenuOpen(false);
+    shareIsInProgressRef.current = false;
   };
 
   return (
@@ -168,12 +183,12 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
         ) : null}
         <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
           {leftElement ? (
-            leftElement({ openGridView, photo, share, shareMenuOpen })
+            leftElement({ openGridView, photo, share, shareMenuOpen: savingInProgress })
           ) : (
-            <ShareButton share={share} ShareIcon={ShareIcon} shareMenuOpen={shareMenuOpen} />
+            <ShareButton savingInProgress={savingInProgress} share={share} ShareIcon={ShareIcon} />
           )}
           {centerElement ? (
-            centerElement({ openGridView, photo, share, shareMenuOpen })
+            centerElement({ openGridView, photo, share, shareMenuOpen: savingInProgress })
           ) : (
             <View style={[styles.centerContainer, centerContainer]}>
               <Text style={[styles.imageCountText, { color: black }, imageCountText]}>
@@ -185,7 +200,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
             </View>
           )}
           {rightElement ? (
-            rightElement({ openGridView, photo, share, shareMenuOpen })
+            rightElement({ openGridView, photo, share, shareMenuOpen: savingInProgress })
           ) : (
             <TouchableOpacity onPress={openGridView}>
               <View style={[styles.rightContainer, rightContainer]}>
@@ -201,11 +216,11 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterPropsWith
 
 type ShareButtonProps = {
   share: () => Promise<void>;
-  shareMenuOpen: boolean;
+  savingInProgress: boolean;
   ShareIcon?: React.ReactElement;
 };
 
-const ShareButton = ({ share, ShareIcon, shareMenuOpen }: ShareButtonProps) => {
+const ShareButton = ({ share, ShareIcon, savingInProgress }: ShareButtonProps) => {
   const {
     theme: {
       colors: { black },
@@ -221,9 +236,15 @@ const ShareButton = ({ share, ShareIcon, shareMenuOpen }: ShareButtonProps) => {
   }
 
   return (
-    <TouchableOpacity accessibilityLabel='Share Button' disabled={shareMenuOpen} onPress={share}>
+    <TouchableOpacity accessibilityLabel='Share Button' onPress={share}>
       <View style={[styles.leftContainer, leftContainer]}>
-        {ShareIcon ? ShareIcon : <ShareIconDefault pathFill={black} />}
+        {savingInProgress ? (
+          <ActivityIndicator size='small' />
+        ) : ShareIcon ? (
+          ShareIcon
+        ) : (
+          <ShareIconDefault pathFill={black} />
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -307,7 +328,7 @@ const styles = StyleSheet.create({
     marginRight: 8,
   },
   wrapper: {
-    bottom: 0,
+    bottom: 30,
     left: 0,
     position: 'absolute',
     right: 0,