expo-amazing-cropper v0.1.1

expo-amazing-cropper

Image cropper for Expo made with Animated API (with rotation possibility).

This component require on expo-image-manipulator libraries. You can use with Expo ImagePicker to fetch Image Properties and Expo Filesystem to localise the image.

STEPS TO INSTALL: 1. expo install expo-image-manipulator 2. yarn add expo-amazing-cropper

Properties

Usage example 1 (using the default footer)

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

class ExpoAmazingCropperPage extends Component {
  //response from Expo Image Picker
  const imagePickerResponse = {
    "cancelled":false,
    "height":1611,
    "width":2148,
    "uri":"file:///data/user/0/host.exp.exponent/cache/my-local-image.jpg"
  }

  const onDone = (croppedImageUri) => {
    console.log('croppedImageUri = ', croppedImageUri);
    // send image to server for example
  }

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

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

  render() {
    return (
      <ExpoAmazingCropper
        onDone={(uri:string)=> onDone(croppedImageUri)}
        onError={(err:any)=> onError(err)}
        onCancel={()=> onCancel()}
        imageUri= imagePickerResponse.uri
        imageWidth={imagePickerResponse.width}
        imageHeight={imagePickerResponse.height}
        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 ExpoAmazingCropper, { DefaultFooter } from 'react-native-amazing-cropper';

class ExpoAmazingCropperPage extends Component {
  //response from Expo Image Picker
  const imagePickerResponse = {
    "cancelled":false,
    "height":1611,
    "width":2148,
    "uri":"file:///data/user/0/host.exp.exponent/cache/my-local-image.jpg"
  }

  const onDone = (croppedImageUri) => {
    console.log('croppedImageUri = ', croppedImageUri);
    // send image to server for example
  }

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

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

  render() {
    return (
      <ExpoAmazingCropper
        // Pass custom text to the default footer
        footerComponent={<DefaultFooter doneText='OK' rotateText='ROT' cancelText='BACK' />}
        onDone={(uri:string)=> onDone(croppedImageUri)}
        onError={(err:any)=> onError(err)}
        imageUri= imagePickerResponse.uri
        imageWidth={imagePickerResponse.width}
        imageHeight={imagePickerResponse.height}
      />
    );
  }
}

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

class ExpoAmazingCropperPage extends Component {
  const onDone = (croppedImageUri) => {
    console.log('croppedImageUri = ', croppedImageUri);
    // send image to server for example
  }

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

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

  render() {
    return (
      <ExpoAmazingCropper
        // 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={(uri:string)=> onDone(croppedImageUri)}
        onCancel={()=> onCancel()}
        imageUri= imagePickerResponse.uri
        imageWidth={imagePickerResponse.width}
        imageHeight={imagePickerResponse.height}
      />
    );
  }
}

Special thanks to: https://github.com/ggunti