Skip to content

Image cropper for react native using Animated API with custom Footer

License

Notifications You must be signed in to change notification settings

nateblog/react-native-advance-image-cropper

 
 

Repository files navigation

react-native-advance-image-cropper

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

    
    


    
    

Rotation is removed for version > 1.0.4, please connect with me if someone requires This component depend on react-native-image-rotate library. It needs to be installed and linked to your project before.

STEPS TO INSTALL:

  1. npm install --save react-native-image-rotate
  2. react-native link react-native-image-rotate
  3. npm install --save react-native-advance-image-cropper

Properties


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'

Usage example 1 (using the default footer)


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}
      />
    );
  }
}

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


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}
      />
    );
  }
}

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 { 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}
      />
    );
  }
}

About

Image cropper for react native using Animated API with custom Footer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%