Merge pull request #6 from vemarav/fixes/issue-#3-#4

Fixes: Install dependencies with npm@7 & image pannning for unequal width, height

Author: vemarav

example/CropImage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, StyleSheet, TouchableOpacity, Text, Dimensions} from 'react-native';
+import {View, StyleSheet, TouchableOpacity, Text, Dimensions, ScrollView} from 'react-native';
 import Routes from './Routes';
 import Crop from 'react-native-avatar-crop';
 
@@ -42,9 +42,8 @@ const CropImage = ({route, navigation}: CropImageProps): JSX.Element => {
 
   let crop = async (quality?: number) => ({uri: '', width: 0, height: 0});
 
-
   return (
-    <View style={styles.center}>
+    <ScrollView contentContainerStyle={styles.center}>
       <Crop
         source={{uri}}
         width={SCREEN_WIDTH}
@@ -62,7 +61,7 @@ const CropImage = ({route, navigation}: CropImageProps): JSX.Element => {
           <Text style={styles.btnText}>Save Crop</Text>
         </View>
       </TouchableOpacity>
-    </View>
+    </ScrollView>
   );
 };
 

example/CroppedImage.tsx

@@ -14,9 +14,8 @@ type CroppedImageProps = {
 
 const {width: SCREEN_WIDTH} = Dimensions.get('window');
 
-const CroppedImage = ({route, navigation}: CroppedImageProps) => {
+const CroppedImage = ({route}: CroppedImageProps) => {
   const {uri, width, height} = route.params;
-  const aspectRatio = getRatio({width, height});
   const styles = StyleSheet.create({
     center: {
       flex: 1,

example/PickImage.tsx

@@ -1,7 +1,16 @@
 import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View, TextInput, Image, Dimensions, ScrollView} from 'react-native';
-import {Asset, ImagePickerResponse, launchImageLibrary} from 'react-native-image-picker';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  TextInput,
+  Image,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
 import Routes from './Routes';
+import ImagePicker from 'react-native-image-crop-picker';
 
 const {width: SCREEN_WIDTH} = Dimensions.get('screen');
 
@@ -15,15 +24,17 @@ const PickImage = ({navigation}: PickImageProps): JSX.Element => {
   const [uri, setUri] = useState('');
 
   const openImagePicker = () => {
-    launchImageLibrary({mediaType: 'photo'}, ({assets}: ImagePickerResponse) => {
-      if (assets) {
-        onPickedImage(assets[0]);
-      }
-    });
+    ImagePicker.openPicker({
+      mediaType: 'photo',
+    }).then(onPickedImage);
   };
 
-  const onPickedImage = (image: Asset) => {
-    navigation.navigate(Routes.cropImage, image);
+  const onPickedImage = (image: any) => {
+    navigation.navigate(Routes.cropImage, {
+      uri: image.sourceURL,
+      width: image.width,
+      height: image.height,
+    });
   };
 
   const cropNetworkImage = () => {
@@ -42,19 +53,42 @@ const PickImage = ({navigation}: PickImageProps): JSX.Element => {
           backgroundColor: '#cccccc',
         }}>
         {uri ? (
-          <Image source={{uri}} style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH, resizeMode: 'contain'}} />
+          <Image
+            source={{uri}}
+            style={{
+              width: SCREEN_WIDTH,
+              height: SCREEN_WIDTH,
+              resizeMode: 'contain',
+            }}
+          />
         ) : (
           <Text>after typing url, wait till image loads</Text>
         )}
       </View>
-      <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingHorizontal: 30}}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingHorizontal: 30,
+        }}>
         <TextInput
-          style={{flex: 1, borderBottomWidth: 1, padding: 10, marginRight: 20, color: 'black'}}
+          style={{
+            flex: 1,
+            borderBottomWidth: 1,
+            padding: 10,
+            marginRight: 20,
+            color: 'black',
+          }}
           onChangeText={setUri}
           placeholder={'paste image url'}
+          autoCorrect={false}
+          autoCapitalize={"none"}
+          keyboardType={"url"}
         />
         <TouchableOpacity onPress={cropNetworkImage}>
-          <View style={{padding: 10, backgroundColor: '#0275d8', borderRadius: 4}}>
+          <View
+            style={{padding: 10, backgroundColor: '#0275d8', borderRadius: 4}}>
             <Text style={{color: 'white', fontWeight: '600'}}>Go</Text>
           </View>
         </TouchableOpacity>

example/ios/Example.xcodeproj/project.pbxproj

@@ -561,7 +561,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -626,7 +626,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

example/ios/Example/Info.plist

@@ -51,5 +51,13 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NSCameraUsageDescription</key>
+	<string>$(PRODUCT_NAME) would like to access your camera or photo library to be used as an avatar in an event.</string>
+	<key>NSLocalNetworkUsageDescription</key>
+	<string>$(PRODUCT_NAME) would like to access local network discovery for finding nearby atom devices.</string>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string>$(PRODUCT_NAME) would like to access location for local network discovery.</string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>$(PRODUCT_NAME) would like to access your camera or photo library to be used as an avatar in an event.</string>
 </dict>
 </plist>

example/ios/Podfile.lock

@@ -255,8 +255,6 @@ PODS:
   - react-native-image-editor (2.3.0):
     - React
     - React-RCTImage
-  - react-native-image-picker (4.0.6):
-    - React-Core
   - react-native-safe-area-context (3.2.0):
     - React-Core
   - React-perflogger (0.64.2)
@@ -327,6 +325,15 @@ PODS:
     - React
   - RNGestureHandler (1.10.3):
     - React-Core
+  - RNImageCropPicker (0.36.2):
+    - React-Core
+    - React-RCTImage
+    - RNImageCropPicker/QBImagePickerController (= 0.36.2)
+    - TOCropViewController
+  - RNImageCropPicker/QBImagePickerController (0.36.2):
+    - React-Core
+    - React-RCTImage
+    - TOCropViewController
   - RNReanimated (2.2.0):
     - DoubleConversion
     - FBLazyVector
@@ -359,6 +366,7 @@ PODS:
   - RNScreens (3.4.0):
     - React-Core
     - React-RCTImage
+  - TOCropViewController (2.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -401,7 +409,6 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - "react-native-image-editor (from `../node_modules/@react-native-community/image-editor`)"
-  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -417,6 +424,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -434,6 +442,7 @@ SPEC REPOS:
     - FlipperKit
     - libevent
     - OpenSSL-Universal
+    - TOCropViewController
     - YogaKit
 
 EXTERNAL SOURCES:
@@ -469,8 +478,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-image-editor:
     :path: "../node_modules/@react-native-community/image-editor"
-  react-native-image-picker:
-    :path: "../node_modules/react-native-image-picker"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-perflogger:
@@ -501,6 +508,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNImageCropPicker:
+    :path: "../node_modules/react-native-image-crop-picker"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -513,7 +522,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: e5f8db2cdc4e29fa726e78d31456fb6d2b605ccc
+  FBReactNativeSpec: c4a108970fc6d9c3463a5115eba221e386cbae80
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
@@ -536,7 +545,6 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 80c46bd381fd06e418e0d4f53672dc1d1945c4c3
   React-jsinspector: cc614ec18a9ca96fd275100c16d74d62ee11f0ae
   react-native-image-editor: 9361a215c3991cafbe5e7f28cbbad6e72c9c2705
-  react-native-image-picker: a6e56460d34905c849ada551db30897dc7f3d535
   react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   React-perflogger: 25373e382fed75ce768a443822f07098a15ab737
   React-RCTActionSheet: af7796ba49ffe4ca92e7277a5d992d37203f7da5
@@ -552,11 +560,13 @@ SPEC CHECKSUMS:
   ReactCommon: 149906e01aa51142707a10665185db879898e966
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584
   RNReanimated: 9c13c86454bfd54dab7505c1a054470bfecd2563
   RNScreens: 21b73c94c9117e1110a79ee0ee80c93ccefed8ce
+  TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   Yoga: 575c581c63e0d35c9a83f4b46d01d63abc1100ac
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: d24bf39ea41186607a7a2d6f21b4ffb7c434338e
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.10.2

example/package.json

@@ -17,9 +17,9 @@
     "@react-navigation/stack": "^5.14.5",
     "react": "17.0.1",
     "react-native": "0.64.2",
-    "react-native-avatar-crop": "0.0.7",
+    "react-native-avatar-crop": "1.1.1",
     "react-native-gesture-handler": "^1.10.3",
-    "react-native-image-picker": "^4.0.6",
+    "react-native-image-crop-picker": "^0.36.2",
     "react-native-image-size": "^1.1.3",
     "react-native-reanimated": "^2.2.0",
     "react-native-safe-area-context": "^3.2.0",

example/yarn.lock

@@ -1173,11 +1173,15 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
   integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
 
-"@react-native-community/image-editor@*", "@react-native-community/image-editor@^2.3.0":
+"@react-native-community/image-editor@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/image-editor/-/image-editor-2.3.0.tgz#8ac6c3691fd2c762d2abeb84c01a3b201bac3b1e"
   integrity sha512-+UJY8WkTkfSkjoU5blQnEI7tTg11jJLoM+YojjiQpEopUaRlYQU4SZ9Zd6F6wWfvc9bjvIeMY6FlKuESK/q4fQ==
 
+"@react-native-community/image-editor@git+https://github.com/vemarav/react-native-image-editor.git":
+  version "2.3.0"
+  resolved "git+https://github.com/vemarav/react-native-image-editor.git#081db98b4c9b70d86247cbbd0b5ce916aa97ce64"
+
 "@react-native-community/masked-view@*", "@react-native-community/masked-view@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
@@ -5601,12 +5605,12 @@ react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-avatar-crop@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/react-native-avatar-crop/-/react-native-avatar-crop-0.0.7.tgz#58d7ba58755ca5a8715afeb3f97ced78c252753e"
-  integrity sha512-nmssr8mOxJo7BDXD8E/8ZM0BTfsTmZ15mypHDiaeeAUtNUxpuWvmxYrbqU3fOtYwnf8Om6S5FbURRe5wlMHm6g==
+react-native-avatar-crop@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-avatar-crop/-/react-native-avatar-crop-1.1.1.tgz#5ce2ea0c7c44a2bb30f58815380e23a97bc28bc3"
+  integrity sha512-Jbtutzj1Zk+4nLH9ieiozChK8GUeBeGw4UEJJH87OxhlOvYixeFUWOrombCTQFKKrq+q4kbo+THOMcxSteWAMg==
   dependencies:
-    "@react-native-community/image-editor" "*"
+    "@react-native-community/image-editor" "https://github.com/vemarav/react-native-image-editor"
     "@react-native-community/masked-view" "*"
     react-native-gesture-handler "*"
     react-native-image-size "*"
@@ -5631,10 +5635,10 @@ react-native-gesture-handler@*, react-native-gesture-handler@^1.10.3:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-image-picker@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.6.tgz#0dfa5bb83bcf6ff58635ebb9201a185c2271e8cc"
-  integrity sha512-Pp3UWKUADuMG1mz12m6dSO/R2KnvXVEd77bldrfTMFpz4PFc4iVKo+bHeS79It0mUBezfzDMgfesg/OPLSugvQ==
+react-native-image-crop-picker@^0.36.2:
+  version "0.36.2"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.36.2.tgz#fcb35c1a12d805bedbb6d94a87078e86a6c9b49f"
+  integrity sha512-cTauoEHHzx14ZHA7Pt65e7RVnbn1WRYQz2ufTZp9/05EtNDrdsXwNhgtXdWVFbOhYB8qgUFQjy2NelkBOHIH3g==
 
 react-native-image-size@*, react-native-image-size@^1.1.3:
   version "1.1.3"

package/README.md

@@ -1,7 +1,5 @@
 # react-native-avatar-crop
 
-⚠️ WARNING: The package is in development and may have bugs apart from what is shown in the demo.
-
 Supports rect and circle cropping. Use `cropArea={{width, height}}` for custom aspect ratio.
 
 Download apk to see it in action, [click to download](https://github.com/vemarav/react-native-avatar-crop/releases/download/v1.0.5/app-release.apk)