react-native-amazing-cropper

Image cropper for react native made with Animated API (with rotation possibility) - for iOS & android

It is written in typescript!

This component depend on @bam.tech/react-native-image-resizer, @wili/react-native-image-rotate and @react-native-community/image-editor libraries. They need to be installed and linked to your project before.

STEPS TO INSTALL: 1.* npm install --save @bam.tech/react-native-image-resizer @wili/react-native-image-rotate @react-native-community/image-editor 2. react-native link @bam.tech/react-native-image-resizer @wili/react-native-image-rotate @react-native-community/image-editor 3.* npm install --save react-native-amazing-cropper

Step 2 is not needed for react-native >= 0.60 because of autolinking. Instead run pod install inside ios directory.

Properties

Usage example 1 (using the default footer)

import React, { Component } from 'react';
import AmazingCropper from 'react-native-amazing-cropper';;

class AmazingCropperPage extends Component {
  onDone = (croppedImageUri, garbageUris) => {
    console.log('croppedImageUri = ', croppedImageUri);
    // clear the garbage uris from cache
    // send image to server for example
  }

  onError = (err) => {
    console.log(err);
  }

  onCancel = () => {
    console.log('Cancel button was pressed');
    // navigate back
  }

  render() {
    return (
      <AmazingCropper
        onDone={this.onDone}
        onError={this.onError}
        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}
      />
    );
  }
}

Usage example 2 (using the default footer with custom text)

import React, { Component } from 'react';
import AmazingCropper, { DefaultFooter } from 'react-native-amazing-cropper';

class AmazingCropperPage extends Component {
  onDone = (croppedImageUri, garbageUris) => {
    console.log('croppedImageUri = ', croppedImageUri);
    // clear the garbage uris from cache
    // send image to server for example
  }

  onError = (err) => {
    console.log(err);
  }

  onCancel = () => {
    console.log('Cancel button was pressed');
    // navigate back
  }

  render() {
    return (
      <AmazingCropper
        // Pass custom text to the default footer
        footerComponent={<DefaultFooter doneText='OK' rotateText='ROT' cancelText='BACK' />}
        onDone={this.onDone}
        onError={this.onError}
        onCancel={this.onCancel}
        imageUri='https://www.lifeofpix.com/wp-content/uploads/2018/09/manhattan_-11-1600x2396.jpg'
        imageWidth={1600}
        imageHeight={2396}
      />
    );
  }
}

Usage example 3 (using own fully customized footer)

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 AmazingCropper from 'react-native-amazing-cropper';
import CustomCropperFooter from './src/components/CustomCropperFooter.component';

class AmazingCropperPage extends Component {
  onDone = (croppedImageUri, garbageUris) => {
    console.log('croppedImageUri = ', croppedImageUri);
    // clear the garbage uris from cache
    // send image to server for example
  }

  onError = (err) => {
    console.log(err);
  }

  onCancel = () => {
    console.log('Cancel button was pressed');
    // navigate back
  }

  render() {
    return (
      <AmazingCropper
        // 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}
        onError={this.onError}
        onCancel={this.onCancel}
        imageUri='https://www.lifeofpix.com/wp-content/uploads/2018/09/manhattan_-11-1600x2396.jpg'
        imageWidth={1600}
        imageHeight={2396}
      />
    );
  }
}

Do you need a mobile app for android & iOS? Hire me