/react-native-expo-image-cropper

Beautiful React-Native Expo Image Cropper

Primary LanguageJavaScriptMIT LicenseMIT

React Native Expo Image Cropper

iOS and Android





npm version npm version npm version

image editing tools cropping mode
Watch Video!

Open on your device!

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

Kown Issues

If you have some problem open a issue

TO DO