fix: Chat Reaction out of bounds (#166)

* fix: Chat Reaction out of bounds * save to gallery * cleanup
homebase-id · Aug 21, 2024 · f111165 · f111165
1 parent d4397c1
commit f111165
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mobile/ios/Podfile.lock b/packages/mobile/ios/Podfile.lock
@@ -977,7 +977,7 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - react-native-cameraroll (7.8.1):
+  - react-native-cameraroll (7.8.3):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1297,7 +1297,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`)
   - react-native-blob-util (from `../../../node_modules/react-native-blob-util`)
   - "react-native-blur (from `../../../node_modules/@react-native-community/blur`)"
-  - "react-native-cameraroll (from `../../../node_modules/@react-native-camera-roll/camera-roll`)"
+  - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-compressor (from `../../../node_modules/react-native-compressor`)
   - react-native-document-picker (from `../../../node_modules/react-native-document-picker`)
   - react-native-image-picker (from `../../../node_modules/react-native-image-picker`)
@@ -1447,7 +1447,7 @@ EXTERNAL SOURCES:
   react-native-blur:
     :path: "../../../node_modules/@react-native-community/blur"
   react-native-cameraroll:
-    :path: "../../../node_modules/@react-native-camera-roll/camera-roll"
+    :path: "../node_modules/@react-native-camera-roll/camera-roll"
   react-native-compressor:
     :path: "../../../node_modules/react-native-compressor"
   react-native-document-picker:
@@ -1612,7 +1612,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: d81d930c1b7f4db284e1d721fe7fdc99230ca108
   react-native-blob-util: 18b510205c080a453574a7d2344d64673d0ad9af
   react-native-blur: 73561b0608a43d76f2874738aee8e3909c11d083
-  react-native-cameraroll: ecc2a7301b75d1793fb364fd9771c7ed207bfa59
+  react-native-cameraroll: da5e6ab056c141650e565f17f0161a924f1dcf8d
   react-native-compressor: 58eeb2c4c9dc4c898c7085d7e72a02f7ea4cfb64
   react-native-document-picker: 5b97e24a7f1a1e4a50a72c540a043f32d29a70a2
   react-native-image-picker: 7c3a279e7a518628910f2ea02917bd3b90049465

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -24,7 +24,7 @@
     "@peculiar/json-schema": "^1.1.12",
     "@peculiar/webcrypto": "1.4.5",
     "@react-native-async-storage/async-storage": "^1.21.0",
-    "@react-native-camera-roll/camera-roll": "^7.4.1",
+    "@react-native-camera-roll/camera-roll": "^7.8.3",
     "@react-native-clipboard/clipboard": "^1.14.0",
     "@react-native-community/blur": "^4.4.0",
     "@react-native-community/checkbox": "^0.5.17",

diff --git a/packages/mobile/src/components/Chat/Chat-Reaction.tsx b/packages/mobile/src/components/Chat/Chat-Reaction.tsx
@@ -45,9 +45,10 @@ const ChatReaction = memo(
     }, [message, messageCordinates, scale, selectedMessage, showReaction]);
 
     const reactionStyle = useAnimatedStyle(() => {
-      let y = messageCordinates.y;
+      let y = Math.abs(messageCordinates.y);
       let shouldAnimate = false;
       const isLessDistanceFromTop = y < 100;
+
       const isLessDistanceFromBottom = height - y < 0;
       if (isLessDistanceFromBottom) {
         shouldAnimate = true;
@@ -56,7 +57,7 @@ const ChatReaction = memo(
       if (isLessDistanceFromTop) {
         shouldAnimate = true;
       }
-      y = isNaN(y) ? 0 : y;
+      y = isNaN(y) ? 0 : y < 80 ? 80 + y : y;
       return {
         transform: [
           {

diff --git a/packages/mobile/src/pages/media-preview-page.tsx b/packages/mobile/src/pages/media-preview-page.tsx
@@ -30,8 +30,7 @@ import Toast from 'react-native-toast-message';
 import Clipboard from '@react-native-clipboard/clipboard';
 import Animated from 'react-native-reanimated';
 import { ZOOM_TYPE } from '@likashefqet/react-native-image-zoom';
-import ReactNativeBlobUtil from 'react-native-blob-util';
-import { copyFile, DownloadDirectoryPath } from 'react-native-fs';
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 
 export type MediaProp = NativeStackScreenProps<ChatStackParamList, 'PreviewMedia'>;
 
@@ -98,22 +97,20 @@ export const PreviewMedia = memo((prop: MediaProp) => {
         return;
       }
 
-      if (Platform.OS === 'ios') {
-        ReactNativeBlobUtil.ios.openDocument(imageData.imageData?.url);
-      }
-      if (Platform.OS === 'android') {
-        const destination =
-          DownloadDirectoryPath +
-          '/' +
-          `Homebase-Image-${new Date().getTime()}` +
-          `.${imageData.imageData?.type?.split('/')[1]}`;
-        await copyFile(imageData.imageData?.url, destination);
+      await CameraRoll.saveAsset(imageData.imageData?.url).catch((error) => {
         Toast.show({
-          type: 'success',
-          text1: 'Image downloaded successfully',
+          type: 'error',
+          text1: 'Failed to save image',
           position: 'bottom',
+          text2: error.message,
         });
-      }
+      });
+
+      Toast.show({
+        type: 'success',
+        text1: 'Image downloaded successfully',
+        position: 'bottom',
+      });
     };
     return <IconButton icon={<Download color={Colors.white} />} onPress={onDownload} />;
   }, [currIndex, fileId, getImage, height, payloads, width]);
@@ -151,7 +148,6 @@ export const PreviewMedia = memo((prop: MediaProp) => {
     Share.open({
       type: imageData?.imageData?.type,
       url: imageData?.imageData?.url,
-      saveToFiles: true,
     });
   }, [currIndex, fileId, getImage, height, payloads, width]);