Skip to content

Commit b7a61cd

Browse files
vemaravvemarav
authored
Merge pull request #1 from vemarav/fix-android
Fix android
2 parents 54d2822 + 1c091b6 commit b7a61cd

File tree

15 files changed

+672
-230
lines changed

15 files changed

+672
-230
lines changed

‎.github/bug_report.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
---
5+
6+
**Describe the bug**
7+
8+
A clear and concise description of what the bug is.
9+
10+
**To Reproduce**
11+
12+
Steps to reproduce the behavior:
13+
14+
**Expected behavior**
15+
16+
A clear and concise description of what you expected to happen.
17+
18+
**Screenshots**
19+
20+
If applicable, add screenshots to help explain your problem.
21+
22+
**Additional context**
23+
24+
Add any other context about the problem here.

‎.github/feature_request.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
---
5+
6+
**Is your feature request related to a problem? Please describe.**
7+
8+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
9+
10+
**Describe the solution you'd like**
11+
12+
A clear and concise description of what you want to happen.
13+
14+
**Describe alternatives you've considered**
15+
16+
A clear and concise description of any alternative solutions or features you've considered.
17+
18+
**Additional context**
19+
20+
Add any other context or screenshots about the feature request here.

‎LICENSE

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
MIT License
2+
3+
Copyright (c) 2018 - present Aravind Vemula
4+
5+
All rights reserved.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.

