expo-crop-image-safe-area
v0.0.5
Published
Allows user to crop image with given aspect ratio for react native using expo on Android and IOS - (Workaround for IOS always square images).
Downloads
3
Maintainers
Readme
🚀 How to install
npm install "expo-crop-image-safe-area"
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:
📌 Requirements
To use this package you have to install the following dependencies
🚀 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 👋