expo-image-manipulator-view-struqta
v0.0.1
Published
Crop, rotate and flip images without detach your expo project!
Downloads
2
Maintainers
Readme
Note
This repository was forked from brunon80/expo-image-crop(it is probably no longer maintained). The changes (at 2022/06/20) are as follows:
- Up supported Expo SDK to 48.
- Support aspect ratio.
- Support images longer than the screen with scroll.
- Several icons can be changed.
- Remove unnecessary dependencies from package.json.
- Reorganized directory structure.
- Rewritten to typescript, and type information was provided.
All changes can be found here.
Crop and rotate image without detach your expo project!
Expo.ImageManipulator
is only a API without a UI, so you have to build your own UI on top of it, or choose detach your project to use third party linked packages, witch is no so good because a pure javascript Expo project is marvelous!
No more flickering while resizing image mask!
Compatible with Expo SDK 44
Support typescript
Install
yarn add expo-image-manipulator-view-struqta
Example
import React from 'react'
import { Dimensions, Button, ImageBackground } from 'react-native'
import { ImageManipulatorView } from 'expo-image-manipulator-view-struqta'
export default class App extends React.Component {
state = {
isVisible: false,
uri: 'https://i.pinimg.com/originals/39/42/a1/3942a180299d5b9587c2aa8e09d91ecf.jpg',
}
onToggleModal = () => {
const { isVisible } = this.state
this.setState({ isVisible: !isVisible })
}
render() {
const { uri, isVisible } = this.state
const { width, height } = Dimensions.get('window')
return (
<ImageBackground
resizeMode="contain"
style={{
justifyContent: 'center', padding: 20, alignItems: 'center', height, width, backgroundColor: 'black',
}}
source={{ uri }}
>
<Button title="Open Image Editor" onPress={() => this.setState({ isVisible: true })} />
<ImageManipulatorView
photo={{ uri }}
isVisible={isVisible}
onPictureChoosed={({ uri: uriM }) => this.setState({ uri: uriM })}
onToggleModal={this.onToggleModal}
/>
</ImageBackground>
)
}
}
Props
| Props | Type | Default | Description |
|------------------|----------|----------------------------------------------------------------------------|----------------------------------------------------|
| isVisible | boolean | false | Show or hide modal with image manipulator UI |
| onBeforePictureChoosed | function | | Callback before done. You must return boolean. If you return false, it will stop. |
| onPictureChoosed | function | | Callback where is passed image edited as parameter |
| photo | object | { uri: string }
| uri of image to be edited |
| btnTexts | object | { crop: string, done: string, processing: string}
| name for crop, done and processing texts |
| onToggleModal | function | | Callback called when modal is dismissed |
| borderColor | string | #a4a4a4 | Color for crop mask border |
| allowRotate | boolean | true | Show rotate option |
| allowFlip | boolean | true | Show flip option |
| saveOptions | object | { compress: number, format: string, base64: boolean}
| A map defining how modified image should be saved
| fixedMask | object | { width: number, height: number }
| Width and height fixed mask
| ratio | object | { width: number, height: number }
| Width and height cropping ratio
| icons | object | { crop: ReactNode, back: ReactNode, processing: ReactNode }
| Some icons can be changed
Return of onBeforePictureChoosed/onPictureChoosed is an object with format:
{
uri: string,
base64: string | undefined, // undefined if base64 is false on saveOptions prop
width: number,
height: number,
cropped: boolean // Whether cropped or not
}
Run the example!
- Clone this repository
- cd source/
- run yarn or npm install
- enjoy!
The animation is fluid even on dev mode!
Requirements
- Use it into Expo app (from expo client, Standalone app or ExpoKit app).
- Because we need to have access to
ImageManipulator
Features
- Crop
- Rotate
- Flip (Horizontal and Vertical)
- Base64