expo-crop-image

Expo crop image

Allows user to crop image with given aspect ratio for react native using expo on Android and IOS.

                                      

🚀 How to install

npm install expo-crop-image

ImageEditor

isRequired if there is a * in the name field

name	Proptypes	Description
imageUri *	string	Image address that will be used for cropping
fixedAspectRatio *	number	Expect => aspect ratio.
minimumCropDimensions	(size)	Expect => {width: number, height: number} [Default 100 X 100].
onEditingCancel *	func	void
onEditingComplete *	func	Returns image object (image object fields => uri, width, height).
editorOptions	object	Customize appearance of editor
processingComponent	ReactNode	Customize appearance of loading between process

Example

import { ImageEditor } from "expo-crop-image";

<ImageEditor
  imageUri={uri}
  fixedAspectRatio={2 / 3}
  minimumCropDimensions={{
    width: 50,
    height: 50,
  }}
  onEditingCancel={() => {
    console.log("onEditingCancel");
  }}
  onEditingComplete={(image) => {
    console.log(image);
  }}
/>;

Editor Options

import { ImageEditor } from "expo-crop-image";

<ImageEditor
  ...
  editorOptions={{
    ...
  }}
/>;

type EditorOptions = {
  backgroundColor?: string
  controlBar?: {
    position?: 'top' | 'bottom'
    backgroundColor?: string
    height?: number
    cancelButton?: IconProps
    cropButton?: IconProps
    backButton?: IconProps
    saveButton?: IconProps
  }
  coverMarker?: {
    show?: boolean
    color?: string
  }
  gridOverlayColor?: string
  overlayCropColor?: string
}

type IconProps = {
  color: string
  text: string
  iconName: FeatherIconNames | MaterialIconNames
}

🧪 Technologies

This project was developed using the following technologies:

• ReactNative
• Expo
• Recoil
• Typescript

📌 Requirements

To use this package you have to install the following dependencies

• @expo/vector-icons
• expo-image-manipulator
• react-native-gesture-handler

🚀 How to run locally

Clone the project and access the folder.

git clone https://github.com/NitoBa/expo-crop-image.git

cd expo-crop-image && npm install
cd example-app && npm install && cd ..

Compile the package locally

# build the package locally
npm run build:dev
# watch to changes while running with app
npm run build:watch

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

Made with 💜 by Bruno Alves 👋