Merge pull request #8511 from Tabakharniuk/feature/#6301_Avatar-edit-…

…modal

Feature Request - Profile / Workspace - Allow avatar editing via cropping, rotation and zooming

ios/Podfile.lock

@@ -445,6 +445,8 @@ PODS:
     - React-Core
   - react-native-flipper (0.117.0):
     - React-Core
+  - react-native-image-manipulator (1.0.5):
+    - React
   - react-native-image-picker (4.7.3):
     - React-Core
   - react-native-netinfo (8.3.0):
@@ -560,7 +562,7 @@ PODS:
     - Firebase/Performance (= 8.4.0)
     - React-Core
     - RNFBApp
-  - RNGestureHandler (1.9.0):
+  - RNGestureHandler (2.4.0):
     - React-Core
   - RNPermissions (3.0.1):
     - React-Core
@@ -665,6 +667,7 @@ DEPENDENCIES:
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-flipper (from `../node_modules/react-native-flipper`)
+  - "react-native-image-manipulator (from `../node_modules/@oguzhnatly/react-native-image-manipulator`)"
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-pdf (from `../node_modules/react-native-pdf`)
@@ -798,6 +801,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-document-picker"
   react-native-flipper:
     :path: "../node_modules/react-native-flipper"
+  react-native-image-manipulator:
+    :path: "../node_modules/@oguzhnatly/react-native-image-manipulator"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
   react-native-netinfo:
@@ -939,6 +944,7 @@ SPEC CHECKSUMS:
   react-native-config: 6502b1879f97ed5ac570a029961fc35ea606cd14
   react-native-document-picker: 772d04a4bc5c35da9abe27b08ac271420ae3f9ef
   react-native-flipper: cd9eabd8917104c1bbdca2621717cdca3b2addef
+  react-native-image-manipulator: db28c0cc09d89e740974c9bb2f13175eb48f1ef2
   react-native-image-picker: ae1202414bd5c37c00b2a701daa5b6194a06b7d9
   react-native-netinfo: ebbcd8fbe1a0ce7035e43cd18c5a545dcb93dd08
   react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f

jest/setup.js

@@ -1,14 +1,6 @@
 import 'react-native-gesture-handler/jestSetup';
 
-jest.mock('react-native-reanimated', () => {
-    const Reanimated = require('react-native-reanimated/mock');
-
-    // The mock for `call` immediately calls the callback which is incorrect
-    // So we override it with a no-op
-    Reanimated.default.call = () => {};
-
-    return Reanimated;
-});
+require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();
 
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package.json

@@ -41,6 +41,7 @@
     "@formatjs/intl-locale": "^2.4.21",
     "@formatjs/intl-numberformat": "^6.2.5",
     "@formatjs/intl-pluralrules": "^4.0.13",
+    "@oguzhnatly/react-native-image-manipulator": "^1.0.5",
     "@onfido/react-native-sdk": "^5.4.0",
     "@react-native-async-storage/async-storage": "^1.15.5",
     "@react-native-community/cameraroll": "^4.1.2",
@@ -84,7 +85,7 @@
     "react-native-config": "^1.4.5",
     "react-native-document-picker": "^8.0.0",
     "react-native-fast-image": "^8.5.11",
-    "react-native-gesture-handler": "1.9.0",
+    "react-native-gesture-handler": "2.4.0",
     "react-native-google-places-autocomplete": "git+https://github.com/Expensify/react-native-google-places-autocomplete.git#3bbd17d63e6c38d38d857b50f6037c1c0376ff06",
     "react-native-haptic-feedback": "^1.13.0",
     "react-native-image-pan-zoom": "^2.1.12",

src/CONST.js

@@ -24,6 +24,10 @@ const CONST = {
     },
 
     AVATAR_MAX_ATTACHMENT_SIZE: 6291456,
+
+    // Minimum width and height size in px for a selected image
+    AVATAR_MIN_WIDTH_PX: 80,
+    AVATAR_MIN_HEIGHT_PX: 80,
     NEW_EXPENSIFY_URL: ACTIVE_EXPENSIFY_URL,
     APP_DOWNLOAD_LINKS: {
         ANDROID: `https://play.google.com/store/apps/details?id=${ANDROID_PACKAGE_NAME}`,
@@ -749,6 +753,18 @@ const CONST = {
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
     MAX_COMMENT_LENGTH: 60000,
 
+    AVATAR_CROP_MODAL: {
+        // The next two constants control what is min and max value of the image crop scale.
+        // Values define in how many times the image can be bigger than its container.
+        // Notice: that values less than 1 mean that the image won't cover the container fully.
+        MAX_SCALE: 3, // 3x scale is used commonly in different apps.
+        MIN_SCALE: 1, // 1x min scale means that the image covers the container completely
+
+        // This const defines the initial container size, before layout measurement.
+        // Since size cant be null, we have to define some initial value.
+        INITIAL_SIZE: 1, // 1 was chosen because there is a very low probability that initialized component will have such size.
+    },
+
     ONYX: {
         METHOD: {
             MERGE: 'merge',