Merge pull request #38746 from software-mansion-labs/@kosmydel/react-native-image-size

Author: roryabraham

.eslintrc.js

@@ -250,6 +250,14 @@ module.exports = {
                         message: "Please don't declare enums, use union types instead.",
                     },
                 ],
+                'no-restricted-properties': [
+                    'error',
+                    {
+                        object: 'Image',
+                        property: 'getSize',
+                        message: 'Usage of Image.getImage is restricted. Please use the `react-native-image-size`.',
+                    },
+                ],
                 'no-restricted-imports': [
                     'error',
                     {

package-lock.json

@@ -139,7 +139,7 @@
     "react-native-google-places-autocomplete": "2.5.6",
     "react-native-haptic-feedback": "^2.2.0",
     "react-native-image-picker": "^7.0.3",
-    "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#8393b7e58df6ff65fd41f60aee8ece8822c91e2b",
+    "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#bf3ad41a61c4f6f80ed4d497599ef5247a2dd002",
     "react-native-key-command": "^1.0.6",
     "react-native-launch-arguments": "^4.0.2",
     "react-native-linear-gradient": "^2.8.1",

package.json

@@ -1,11 +1,12 @@
 import Str from 'expensify-common/lib/str';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
-import {Alert, Image as RNImage, View} from 'react-native';
+import {Alert, View} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
 import RNDocumentPicker from 'react-native-document-picker';
 import type {DocumentPickerOptions, DocumentPickerResponse} from 'react-native-document-picker';
 import {launchImageLibrary} from 'react-native-image-picker';
 import type {Asset, Callback, CameraOptions, ImagePickerResponse} from 'react-native-image-picker';
+import ImageSize from 'react-native-image-size';
 import type {FileObject, ImagePickerResponse as FileResponse} from '@components/AttachmentModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
@@ -281,7 +282,7 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
             };
             /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
             if (fileDataName && Str.isImage(fileDataName)) {
-                RNImage.getSize(fileDataUri, (width, height) => {
+                ImageSize.getSize(fileDataUri).then(({width, height}) => {
                     fileDataObject.width = width;
                     fileDataObject.height = height;
                     validateAndCompleteAttachmentSelection(fileDataObject);

src/components/AttachmentPicker/index.native.tsx

@@ -1,8 +1,9 @@
 import React, {useCallback, useEffect, useState} from 'react';
-import {ActivityIndicator, Image, View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 import type {LayoutChangeEvent} from 'react-native';
 import {Gesture, GestureHandlerRootView} from 'react-native-gesture-handler';
 import type {GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
+import ImageSize from 'react-native-image-size';
 import {interpolate, runOnUI, useSharedValue, useWorkletCallback} from 'react-native-reanimated';
 import Button from '@components/Button';
 import HeaderGap from '@components/HeaderGap';
@@ -118,7 +119,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
         if (!imageUri) {
             return;
         }
-        Image.getSize(imageUri, (width, height) => {
+        ImageSize.getSize(imageUri).then(({width, height}) => {
             // We need to have image sizes in shared values to properly calculate position/size/animation
             originalImageHeight.value = height;
             originalImageWidth.value = width;