react-native-avatar-crop

Supports rect and circle cropping. Use cropArea={{width, height}} for custom aspect ratio.

Download apk to see it in action, click to download

Image Picker	Network Image

Installation

Note: Please migrate to @react-native-masked-view/masked-view if using @react-native-community/masked-view

npm

npm install react-native-avatar-crop vemarav/react-native-image-editor react-native-image-size @react-native-masked-view/masked-view  @react-native-gesture-handler --save

yarn

yarn add react-native-avatar-crop vemarav/react-native-image-editor react-native-image-size @react-native-masked-view/masked-view  @react-native-gesture-handler

Usage

1const component = (props) => {
2  const { uri, setUri } = useState("");
3  let crop;
4  const { width: SCREEN_WIDTH } = Dimensions.get("window");
5
6  const cropImage = async () => {
7    // crop accepts quality, default is 1
8    // uri will have cropped image cache path
9    const { uri, width, height } = await crop(0.9);
10    setUri(uri);
11  };
12
13  return (
14    <View>
15      {uri ? (
16        <Image
17          source={{ uri }}
18          style={{
19            width: SCREEN_WIDTH,
20            height: SCREEN_WIDTH,
21            resizeMode: "contain",
22          }}
23        />
24      ) : null}
25      <Crop
26        source={props.uri}
27        cropShape={"circle"} // rect || circle
28        width={SCREEN_WIDTH} // default value
29        height={SCREEN_WIDTH} // defalt value
30        cropArea={{
31          width: SCREEN_WIDTH / 1.3, // required
32          height: SCREEN_WIDTH / 1.3, // required
33        }}
34        borderWidth={0} // default 2
35        backgroundColor={"#FFFFFF"} // default #FFFFFF, use same format
36        opacity={0.7} // between 0 and 1, default is 1
37        maxZoom={3} // default 3
38        resizeMode={"contain"} // default "cover"
39        onCrop={(cropCallback) => (crop = cropCallback)} // returns a function
40      />
41    </View>
42  );
43};

see full example here

CONTRIBUTING

1. Whether you are a novice or experienced software developer, all contributions and suggestions are welcome!

   Clone repo

   git clone https://github.com/vemarav/react-native-avatar-crop.git

2. Add features or bug fixes

3. Make a Pull Request

   OR

   Report a bug here

   Feel free to contribute, hosted on ❤️ with Github.

TODO

• Add rotation support

LICENSE

Package published under MIT License

Author

• Aravind Vemula

LIKED IT

Please use following button to star the, so it can reach others too

SOCIAL