From 9e22ed140f625757168688abd98e4b964889c8a2 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 21 Mar 2024 14:11:33 +0100 Subject: [PATCH 1/4] use react-native-image-size --- src/components/AttachmentPicker/index.native.js | 5 +++-- src/components/AvatarCropModal/AvatarCropModal.tsx | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js index 0387ee087127..17f57309aadc 100644 --- a/src/components/AttachmentPicker/index.native.js +++ b/src/components/AttachmentPicker/index.native.js @@ -2,10 +2,11 @@ import Str from 'expensify-common/lib/str'; import lodashCompact from 'lodash/compact'; import PropTypes from 'prop-types'; 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 {launchImageLibrary} from 'react-native-image-picker'; +import ImageSize from 'react-native-image-size'; import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; @@ -268,7 +269,7 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) { } const fileData = _.first(attachments); if (Str.isImage(fileData.fileName || fileData.name)) { - RNImage.getSize(fileData.fileCopyUri || fileData.uri, (width, height) => { + ImageSize.getSize(fileData.fileCopyUri || fileData.uri).then(({width, height}) => { fileData.width = width; fileData.height = height; return validateAndCompleteAttachmentSelection(fileData); 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; From 909eb5fc4959b1f1cfd63d959e8ea853cb32aaaf Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 21 Mar 2024 14:36:52 +0100 Subject: [PATCH 2/4] add eslint rule --- .eslintrc.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 33be8cb62fcd..906e10f557fa 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -249,6 +249,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', { From 9877f24e17aabd612da9085601627ed458ae2b6b Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 21 Mar 2024 14:46:16 +0100 Subject: [PATCH 3/4] use local react-native-image-size --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 118999e83814..180dc9afb87d 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": "file:../react-native-image-size/react-native-image-size-1.1.3.tgz", "react-native-key-command": "^1.0.6", "react-native-launch-arguments": "^4.0.2", "react-native-linear-gradient": "^2.8.1", @@ -39210,8 +39210,8 @@ }, "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": "file:../react-native-image-size/react-native-image-size-1.1.3.tgz", + "integrity": "sha512-pb1kWfRvBlXGlWU3YQicpa+IJglucYaHL2gTSKMNW0WAqvMkOTERyakr2MuXoEogMf4tinNgrJRIzx0YPpTCKw==", "license": "MIT" }, "node_modules/react-native-key-command": { diff --git a/package.json b/package.json index 3161079012ad..f416912ed0e1 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": "file:../react-native-image-size/react-native-image-size-1.1.3.tgz", "react-native-key-command": "^1.0.6", "react-native-launch-arguments": "^4.0.2", "react-native-linear-gradient": "^2.8.1", From 27ad96cf06f2b5a24262015bedda210dcdb10df1 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 25 Mar 2024 14:16:55 +0100 Subject: [PATCH 4/4] update the library --- package-lock.json | 5 ++--- package.json | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 180dc9afb87d..affe1cf91d6c 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": "file:../react-native-image-size/react-native-image-size-1.1.3.tgz", + "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", @@ -39210,8 +39210,7 @@ }, "node_modules/react-native-image-size": { "version": "1.1.3", - "resolved": "file:../react-native-image-size/react-native-image-size-1.1.3.tgz", - "integrity": "sha512-pb1kWfRvBlXGlWU3YQicpa+IJglucYaHL2gTSKMNW0WAqvMkOTERyakr2MuXoEogMf4tinNgrJRIzx0YPpTCKw==", + "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 f416912ed0e1..abb8d64cb253 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": "file:../react-native-image-size/react-native-image-size-1.1.3.tgz", + "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",