‎README.md

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,71 @@
1-
# react-native-avatar-crop
1+
# react-native-avatar-crop
2+
3+
## Demo
4+
5+
<br>
6+
7+
![video](/screenshots/demo.gif)
8+
9+
## Usage
10+
11+
check [dependencies](https://www.npmjs.com/package/react-native-avatar-crop?activeTab=dependencies)
12+
13+
```
14+
let crop;
15+
const {width: SCREEN_WIDTH} = Dimensions.get('window');
16+
17+
<Crop
18+
source={uri}
19+
cropShape={"circle"} // rect || circle
20+
width={SCREEN_WIDTH}
21+
height={SCREEN_WIDTH}
22+
cropArea={{
23+
width: SCREEN_WIDTH / 1.3,
24+
height: SCREEN_WIDTH / 1.3,
25+
}}
26+
borderWidth={0}
27+
backgroundColor={'#FFFFFF'}
28+
opacity={0.7} // 0 till 1, default is 0.7
29+
maxZoom= {3} // default 3
30+
resizeMode={"contain"} // default "cover"
31+
onCrop={cropCallback => (crop = cropCallback)} // returns a function
32+
/>
33+
```
34+
35+
see full example [here](https://github.com/vemarav/react-native-avatar-crop/blob/main/example/CropImage.tsx)
36+
37+
## CONTRIBUTING
38+
39+
1. Whether you are a novice or experienced software developer, all contributions and suggestions are welcome!
40+
41+
Clone repo
42+
43+
git clone https://github.com/vemarav/react-native-avatar-crop.git
44+
2. Add features or bug fixes
45+
46+
3. Make a Pull Request
47+
48+
OR
49+
50+
Report a bug [here](https://github.com/vemarav/react-native-avatar-crop/issues/new/choose)
51+
52+
Feel free to contribute, hosted on ❤️ with Github.
53+
54+
## LICENSE
55+
56+
Package published under [MIT License](https://github.com/vemarav/subdomains/blob/master/LICENSE)
57+
58+
## Author
59+
60+
- [Aravind Vemula](https://github.com/vemarav)
61+
62+
## LIKED IT
63+
64+
Please use following button to star the, so it can reach others too
65+
66+
[![](https://img.shields.io/github/stars/vemarav/react-native-avatar-crop.svg?label=Stars&style=social)](https://github.com/vemarav/react-native-avatar-crop)
67+
68+
69+
## SOCIAL
70+
71+
[![Twitter Follow](https://img.shields.io/twitter/follow/vemarav.svg?style=social&label=Follow)](https://twitter.com/vemarav)

‎example/.prettierrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
2+
printWidth: 120,
23
bracketSpacing: false,
34
jsxBracketSameLine: true,
45
singleQuote: true,

‎example/CropImage.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
import React from 'react';
2-
import {
3-
View,
4-
StyleSheet,
5-
TouchableOpacity,
6-
Text,
7-
Dimensions,
8-
} from 'react-native';
2+
import {View, StyleSheet, TouchableOpacity, Text, Dimensions} from 'react-native';
93
import Routes from './Routes';
10-
import Crop from './src';
4+
import Crop from 'react-native-avatar-crop';
115

126
const {width: SCREEN_WIDTH} = Dimensions.get('window');
137

148
type CropImageProps = {
159
route: {params: {uri: string; width: number; height: number}};
1610
navigation: {
17-
navigate: (name: string, params?: {[key: string]: any}) => {};
11+
navigate: (name: string, params?: {[key: string]: string | number}) => {};
1812
};
1913
};
2014

2115
const CropImage = ({route, navigation}: CropImageProps): JSX.Element => {
22-
const {uri, width, height} = route.params;
16+
const {uri} = route.params;
17+
2318
const styles = StyleSheet.create({
2419
center: {
2520
flex: 1,
@@ -44,13 +39,14 @@ const CropImage = ({route, navigation}: CropImageProps): JSX.Element => {
4439
padding: 20,
4540
},
4641
});
42+
4743
let crop = async (quality?: number) => ({uri: '', width: 0, height: 0});
4844

45+
4946
return (
5047
<View style={styles.center}>
5148
<Crop
5249
source={{uri}}
53-
imageSize={{width, height}}
5450
width={SCREEN_WIDTH}
5551
height={SCREEN_WIDTH}
5652
cropArea={{width: SCREEN_WIDTH / 1.3, height: SCREEN_WIDTH / 1.3}}

‎example/CroppedImage.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import React from 'react';
2-
import {
3-
View,
4-
Dimensions,
5-
Image,
6-
StyleSheet,
7-
TouchableOpacity,
8-
Text,
9-
} from 'react-native';
2+
import {View, Dimensions, Image, StyleSheet, TouchableOpacity, Text} from 'react-native';
103

114
export const getRatio = ({width, height}: {width: number; height: number}) =>
125
Math.max(width, height) / Math.min(width, height);

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@react-navigation/stack": "^5.14.5",
1818
"react": "17.0.1",
1919
"react-native": "0.64.2",
20-
"react-native-avatar-crop": "^0.0.6",
20+
"react-native-avatar-crop": "0.0.7",
2121
"react-native-gesture-handler": "^1.10.3",
2222
"react-native-image-picker": "^4.0.6",
2323
"react-native-image-size": "^1.1.3",

‎example/yarn.lock

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1173,12 +1173,12 @@
11731173
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
11741174
integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
11751175

1176-
"@react-native-community/image-editor@^2.3.0":
1176+
"@react-native-community/image-editor@*", "@react-native-community/image-editor@^2.3.0":
11771177
version "2.3.0"
11781178
resolved "https://registry.yarnpkg.com/@react-native-community/image-editor/-/image-editor-2.3.0.tgz#8ac6c3691fd2c762d2abeb84c01a3b201bac3b1e"
11791179
integrity sha512-+UJY8WkTkfSkjoU5blQnEI7tTg11jJLoM+YojjiQpEopUaRlYQU4SZ9Zd6F6wWfvc9bjvIeMY6FlKuESK/q4fQ==
11801180

1181-
"@react-native-community/masked-view@^0.1.11":
1181+
"@react-native-community/masked-view@*", "@react-native-community/masked-view@^0.1.11":
11821182
version "0.1.11"
11831183
resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
11841184
integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
@@ -5601,10 +5601,15 @@ react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1:
56015601
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
56025602
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
56035603

5604-
react-native-avatar-crop@^0.0.6:
5605-
version "0.0.6"
5606-
resolved "https://registry.yarnpkg.com/react-native-avatar-crop/-/react-native-avatar-crop-0.0.6.tgz#d8ab66db5015af950a37c4e46f62756a3e5283b0"
5607-
integrity sha512-ploV7UtMp0BfEs3meKloBeuGRd+VeX0PTOMtaH/s8TDIwhOeGD0zT/Go6VvkrIIUDKrwR8W26wbCk9/O5+rb3Q==
5604+
react-native-avatar-crop@0.0.7:
5605+
version "0.0.7"
5606+
resolved "https://registry.yarnpkg.com/react-native-avatar-crop/-/react-native-avatar-crop-0.0.7.tgz#58d7ba58755ca5a8715afeb3f97ced78c252753e"
5607+
integrity sha512-nmssr8mOxJo7BDXD8E/8ZM0BTfsTmZ15mypHDiaeeAUtNUxpuWvmxYrbqU3fOtYwnf8Om6S5FbURRe5wlMHm6g==
5608+
dependencies:
5609+
"@react-native-community/image-editor" "*"
5610+
"@react-native-community/masked-view" "*"
5611+
react-native-gesture-handler "*"
5612+
react-native-image-size "*"
56085613

56095614
react-native-codegen@^0.0.6:
56105615
version "0.0.6"
@@ -5615,7 +5620,7 @@ react-native-codegen@^0.0.6:
56155620
jscodeshift "^0.11.0"
56165621
nullthrows "^1.1.1"
56175622

5618-
react-native-gesture-handler@^1.10.3:
5623+
react-native-gesture-handler@*, react-native-gesture-handler@^1.10.3:
56195624
version "1.10.3"
56205625
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0"
56215626
integrity sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==
@@ -5631,7 +5636,7 @@ react-native-image-picker@^4.0.6:
56315636
resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.6.tgz#0dfa5bb83bcf6ff58635ebb9201a185c2271e8cc"
56325637
integrity sha512-Pp3UWKUADuMG1mz12m6dSO/R2KnvXVEd77bldrfTMFpz4PFc4iVKo+bHeS79It0mUBezfzDMgfesg/OPLSugvQ==
56335638

5634-
react-native-image-size@^1.1.3:
5639+
react-native-image-size@*, react-native-image-size@^1.1.3:
56355640
version "1.1.3"
56365641
resolved "https://registry.yarnpkg.com/react-native-image-size/-/react-native-image-size-1.1.3.tgz#7d69c2cd4e1d1632947867e47643ed8cabb9de27"
56375642
integrity sha512-jJvN6CjXVAm69LAVZNV7m7r50Qk9vuPZwLyrbs/k31/3Xs8bZyVCdvfP44FuBisITn/yFsiOo6i8NPrFBPH20w==

‎package/README.md

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,71 @@
11
# react-native-avatar-crop
22

3-
TODO: Add readme
3+
## Demo
4+
5+
<br>
6+
7+
![video](/screenshots/demo.gif)
8+
9+
## Usage
10+
11+
check [dependencies](https://www.npmjs.com/package/react-native-avatar-crop?activeTab=dependencies)
12+
13+
```
14+
let crop;
15+
const {width: SCREEN_WIDTH} = Dimensions.get('window');
16+
17+
<Crop
18+
source={uri}
19+
cropShape={"circle"} // rect || circle
20+
width={SCREEN_WIDTH}
21+
height={SCREEN_WIDTH}
22+
cropArea={{
23+
width: SCREEN_WIDTH / 1.3,
24+
height: SCREEN_WIDTH / 1.3,
25+
}}
26+
borderWidth={0}
27+
backgroundColor={'#FFFFFF'}
28+
opacity={0.7} // 0 till 1, default is 0.7
29+
maxZoom= {3} // default 3
30+
resizeMode={"contain"} // default "cover"
31+
onCrop={cropCallback => (crop = cropCallback)} // returns a function
32+
/>
33+
```
34+
35+
see full example [here](https://github.com/vemarav/react-native-avatar-crop/blob/main/example/CropImage.tsx)
36+
37+
## CONTRIBUTING
38+
39+
1. Whether you are a novice or experienced software developer, all contributions and suggestions are welcome!
40+
41+
Clone repo
42+
43+
git clone https://github.com/vemarav/react-native-avatar-crop.git
44+
45+
2. Add features or bug fixes
46+
47+
3. Make a Pull Request
48+
49+
OR
50+
51+
Report a bug [here](https://github.com/vemarav/react-native-avatar-crop/issues/new/choose)
52+
53+
Feel free to contribute, hosted on ❤️ with Github.
54+
55+
## LICENSE
56+
57+
Package published under [MIT License](https://github.com/vemarav/subdomains/blob/master/LICENSE)
58+
59+
## Author
60+
61+
- [Aravind Vemula](https://github.com/vemarav)
62+
63+
## LIKED IT
64+
65+
Please use following button to star the, so it can reach others too
66+
67+
[![](https://img.shields.io/github/stars/vemarav/react-native-avatar-crop.svg?label=Stars&style=social)](https://github.com/vemarav/react-native-avatar-crop)
68+
69+
## SOCIAL
70+
71+
[![Twitter Follow](https://img.shields.io/twitter/follow/vemarav.svg?style=social&label=Follow)](https://twitter.com/vemarav)

0 commit comments

Comments
 (0)