eic

expo-image-crop

Crop and rotate image without detach your expo project!

Showing:

Popularity

Downloads/wk

193

GitHub Stars

61

Maintenance

Last Commit

1yr ago

Contributors

4

Package

Dependencies

12

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Expo image manipulator

Multi platform 🚀





npm version npm version npm version

Open on your device!

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

PropsTypeDefaultDescription
isVisiblebooleanfalseShow or hide modal with image manipulator UI
onPictureChoosedfunctionCallback where is passed image edited as parameter
photoobject{ "uri": string } uri of image to be edited
btnTextsobject{ "crop": string, "done": string, "processing": string}name for crop, done and processing texts
onToggleModalfunctionCallback called when modal is dismissed
borderColorstring#a4a4a4Color for crop mask border
allowRotatebooleantrueShow rotate option
allowFlipbooleantrueShow flip option
saveOptionsobject{ "compress": number, "format": string, "base64": boolean}A map defining how modified image should be saved
fixedMaskobject{ "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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100