diff --git a/.eslintrc.js b/.eslintrc.js index 0d941f5a66b4..c2198da60c52 100644 --- a/.eslintrc.js +++ b/.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', { diff --git a/package-lock.json b/package-lock.json index 9b24578a8398..f0e3a21cea5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,7 +88,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", @@ -39406,8 +39406,7 @@ }, "node_modules/react-native-image-size": { "version": "1.1.3", - "resolved": "git+ssh://git@github.com/Expensify/react-native-image-size.git#8393b7e58df6ff65fd41f60aee8ece8822c91e2b", - "integrity": "sha512-TDqeqGrxL+iRweaiDxg0jlMOmW8/7bti9PFi8rSRgGdiyu7loiuq4tmTGPAOefQtgDxoNRdSviH5isUyd3FV8g==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-image-size.git#bf3ad41a61c4f6f80ed4d497599ef5247a2dd002", "license": "MIT" }, "node_modules/react-native-key-command": { diff --git a/package.json b/package.json index 522ef035797c..092aa4dabcc9 100644 --- a/package.json +++ b/package.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", diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx index 19244913174d..e0ad50a75645 100644 --- a/src/components/AttachmentPicker/index.native.tsx +++ b/src/components/AttachmentPicker/index.native.tsx @@ -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); diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index eac41b6d627a..dcec2e14a9e7 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.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;