Image cropper for react native made with Animated API (with rotation possibility and Custom Footer) - for iOS & android
STEPS TO INSTALL: npm install --save react-native-advance-image-cropper
| Prop | Type | Description |
|---|---|---|
| onDone | function | A function which accepts 1 argument croppedImageData. Called when user press the 'DONE' button |
| onCancel | function | A function without arguments. Called when user press the 'CANCEL' button |
| imageUri | string | The uri of the image you want to crop or rotate |
| imageWidth | number | The width (in pixels) of the image you passed in imageUri |
| imageHeight | number | The height (in pixels) of the image you passed in imageUri |
| initialRotation | number | Number which set the default rotation of the image when cropper is initialized. Default is 0 |
| footerComponent | component | Custom component for footer. Default is <DefaultFooter doneText='DONE' rotateText='ROTATE' cancelText='CANCEL' /> |
| NOT_SELECTED_AREA_OPACITY | number | The opacity of the area which is not selected by the cropper. Should be a value between 0 and 1. Default is 0.5 |
| BORDER_WIDTH | number | The border width (see image). Default is 50 |
| FOOTER_WIDTH | number | The height (in pixels) of the Footer (required for custom footers for better View). Default is '100' |
import React, { Component } from 'react'; import { Platform, ImageStore } from 'react-native'; import { Actions } from 'react-native-router-flux'; import ImageCropper from 'react-native-advance-image-cropper';; class ImageCropperPage extends Component { onDone = (croppedImageUri) => { console.log('croppedImageUri = ', croppedImageUri); if (Platform.OS === 'ios') { ImageStore.getBase64ForTag( croppedImageUri, (base64Image) => { // send image to server or save it locally ImageStore.removeImageForTag(croppedImageUri); }, (err) => {} ); } else { // send image to server } // navigate to the next page of your application Actions.home(); } onCancel = () => { // navigate back Actions.pop(); } render() { return ( <ImageCropper onDone={this.onDone} onCancel={this.onCancel} imageUri='https://www.lifeofpix.com/wp-content/uploads/2018/09/manhattan_-11-1600x2396.jpg' imageWidth={1600} imageHeight={2396} NOT_SELECTED_AREA_OPACITY={0.3} BORDER_WIDTH={20} /> ); } }import React, { Component } from 'react'; import { Platform, ImageStore } from 'react-native'; import { Actions } from 'react-native-router-flux'; import ImageCropper, { DefaultFooter } from 'react-native-advance-image-cropper'; class ImageCropperPage extends Component { onDone = (croppedImageUri) => { console.log('croppedImageUri = ', croppedImageUri); if (Platform.OS === 'ios') { ImageStore.getBase64ForTag( croppedImageUri, (base64Image) => { // send image to server or save it locally ImageStore.removeImageForTag(croppedImageUri); }, (err) => {} ); } else { // send image to server } // navigate to the next page of your application Actions.home(); } onCancel = () => { // navigate back Actions.pop(); } render() { return ( <ImageCropper // Pass custom text to the default footer footerComponent={<DefaultFooter doneText='OK' rotateText='ROT' cancelText='BACK' />} onDone={this.onDone} onCancel={this.onCancel} imageUri='https://www.lifeofpix.com/wp-content/uploads/2018/09/manhattan_-11-1600x2396.jpg' imageWidth={1600} imageHeight={2396} /> ); } }Write your custom footer component.
Don't forget to call the props.onDone, props.onRotate and props.onCancel methods inside it (the Cropper will pass them automatically to your footer component). Example of custom footer component:
import React from 'react'; import { View, TouchableOpacity, Text, Platform, StyleSheet } from 'react-native'; import PropTypes from 'prop-types'; import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'; const CustomCropperFooter = (props) => ( <View style={styles.buttonsContainer}> <TouchableOpacity onPress={props.onCancel} style={styles.touchable}> <Text style={styles.text}>CANCEL</Text> </TouchableOpacity> <TouchableOpacity onPress={props.onRotate} style={styles.touchable}> <MaterialCommunityIcon name='format-rotate-90' style={styles.rotateIcon} /> </TouchableOpacity> <TouchableOpacity onPress={props.onDone} style={styles.touchable}> <Text style={styles.text}>DONE</Text> </TouchableOpacity> </View> ) export default CustomCropperFooter; CustomCropperFooter.propTypes = { onDone: PropTypes.func, onRotate: PropTypes.func, onCancel: PropTypes.func } const styles = StyleSheet.create({ buttonsContainer: { flexDirection: 'row', alignItems: 'center', // 'flex-start' justifyContent: 'space-between', height: '100%' }, text: { color: 'white', fontSize: 16 }, touchable: { padding: 10, }, rotateIcon: { color: 'white', fontSize: 26, ...Platform.select({ android: { textShadowOffset: { width: 1, height: 1 }, textShadowColor: '#000000', textShadowRadius: 3, shadowOpacity: 0.9, elevation: 1 }, ios: { shadowOffset: { width: 1, height: 1 }, shadowColor: '#000000', shadowRadius: 3, shadowOpacity: 0.9 } }), }, })Now just pass your footer component to the Cropper like here:
import React, { Component } from 'react'; import { Platform, ImageStore } from 'react-native'; import { Actions } from 'react-native-router-flux'; import ImageCropper from 'react-native-advance-image-cropper'; import CustomCropperFooter from './src/components/CustomCropperFooter.component'; class ImageCropperPage extends Component { onDone = (croppedImageUri) => { console.log('croppedImageUri = ', croppedImageUri); if (Platform.OS === 'ios') { ImageStore.getBase64ForTag( croppedImageUri, (base64Image) => { // send image to server or save it locally ImageStore.removeImageForTag(croppedImageUri); }, (err) => {} ); } else { // send image to server } // navigate to the next page of your application Actions.home(); } onCancel = () => { // navigate back Actions.pop(); } render() { return ( <ImageCropper // Use your custom footer component // Do NOT pass onDone, onRotate and onCancel to the footer component, the Cropper will do it for you footerComponent={<CustomCropperFooter />} onDone={this.onDone} onCancel={this.onCancel} imageUri='https://www.lifeofpix.com/wp-content/uploads/2018/09/manhattan_-11-1600x2396.jpg' imageWidth={1600} imageHeight={2396} FOOTER_HEIGHT={200} /> ); } }