1.0.4 • Published 4 years ago
expo-image-crop v1.0.4
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 36
Atention: squareAspect was removed on this version and will be add in future versions, if you need it, please stay at 0.2.17
Expo Dependences
- yarn add react-native-vector-icons
- expo install expo-permissions
- expo install expo-image-picker
- expo install expo-file-system
- expo install expo-image-manipulator
Example
import React from 'react'
import { Dimensions, Button, ImageBackground } from 'react-native'
import { ImageManipulator } from 'expo-image-crop'
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 })} />
<ImageManipulator
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 |
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 |
Return of onPictureChoosed is an object with format:
{
uri: string,
base64: string // undefined if base64 is false on saveOptions prop
}
Run the example!
- Clone this repository
- cd example/
- 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
If you have some problem open a issue
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.2.17
4 years ago
0.2.16
4 years ago
0.2.15
4 years ago
0.2.14
4 years ago
0.2.13
4 years ago
0.2.12
5 years ago
0.2.11
5 years ago
0.2.10
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.99
5 years ago
0.1.98
5 years ago
0.1.97
5 years ago
0.1.96
5 years ago
0.1.95
5 years ago
0.1.94
5 years ago
0.1.93
5 years ago
0.1.92
5 years ago
0.1.91
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago