Multi platform 🚀

Open on your device!

PRs are welcome...

Help Needed: Remove flickering while resizing image, if you know why open a issue or a PR

Updated to Expo SDK 35

New Crop UI

• 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

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>
      )
  }
}

• isVisible: Bool - 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 - name for crop text
  • rotate: string - name for rotate text
  • done: string - name for done text
  • processing: string - name for processing text
• onToggleModal: function - Callback called when modal is dismissed
• borderColor: string - Color for crop mask border
• allowRotate: boolean - Show rotate option
• pinchGestureEnabled: boolean - Disable/Enable pinch gesture
• squareAspect: boolean - Disable/Enable the square aspect of crop mask
• dragVelocity: number - Ajustable drag velocity
• resizeVelocity: number - Ajustable resize velocity
• saveOptions object - A map defining how modified image should be saved
  • compress number - A value in range 0.0 - 1.0 specifying compression level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality).
  • format string - ImageManipulator.SaveFormat.{JPEG, PNG}. Specifies what type of compression should be used and what is the result file extension. SaveFormat.PNG compression is lossless but slower, SaveFormat.JPEG is faster but the image has visible artifacts. Defaults to SaveFormat.PNG.
  • base64 boolea - Whether to also include the image data in Base64 format.

• 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 35 or Higher

• Crop and rotate image with Expo.ImageManipulator

• On some devices always only crops the upper left side of the image, see here.

• [Android / IOS] Detect touches with more precision (Drag / Resizing)
• [Android / IOS] Better crop mask