https://github.com/bkdev98/react-native-image-zoom-and-crop
https://github.com/bkdev98/react-native-image-zoom-and-crop
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bkdev98/react-native-image-zoom-and-crop
- Owner: bkdev98
- Created: 2021-11-21T10:32:42.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-22T03:25:40.000Z (over 4 years ago)
- Last Synced: 2025-02-02T03:51:12.153Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-image-zoom-and-crop
- Size: 109 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-image-zoom-and-crop
## Installation
```
yarn add react-native-image-zoom-and-crop react-native-reanimated react-native-gesture-handler @react-native-community/image-editor
```
## Usage
```javascript
import React, { useState } from 'react';
import {
StyleSheet,
View,
Button,
Dimensions,
} from 'react-native';
import ImageZoomAndCrop from 'react-native-image-zoom-and-crop';
const { width, height } = Dimensions.get('window');
const IMAGE_URI = 'https://avatars.githubusercontent.com/u/16166195';
const styles = StyleSheet.create({
wrapper: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'black',
},
buttonWrapper: {
position: 'absolute',
bottom: 0,
left: 0,
},
});
const App = () => {
const [cropperParams, setCropperParams] = useState({});
const handleCropPress = async () => {
const cropSize = {
width: width / 2,
height: height / 2,
};
try {
const result = await ImageZoomAndCrop.crop({
...cropperParams,
imageUri: IMAGE_URI,
cropSize,
cropAreaSize: { width, height },
});
console.log(result);
} catch (error) {
console.log(error);
}
};
return (
);
};
```