react-native-avatar-crop
v1.3.5
Published
Crop component to crop profile images
Downloads
5,090
Maintainers
Readme
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
const component = (props) => {
const { uri, setUri } = useState("");
let crop;
const { width: SCREEN_WIDTH } = Dimensions.get("window");
const cropImage = async () => {
// crop accepts quality, default is 1
// uri will have cropped image cache path
const { uri, width, height } = await crop(0.9);
setUri(uri);
};
return (
<View>
{uri ? (
<Image
source={{ uri }}
style={{
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
resizeMode: "contain",
}}
/>
) : null}
<Crop
source={props.uri}
cropShape={"circle"} // rect || circle
width={SCREEN_WIDTH} // default value
height={SCREEN_WIDTH} // defalt value
cropArea={{
width: SCREEN_WIDTH / 1.3, // required
height: SCREEN_WIDTH / 1.3, // required
}}
borderWidth={0} // default 2
backgroundColor={"#FFFFFF"} // default #FFFFFF, use same format
opacity={0.7} // between 0 and 1, default is 1
maxZoom={3} // default 3
resizeMode={"contain"} // default "cover"
onCrop={(cropCallback) => (crop = cropCallback)} // returns a function
/>
</View>
);
};
see full example here
CONTRIBUTING
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
Add features or bug fixes
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
LIKED IT
Please use following button to star the, so it can reach others too