From 9419c76c131f28690822209f6451981c8a61273d Mon Sep 17 00:00:00 2001
From: shahjahanpak <47810605+shahjahanpak@users.noreply.github.com>
Date: Thu, 25 Aug 2022 18:14:18 +0500
Subject: [PATCH 01/12] new change

get new fork
---
 src/Main.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Main.tsx b/src/Main.tsx
index 54984b8..2cb17c5 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -21,6 +21,7 @@ export type AmazingCropperProps = {
   COMPONENT_WIDTH?: number;
   COMPONENT_HEIGHT?: number;
 } & typeof defaultProps;
+/// new key change
 
 const defaultProps = {
   footerComponent: <DefaultFooter doneText='DONE' rotateText='ROTATE' cancelText='CANCEL' />,

From ecb8effbcea1e9b911771daa35806bcb770850b3 Mon Sep 17 00:00:00 2001
From: shahjahanpak <47810605+shahjahanpak@users.noreply.github.com>
Date: Thu, 25 Aug 2022 18:24:35 +0500
Subject: [PATCH 02/12] remove dist file

dist file it will create run time issue, and file not found.
---
 package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/package.json b/package.json
index 5d16196..9f5eaa1 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,6 @@
   "name": "react-native-amazing-cropper",
   "version": "0.1.9",
   "description": "Custom react native cropper with rotation",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

From 7b96a76a833bdc5f7e0b29862a97813283e0151e Mon Sep 17 00:00:00 2001
From: shahjahanpak <47810605+shahjahanpak@users.noreply.github.com>
Date: Thu, 25 Aug 2022 18:56:15 +0500
Subject: [PATCH 03/12] container backgroundColor, grid column
 borderColor/width, borderDesignColor props introduced

---
 src/Cropper/Cropper.page.tsx | 12 ++++---
 src/Cropper/Cropper.style.ts |  4 ---
 src/Cropper/Cropper.tsx      | 61 ++++++++++++++++++++++--------------
 src/Main.tsx                 |  6 ++++
 4 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/src/Cropper/Cropper.page.tsx b/src/Cropper/Cropper.page.tsx
index 7d5298a..6e7a450 100644
--- a/src/Cropper/Cropper.page.tsx
+++ b/src/Cropper/Cropper.page.tsx
@@ -24,6 +24,7 @@ type CropperPageProps = {
   BORDER_WIDTH: number;
   COMPONENT_WIDTH: number;
   COMPONENT_HEIGHT: number;
+  style?: { container: { backgroundColor: string }; grid: { border: { borderColor: string }; column: { borderWidth: number; borderColor: string } } };
 };
 
 interface ExtendedAnimatedValue extends Animated.Value {
@@ -693,7 +694,7 @@ class CropperPage extends Component<CropperPageProps, State> {
       (rotatedUri: string) => {
         //
         ImageEditor.cropImage(rotatedUri, cropData)
-          .then(croppedUri => {
+          .then((croppedUri) => {
             this.props.onDone(croppedUri);
           })
           .catch((err: Error) => {
@@ -710,6 +711,7 @@ class CropperPage extends Component<CropperPageProps, State> {
   render() {
     return (
       <Cropper
+        style={this.props.style}
         imageUri={this.props.imageUri} // 'https://3.imimg.com/data3/SN/NO/MY-10244508/vertical-building-parking-500x500.jpg'
         footerComponent={this.props.footerComponent}
         getTopOuterStyle={this.getTopOuterStyle}
@@ -742,10 +744,10 @@ class CropperPage extends Component<CropperPageProps, State> {
         bottomRightPanResponder={this.state.bottomRightPanResponder}
         topRightPanResponder={this.state.topRightPanResponder}
         rectanglePanResponder={this.state.rectanglePanResponder}
-        topOuterRef={ref => (this.topOuter = ref)}
-        leftOuterRef={ref => (this.leftOuter = ref)}
-        bottomOuterRef={ref => (this.bottomOuter = ref)}
-        rightOuterRef={ref => (this.rightOuter = ref)}
+        topOuterRef={(ref) => (this.topOuter = ref)}
+        leftOuterRef={(ref) => (this.leftOuter = ref)}
+        bottomOuterRef={(ref) => (this.bottomOuter = ref)}
+        rightOuterRef={(ref) => (this.rightOuter = ref)}
         COMPONENT_WIDTH={this.props.COMPONENT_WIDTH}
         COMPONENT_HEIGHT={this.props.COMPONENT_HEIGHT}
         W={this.W}
diff --git a/src/Cropper/Cropper.style.ts b/src/Cropper/Cropper.style.ts
index 2cdc69d..d20a86c 100644
--- a/src/Cropper/Cropper.style.ts
+++ b/src/Cropper/Cropper.style.ts
@@ -8,7 +8,6 @@ export default function getStyles(COMPONENT_WIDTH: number, COMPONENT_HEIGHT: num
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: 'black',
     },
     secondContainer: {
       position: 'absolute',
@@ -29,8 +28,6 @@ export default function getStyles(COMPONENT_WIDTH: number, COMPONENT_HEIGHT: num
     },
     gridColumn: {
       flex: 1,
-      borderWidth: 1,
-      borderColor: 'rgba(255, 255, 255, 0.5)',
     },
     animation: {
       position: 'absolute',
@@ -92,7 +89,6 @@ export default function getStyles(COMPONENT_WIDTH: number, COMPONENT_HEIGHT: num
     borderDesign: {
       width: 30,
       height: 30,
-      borderColor: 'white',
     },
     icon: {
       paddingRight: 10,
diff --git a/src/Cropper/Cropper.tsx b/src/Cropper/Cropper.tsx
index 307a124..6c5b1ff 100644
--- a/src/Cropper/Cropper.tsx
+++ b/src/Cropper/Cropper.tsx
@@ -43,12 +43,15 @@ interface CropperProps {
   COMPONENT_HEIGHT: number;
   W: number;
   H: number;
+  style?: { container: { backgroundColor: string }; grid: { column: { borderWidth: number; borderColor: string } } };
 }
 
-const Cropper: React.FC<CropperProps> = props => {
+const Cropper: React.FC<CropperProps> = (props) => {
   const styles = getStyles(props.COMPONENT_WIDTH, props.COMPONENT_HEIGHT, props.W);
+  const gridColumn = { ...styles.griColumn, ...props.style.grid.column };
+  const borderDesign = { ...styles.borderDesign, ...props.style.grid.border };
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, props.style.container]}>
       <View style={styles.secondContainer}>
         <Image style={props.getImageStyle()} source={{ uri: props.imageUri }} />
       </View>
@@ -67,8 +70,14 @@ const Cropper: React.FC<CropperProps> = props => {
         // @ts-ignore */}
       <Animated.View ref={props.leftOuterRef} style={[styles.animation, props.getLeftOuterStyle()]} {...props.leftOuterPanResponder.panHandlers} />
       {/*
-        // @ts-ignore */ /* eslint-disable-line */ /* eslint-disable-next-line prettier/prettier */}
-      <Animated.View ref={props.bottomOuterRef} style={[styles.animation, props.getBottomOuterStyle()]} {...props.bottomOuterPanResponder.panHandlers} />
+        // @ts-ignore */
+      /* eslint-disable-line */
+      /* eslint-disable-next-line prettier/prettier */}
+      <Animated.View
+        ref={props.bottomOuterRef}
+        style={[styles.animation, props.getBottomOuterStyle()]}
+        {...props.bottomOuterPanResponder.panHandlers}
+      />
       {/*
         // @ts-ignore */}
       <Animated.View ref={props.rightOuterRef} style={[styles.animation, props.getRightOuterStyle()]} {...props.rightOuterPanResponder.panHandlers} />
@@ -80,45 +89,51 @@ const Cropper: React.FC<CropperProps> = props => {
 
       <Animated.View style={[styles.animation, styles.topLeftAnimation, props.getTopLeftStyle()]} {...props.topLeftPanResponder.panHandlers} />
       {/* eslint-disable-next-line prettier/prettier */}
-      <Animated.View style={[styles.animation, styles.bottomLeftAnimation, props.getBottomLeftStyle()]} {...props.bottomLeftPanResponder.panHandlers} />
+      <Animated.View
+        style={[styles.animation, styles.bottomLeftAnimation, props.getBottomLeftStyle()]}
+        {...props.bottomLeftPanResponder.panHandlers}
+      />
       {/* eslint-disable-next-line prettier/prettier */}
-      <Animated.View style={[styles.animation, styles.bottomRightAnimation, props.getBottomRightStyle()]} {...props.bottomRightPanResponder.panHandlers} />
+      <Animated.View
+        style={[styles.animation, styles.bottomRightAnimation, props.getBottomRightStyle()]}
+        {...props.bottomRightPanResponder.panHandlers}
+      />
       <Animated.View style={[styles.animation, styles.topRightAnimation, props.getTopRightStyle()]} {...props.topRightPanResponder.panHandlers} />
 
       <Animated.View style={[styles.animation, props.getRectangleStyle()]} {...props.rectanglePanResponder.panHandlers}>
         <View style={styles.gridRow}>
-          <View style={styles.gridColumn}>
-            <View style={[styles.borderDesign, { borderLeftWidth: 3, borderTopWidth: 3 }]} />
+          <View style={gridColumn}>
+            <View style={[borderDesign, { borderLeftWidth: 3, borderTopWidth: 3 }]} />
           </View>
-          <View style={styles.gridColumn}>
-            <View style={[styles.borderDesign, { borderTopWidth: 3, alignSelf: 'center' }]} />
+          <View style={gridColumn}>
+            <View style={[borderDesign, { borderTopWidth: 3, alignSelf: 'center' }]} />
           </View>
-          <View style={styles.gridColumn}>
-            <View style={[styles.borderDesign, { borderTopWidth: 3, borderRightWidth: 3, alignSelf: 'flex-end' }]} />
+          <View style={gridColumn}>
+            <View style={[borderDesign, { borderTopWidth: 3, borderRightWidth: 3, alignSelf: 'flex-end' }]} />
           </View>
         </View>
 
         <View style={styles.gridRow}>
-          <View style={[styles.gridColumn, { flexDirection: 'row' }]}>
-            <View style={[styles.borderDesign, { borderLeftWidth: 3, alignSelf: 'center' }]} />
+          <View style={[gridColumn, { flexDirection: 'row' }]}>
+            <View style={[borderDesign, { borderLeftWidth: 3, alignSelf: 'center' }]} />
           </View>
-          <View style={styles.gridColumn} />
-          <View style={[styles.gridColumn, { justifyContent: 'center' }]}>
-            <View style={[styles.borderDesign, { borderRightWidth: 3, alignSelf: 'flex-end' }]} />
+          <View style={gridColumn} />
+          <View style={[gridColumn, { justifyContent: 'center' }]}>
+            <View style={[borderDesign, { borderRightWidth: 3, alignSelf: 'flex-end' }]} />
           </View>
         </View>
 
         <View style={styles.gridRow}>
-          <View style={[styles.gridColumn, { justifyContent: 'flex-end' }]}>
-            <View style={[styles.borderDesign, { borderLeftWidth: 3, borderBottomWidth: 3 }]} />
+          <View style={[gridColumn, { justifyContent: 'flex-end' }]}>
+            <View style={[borderDesign, { borderLeftWidth: 3, borderBottomWidth: 3 }]} />
           </View>
-          <View style={[styles.gridColumn, { justifyContent: 'flex-end' }]}>
-            <View style={[styles.borderDesign, { borderBottomWidth: 3, alignSelf: 'center' }]} />
+          <View style={[gridColumn, { justifyContent: 'flex-end' }]}>
+            <View style={[borderDesign, { borderBottomWidth: 3, alignSelf: 'center' }]} />
           </View>
-          <View style={[styles.gridColumn, { justifyContent: 'flex-end' }]}>
+          <View style={[gridColumn, { justifyContent: 'flex-end' }]}>
             <View
               style={[
-                styles.borderDesign,
+                borderDesign,
                 {
                   borderRightWidth: 3,
                   borderBottomWidth: 3,
diff --git a/src/Main.tsx b/src/Main.tsx
index 2cb17c5..a1d7978 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -20,6 +20,7 @@ export type AmazingCropperProps = {
   BORDER_WIDTH?: number;
   COMPONENT_WIDTH?: number;
   COMPONENT_HEIGHT?: number;
+  style?: { container: { backgroundColor: string }; grid: { border: { borderColor: string }; column: { borderWidth: number; borderColor: string } } };
 } & typeof defaultProps;
 /// new key change
 
@@ -40,6 +41,10 @@ const defaultProps = {
   BORDER_WIDTH: 50,
   COMPONENT_WIDTH: SCREEN_WIDTH,
   COMPONENT_HEIGHT: SCREEN_HEIGHT,
+  style: {
+    container: { backgroundColor: '#000' },
+    grid: { border: { borderColor: '#FFF' }, column: { borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)' } },
+  },
 };
 
 class Main extends Component<AmazingCropperProps> {
@@ -64,6 +69,7 @@ class Main extends Component<AmazingCropperProps> {
         BORDER_WIDTH={this.props.BORDER_WIDTH}
         COMPONENT_WIDTH={this.props.COMPONENT_WIDTH}
         COMPONENT_HEIGHT={this.props.COMPONENT_HEIGHT}
+        style={this.props.style}
       />
     );
   }

From eeb764e4a6882f5c73a47eb5389b84af6ea85a43 Mon Sep 17 00:00:00 2001
From: shahjahanpak <47810605+shahjahanpak@users.noreply.github.com>
Date: Thu, 25 Aug 2022 19:43:13 +0500
Subject: [PATCH 04/12] type fixes

---
 src/Cropper/Cropper.page.tsx | 3 ++-
 src/Cropper/Cropper.tsx      | 6 ++++--
 src/Main.tsx                 | 7 ++++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/Cropper/Cropper.page.tsx b/src/Cropper/Cropper.page.tsx
index 6e7a450..20c9b7e 100644
--- a/src/Cropper/Cropper.page.tsx
+++ b/src/Cropper/Cropper.page.tsx
@@ -6,6 +6,7 @@ import ImageEditor from '@react-native-community/image-editor';
 import { Q } from '../constants';
 import Cropper from './Cropper';
 import { getCropperLimits } from '../utils';
+import { StyleType } from '../Main';
 
 type CropperPageProps = {
   footerComponent: JSX.Element;
@@ -24,7 +25,7 @@ type CropperPageProps = {
   BORDER_WIDTH: number;
   COMPONENT_WIDTH: number;
   COMPONENT_HEIGHT: number;
-  style?: { container: { backgroundColor: string }; grid: { border: { borderColor: string }; column: { borderWidth: number; borderColor: string } } };
+  style: StyleType;
 };
 
 interface ExtendedAnimatedValue extends Animated.Value {
diff --git a/src/Cropper/Cropper.tsx b/src/Cropper/Cropper.tsx
index 6c5b1ff..d2a4ada 100644
--- a/src/Cropper/Cropper.tsx
+++ b/src/Cropper/Cropper.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Animated, Image, PanResponderInstance } from 'react-native';
+import { StyleType } from '../Main';
 import getStyles from './Cropper.style';
 
 interface CropperProps {
@@ -43,13 +44,14 @@ interface CropperProps {
   COMPONENT_HEIGHT: number;
   W: number;
   H: number;
-  style?: { container: { backgroundColor: string }; grid: { column: { borderWidth: number; borderColor: string } } };
+  style: StyleType;
 }
 
 const Cropper: React.FC<CropperProps> = (props) => {
   const styles = getStyles(props.COMPONENT_WIDTH, props.COMPONENT_HEIGHT, props.W);
-  const gridColumn = { ...styles.griColumn, ...props.style.grid.column };
+  const gridColumn = { ...styles.gridColumn, ...props.style.grid.column };
   const borderDesign = { ...styles.borderDesign, ...props.style.grid.border };
+
   return (
     <View style={[styles.container, props.style.container]}>
       <View style={styles.secondContainer}>
diff --git a/src/Main.tsx b/src/Main.tsx
index a1d7978..d84aef6 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -3,6 +3,11 @@ import CropperPage from './Cropper/Cropper.page';
 import { DefaultFooter } from './common';
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from './constants';
 
+export type StyleType = {
+  container: { backgroundColor: string };
+  grid: { border: { borderColor: string }; column: { borderWidth: number; borderColor: string } };
+};
+
 export type AmazingCropperProps = {
   footerComponent?: JSX.Element;
   onDone: (croppedImageUri: string) => void;
@@ -20,7 +25,7 @@ export type AmazingCropperProps = {
   BORDER_WIDTH?: number;
   COMPONENT_WIDTH?: number;
   COMPONENT_HEIGHT?: number;
-  style?: { container: { backgroundColor: string }; grid: { border: { borderColor: string }; column: { borderWidth: number; borderColor: string } } };
+  style?: StyleType;
 } & typeof defaultProps;
 /// new key change
 

From dd4b91ce9ae2d4b72cdf849840388a54c25db803 Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Fri, 26 Aug 2022 11:47:17 +0500
Subject: [PATCH 05/12] restore dist reference

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 9f5eaa1..5d16196 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,8 @@
   "name": "react-native-amazing-cropper",
   "version": "0.1.9",
   "description": "Custom react native cropper with rotation",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

From abcb672426e581540606cbb26b28a4b6d5361eee Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Fri, 26 Aug 2022 13:01:46 +0500
Subject: [PATCH 06/12] header component added

---
 src/Cropper/Cropper.page.tsx | 2 ++
 src/Cropper/Cropper.style.ts | 6 ++++++
 src/Cropper/Cropper.tsx      | 2 ++
 src/Main.tsx                 | 3 +++
 4 files changed, 13 insertions(+)

diff --git a/src/Cropper/Cropper.page.tsx b/src/Cropper/Cropper.page.tsx
index 20c9b7e..52a0cc3 100644
--- a/src/Cropper/Cropper.page.tsx
+++ b/src/Cropper/Cropper.page.tsx
@@ -10,6 +10,7 @@ import { StyleType } from '../Main';
 
 type CropperPageProps = {
   footerComponent: JSX.Element;
+  headerComponent: JSX.Element;
   onDone: (croppedImageUri: string) => void;
   onError: (err: Error) => void;
   onCancel: () => void;
@@ -715,6 +716,7 @@ class CropperPage extends Component<CropperPageProps, State> {
         style={this.props.style}
         imageUri={this.props.imageUri} // 'https://3.imimg.com/data3/SN/NO/MY-10244508/vertical-building-parking-500x500.jpg'
         footerComponent={this.props.footerComponent}
+        headerComponent={this.props.headerComponent}
         getTopOuterStyle={this.getTopOuterStyle}
         getLeftOuterStyle={this.getLeftOuterStyle}
         getBottomOuterStyle={this.getBottomOuterStyle}
diff --git a/src/Cropper/Cropper.style.ts b/src/Cropper/Cropper.style.ts
index d20a86c..34e0d5c 100644
--- a/src/Cropper/Cropper.style.ts
+++ b/src/Cropper/Cropper.style.ts
@@ -16,6 +16,12 @@ export default function getStyles(COMPONENT_WIDTH: number, COMPONENT_HEIGHT: num
       width: COMPONENT_WIDTH,
       height: COMPONENT_HEIGHT,
     },
+    headerContainer: {
+      position: 'absolute',
+      top: 20,
+      left: 10,
+      right: 10,
+    },
     footerContainer: {
       position: 'absolute',
       top: COMPONENT_HEIGHT - Q,
diff --git a/src/Cropper/Cropper.tsx b/src/Cropper/Cropper.tsx
index d2a4ada..1595160 100644
--- a/src/Cropper/Cropper.tsx
+++ b/src/Cropper/Cropper.tsx
@@ -5,6 +5,7 @@ import getStyles from './Cropper.style';
 
 interface CropperProps {
   imageUri: string;
+  headerComponent: JSX.Element;
   footerComponent: JSX.Element;
   getTopOuterStyle: () => object;
   getLeftOuterStyle: () => object;
@@ -54,6 +55,7 @@ const Cropper: React.FC<CropperProps> = (props) => {
 
   return (
     <View style={[styles.container, props.style.container]}>
+      <View style={styles.headerContainer}>{React.cloneElement(props.headerComponent)}</View>
       <View style={styles.secondContainer}>
         <Image style={props.getImageStyle()} source={{ uri: props.imageUri }} />
       </View>
diff --git a/src/Main.tsx b/src/Main.tsx
index d84aef6..cd41dd2 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -9,6 +9,7 @@ export type StyleType = {
 };
 
 export type AmazingCropperProps = {
+  headerComponent?: JSX.Element;
   footerComponent?: JSX.Element;
   onDone: (croppedImageUri: string) => void;
   onError: (err: Error) => void;
@@ -31,6 +32,7 @@ export type AmazingCropperProps = {
 
 const defaultProps = {
   footerComponent: <DefaultFooter doneText='DONE' rotateText='ROTATE' cancelText='CANCEL' />,
+  headerComponent: <></>,
   onDone: (_croppedImageUri: string) => {},
   onError: (_err: Error) => {},
   onCancel: () => {},
@@ -58,6 +60,7 @@ class Main extends Component<AmazingCropperProps> {
   render() {
     return (
       <CropperPage
+        headerComponent={this.props.headerComponent}
         footerComponent={this.props.footerComponent}
         onDone={this.props.onDone}
         onError={this.props.onError}

From 800a4b326a8c81619a507b0c8c99c3ecf40051bc Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Fri, 26 Aug 2022 13:03:12 +0500
Subject: [PATCH 07/12] dist references removed

---
 package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/package.json b/package.json
index 5d16196..9f5eaa1 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,6 @@
   "name": "react-native-amazing-cropper",
   "version": "0.1.9",
   "description": "Custom react native cropper with rotation",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

From 722ddbd2d56d99db004c52a27c2b5b5dd983bc55 Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Fri, 26 Aug 2022 14:54:07 +0500
Subject: [PATCH 08/12] dis references restored

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 9f5eaa1..5d16196 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,8 @@
   "name": "react-native-amazing-cropper",
   "version": "0.1.9",
   "description": "Custom react native cropper with rotation",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

From 12dd1bb22ede9c18856a25083c8c0a06744e3532 Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Fri, 26 Aug 2022 16:26:52 +0500
Subject: [PATCH 09/12] non-selected cropper area backgrounColor exposed to
 user

---
 package.json                 |  2 --
 src/Cropper/Cropper.page.tsx | 11 +++++++----
 src/Main.tsx                 |  2 ++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5d16196..9f5eaa1 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,6 @@
   "name": "react-native-amazing-cropper",
   "version": "0.1.9",
   "description": "Custom react native cropper with rotation",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
diff --git a/src/Cropper/Cropper.page.tsx b/src/Cropper/Cropper.page.tsx
index 52a0cc3..4eedefb 100644
--- a/src/Cropper/Cropper.page.tsx
+++ b/src/Cropper/Cropper.page.tsx
@@ -23,6 +23,7 @@ type CropperPageProps = {
   RIGHT_VALUE: number;
   initialRotation: number;
   NOT_SELECTED_AREA_OPACITY: number;
+  NOT_SELECTED_AREA_BACKGROUND_COLOR?: string;
   BORDER_WIDTH: number;
   COMPONENT_WIDTH: number;
   COMPONENT_HEIGHT: number;
@@ -195,6 +196,8 @@ class CropperPage extends Component<CropperPageProps, State> {
   W = this.props.COMPONENT_WIDTH;
   H = this.props.COMPONENT_HEIGHT - Q;
 
+  outerBackgroundColor = this.props.NOT_SELECTED_AREA_BACKGROUND_COLOR || `rgba(0, 0, 0, ${this.props.NOT_SELECTED_AREA_OPACITY})`;
+
   onCancel = () => {
     this.props.onCancel();
   };
@@ -206,7 +209,7 @@ class CropperPage extends Component<CropperPageProps, State> {
       left: this.state.LEFT_LIMIT,
       height: Animated.add(this.props.BORDER_WIDTH - this.state.TOP_LIMIT, this.state.topPosition.y),
       width: this.W,
-      backgroundColor: `rgba(0, 0, 0, ${this.props.NOT_SELECTED_AREA_OPACITY})`,
+      backgroundColor: this.outerBackgroundColor,
     };
   };
 
@@ -217,7 +220,7 @@ class CropperPage extends Component<CropperPageProps, State> {
       left: this.state.LEFT_LIMIT,
       height: Animated.add(-this.props.BORDER_WIDTH, Animated.add(this.state.bottomPosition.y, Animated.multiply(-1, this.state.topPosition.y))),
       width: Animated.add(this.props.BORDER_WIDTH - this.state.LEFT_LIMIT, this.state.leftPosition.x),
-      backgroundColor: `rgba(0, 0, 0, ${this.props.NOT_SELECTED_AREA_OPACITY})`,
+      backgroundColor: this.outerBackgroundColor,
     };
   };
 
@@ -228,7 +231,7 @@ class CropperPage extends Component<CropperPageProps, State> {
       left: this.state.LEFT_LIMIT,
       height: Animated.add(this.props.COMPONENT_HEIGHT - this.state.BOTTOM_LIMIT, Animated.multiply(-1, this.state.bottomPosition.y)),
       width: this.W,
-      backgroundColor: `rgba(0, 0, 0, ${this.props.NOT_SELECTED_AREA_OPACITY})`,
+      backgroundColor: this.outerBackgroundColor,
     };
   };
 
@@ -239,7 +242,7 @@ class CropperPage extends Component<CropperPageProps, State> {
       left: this.state.rightPosition.x,
       height: Animated.add(-this.props.BORDER_WIDTH, Animated.add(this.state.bottomPosition.y, Animated.multiply(-1, this.state.topPosition.y))),
       right: this.state.RIGHT_LIMIT,
-      backgroundColor: `rgba(0, 0, 0, ${this.props.NOT_SELECTED_AREA_OPACITY})`,
+      backgroundColor: this.outerBackgroundColor,
     };
   };
 
diff --git a/src/Main.tsx b/src/Main.tsx
index cd41dd2..55247d2 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -23,6 +23,7 @@ export type AmazingCropperProps = {
   RIGHT_VALUE?: number;
   initialRotation?: number;
   NOT_SELECTED_AREA_OPACITY?: number;
+  NOT_SELECTED_AREA_BACKGROUND_COLOR?: string;
   BORDER_WIDTH?: number;
   COMPONENT_WIDTH?: number;
   COMPONENT_HEIGHT?: number;
@@ -74,6 +75,7 @@ class Main extends Component<AmazingCropperProps> {
         RIGHT_VALUE={this.props.RIGHT_VALUE}
         initialRotation={this.props.initialRotation}
         NOT_SELECTED_AREA_OPACITY={this.props.NOT_SELECTED_AREA_OPACITY}
+        NOT_SELECTED_AREA_BACKGROUND_COLOR={this.props.NOT_SELECTED_AREA_BACKGROUND_COLOR}
         BORDER_WIDTH={this.props.BORDER_WIDTH}
         COMPONENT_WIDTH={this.props.COMPONENT_WIDTH}
         COMPONENT_HEIGHT={this.props.COMPONENT_HEIGHT}

From e52bc4e61347e2bfa205ce73ff07a84cfc398bad Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Fri, 26 Aug 2022 16:41:03 +0500
Subject: [PATCH 10/12] dist references restored

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 9f5eaa1..5d16196 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,8 @@
   "name": "react-native-amazing-cropper",
   "version": "0.1.9",
   "description": "Custom react native cropper with rotation",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

From 725016ec982307699925faab8422c5e11058fd78 Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Mon, 29 Aug 2022 12:20:06 +0500
Subject: [PATCH 11/12] imageResizeMode exposed to user

---
 src/Cropper/Cropper.page.tsx | 5 +++--
 src/Main.tsx                 | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Cropper/Cropper.page.tsx b/src/Cropper/Cropper.page.tsx
index 4eedefb..50967d2 100644
--- a/src/Cropper/Cropper.page.tsx
+++ b/src/Cropper/Cropper.page.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, PanResponder, PanResponderInstance, PanResponderGestureState, ImageCropData } from 'react-native';
+import { Animated, PanResponder, PanResponderInstance, PanResponderGestureState, ImageCropData, ImageResizeMode } from 'react-native';
 // @ts-ignore; 'react-native-image-rotate' does not have typescript support
 import RNImageRotate from '@wili/react-native-image-rotate';
 import ImageEditor from '@react-native-community/image-editor';
@@ -17,6 +17,7 @@ type CropperPageProps = {
   imageUri: string;
   imageWidth: number;
   imageHeight: number;
+  imageResizeMode: ImageResizeMode;
   TOP_VALUE: number;
   LEFT_VALUE: number;
   BOTTOM_VALUE: number;
@@ -341,7 +342,7 @@ class CropperPage extends Component<CropperPageProps, State> {
       left: this.state.LEFT_LIMIT + DIFF,
       bottom: this.state.BOTTOM_LIMIT - DIFF,
       right: this.state.RIGHT_LIMIT + DIFF,
-      resizeMode: 'stretch',
+      resizeMode: this.props.imageResizeMode,
       transform: [{ rotate: `${this.state.rotation.toString()}deg` }],
     };
   };
diff --git a/src/Main.tsx b/src/Main.tsx
index 55247d2..4a77bc6 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import CropperPage from './Cropper/Cropper.page';
 import { DefaultFooter } from './common';
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from './constants';
+import { ImageResizeMode } from 'react-native';
 
 export type StyleType = {
   container: { backgroundColor: string };
@@ -17,6 +18,7 @@ export type AmazingCropperProps = {
   imageUri: string;
   imageWidth: number;
   imageHeight: number;
+  imageResizeMode: ImageResizeMode;
   TOP_VALUE?: number;
   LEFT_VALUE?: number;
   BOTTOM_VALUE?: number;
@@ -40,6 +42,7 @@ const defaultProps = {
   imageUri: '',
   imageWidth: 1280,
   imageHeight: 747,
+  imageResizeMode: 'stretch',
   TOP_VALUE: 0,
   LEFT_VALUE: 0,
   BOTTOM_VALUE: 0,
@@ -69,6 +72,7 @@ class Main extends Component<AmazingCropperProps> {
         imageUri={this.props.imageUri}
         imageWidth={this.props.imageWidth}
         imageHeight={this.props.imageHeight}
+        imageResizeMode={this.props.imageResizeMode}
         TOP_VALUE={this.props.TOP_VALUE}
         LEFT_VALUE={this.props.LEFT_VALUE}
         BOTTOM_VALUE={this.props.BOTTOM_VALUE}

From a5cd0f12c8e5a29bd22ca6dbcbafb522718ff190 Mon Sep 17 00:00:00 2001
From: shahjahanpak <shahjahan.chaudhry@gmail.com>
Date: Mon, 29 Aug 2022 20:31:31 +0500
Subject: [PATCH 12/12] box pan can be disabled by user

---
 src/Cropper/Cropper.page.tsx | 3 ++-
 src/Main.tsx                 | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Cropper/Cropper.page.tsx b/src/Cropper/Cropper.page.tsx
index 50967d2..891c5e7 100644
--- a/src/Cropper/Cropper.page.tsx
+++ b/src/Cropper/Cropper.page.tsx
@@ -29,6 +29,7 @@ type CropperPageProps = {
   COMPONENT_WIDTH: number;
   COMPONENT_HEIGHT: number;
   style: StyleType;
+  disableBoxPan?: boolean;
 };
 
 interface ExtendedAnimatedValue extends Animated.Value {
@@ -143,7 +144,7 @@ class CropperPage extends Component<CropperPageProps, State> {
     const topRightPanResponder = this.initCornerPanResponder('topPosition', 'rightPosition');
 
     const rectanglePosition = new Animated.ValueXY({ x: LEFT_VALUE, y: TOP_VALUE }) as ExtendedAnimatedValueXY;
-    const rectanglePanResponder = this.initRectanglePanResponder();
+    const rectanglePanResponder = props.disableBoxPan ? {} : this.initRectanglePanResponder();
 
     this.state = {
       topOuterPosition,
diff --git a/src/Main.tsx b/src/Main.tsx
index 4a77bc6..5accefb 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -30,6 +30,7 @@ export type AmazingCropperProps = {
   COMPONENT_WIDTH?: number;
   COMPONENT_HEIGHT?: number;
   style?: StyleType;
+  disableBoxPan?: boolean;
 } & typeof defaultProps;
 /// new key change
 
@@ -56,6 +57,7 @@ const defaultProps = {
     container: { backgroundColor: '#000' },
     grid: { border: { borderColor: '#FFF' }, column: { borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)' } },
   },
+  disableBoxPan: false,
 };
 
 class Main extends Component<AmazingCropperProps> {
@@ -84,6 +86,7 @@ class Main extends Component<AmazingCropperProps> {
         COMPONENT_WIDTH={this.props.COMPONENT_WIDTH}
         COMPONENT_HEIGHT={this.props.COMPONENT_HEIGHT}
         style={this.props.style}
+        disableBoxPan={this.props.disableBoxPan}
       />
     );
   }