expo-image-manipulator-view

Expo image manipulator view

Note

This repository was forked from brunon80/expo-image-crop(it is probably no longer maintained). The changes are as follows:

• Up supported Expo SDK to 52.
• 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.

Multi platform 🚀

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!

PRs are welcome...

No more flickering while resizing image mask!

Compatible with Expo SDK 44

Support typescript

Install

yarn add expo-image-manipulator-view

Example

import React from 'react'
import { Dimensions, Button, ImageBackground } from 'react-native'
import { ImageManipulatorView } from 'expo-image-manipulator-view'

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

If you have some problem open a issue