expo-can-cropper
v1.1.2
Published
Custom Cropper for Square Cropping
Downloads
12
Maintainers
Readme
Install Dependences
- yarn add react-native-expo-image-cropper
Example
import React from 'react'
import { Dimensions, TouchableOpacity, ImageBackground } from 'react-native'
import { ExpoImageManipulator } from 'react-native-expo-image-cropper'
export default class App extends React.Component {
state = {
showModal: false,
uri: 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png',
}
onToggleModal = () => {
const { showModal } = this.state
this.setState({ showModal: !showModal })
}
render() {
const { uri, showModal } = 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 }}
>
<TouchableOpacity title="Open Image Editor" onPress={() => this.setState({ showModal: true })} />
<ExpoImageManipulator
photo={{ uri }}
isVisible={showModal}
onPictureChoosed={(data) => {
this.setState({ uri: data.uri })
}}
onToggleModal={() => this.setState({ showModal: !showModal })}
saveOptions={{
compress: 1,
format: 'png',
base64: true,
}}
/>
</ImageBackground>
)
}
}
Run the example!
- Clone this repository
- cd example/
- run yarn or npm install
- enjoy!
Requirements
- Use it into Expo app (from expo client, Standalone app or ExpoKit app).
- Because we need to have access to
Expo.ImageManipulator
- Only Expo SDK 33 or Higher
Features
- Crop and rotate image with
Expo.ImageManipulator