From 243fb861ba4957d4487b2c3b4fc0f7ca5ba0c637 Mon Sep 17 00:00:00 2001
From: Meliodev <salimlyoussi1@gmail.com>
Date: Wed, 5 May 2021 15:36:29 +0000
Subject: [PATCH] restore to previous commit + Image crop improvement

Using a variant of react-native-perspective-image-cropper:
https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper/issues/37
C:\Users\lyous\OneDrive\Desktop\Github\Custom-Modules\react-native-perspective-image-cropper
---
 App.js               |  4 +-
 ImageCrop.js         | 96 ++++++++++++++++++++++++++++++++++++++++++++
 android/build.gradle |  2 +-
 3 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 ImageCrop.js

diff --git a/App.js b/App.js
index 8de881a..2a79130 100644
--- a/App.js
+++ b/App.js
@@ -184,9 +184,7 @@ export default class App extends Component {
           handlerColor="rgba(20,150,160, 1)"
           enablePanStrict={false}
         />
-        <TouchableOpacity onPress={this.crop.bind(this)} style={{ marginTop: 50 }}>
-          <Text>CROP IMAGE</Text>
-        </TouchableOpacity>
+       
       </View>
     )
   }
diff --git a/ImageCrop.js b/ImageCrop.js
new file mode 100644
index 0000000..b1d79f7
--- /dev/null
+++ b/ImageCrop.js
@@ -0,0 +1,96 @@
+
+
+import CustomCrop from "react-native-perspective-image-cropper";
+import ImagePicker from 'react-native-image-picker'
+
+class App extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      image: null,
+      path: '',
+      rectangleCoordinates: {
+        topLeft: { x: 50, y: 50 },
+        topRight: { x: 50, y: 50 },
+        bottomRight: { x: 50, y: 50 },
+        bottomLeft: { x: 50, y: 50 }
+      }
+    }
+  }
+
+  componentDidMount() {
+
+    const imagePickerOptions = {
+      title: 'Selectionner une image',
+      takePhotoButtonTitle: 'Prendre une photo',
+      chooseFromLibraryButtonTitle: 'Choisir de la librairie',
+      cancelButtonTitle: 'Annuler',
+      noData: true,
+      mediaType: 'photo'
+    }
+
+
+    ImagePicker.launchCamera(imagePickerOptions, response => {
+
+      if (response.didCancel) console.log('User cancelled image picker')
+      else if (response.error) console.log('ImagePicker Error: ', response.error);
+      else if (response.customButton) console.log('User tapped custom button: ', response.camera);
+
+      else {
+
+        const path = Platform.OS === 'android' ? response.path : response.uri //try without file://
+
+        this.setState({
+          path,
+          imageWidth: response.width,
+          imageHeight: response.height,
+          image: response.uri,
+        })
+      }
+
+    })
+
+  }
+
+  updateImage(image, newCoordinates) {
+    image = `data:image/jpeg;base64,${image}`
+    Image.getSize(image, () => {
+
+    })
+    this.setState({
+      image,
+      rectangleCoordinates: newCoordinates
+    });
+  }
+
+  crop() {
+    this.customCrop.crop();
+  }
+
+  render() {
+    const { image, imageHeight, imageWidth, path } = this.state
+
+    if (!image || !imageWidth || !imageHeight || !path) return null
+
+    return (
+      <View>
+        <CustomCrop
+          updateImage={this.updateImage.bind(this)}
+          //rectangleCoordinates={this.state.rectangleCoordinates}
+          initialImage={this.state.image}
+          path={this.state.path}
+          height={this.state.imageHeight}
+          width={this.state.imageWidth}
+          ref={ref => (this.customCrop = ref)}
+          overlayColor="rgba(18,190,210, 1)"
+          overlayStrokeColor="rgba(20,190,210, 1)"
+          handlerColor="rgba(20,150,160, 1)"
+          enablePanStrict={false}
+        />
+      </View>
+    )
+  }
+}
+
diff --git a/android/build.gradle b/android/build.gradle
index a225ba1..d017ad3 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -3,7 +3,7 @@
 buildscript {
     ext {
         buildToolsVersion = "29.0.2"
-        minSdkVersion = 16
+        minSdkVersion = 19
         compileSdkVersion = 29
         targetSdkVersion = 29
     }