🚀 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 👋