Skip to content

Crop and rotate image without detach your expo project!

License

Notifications You must be signed in to change notification settings

edoantonioco/expo-image-crop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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={uriM => this.setState({ uri: uriM })}
                  onToggleModal={this.onToggleModal}
              />
          </ImageBackground>
      )
  }
}

Props

  • 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
    • width: number - width of image to be edited (optional, used for large images due android bug, see: facebook/react-native#22145)
    • height: number - height of image to be edited (optional, used for large images due android bug, see: facebook/react-native#22145)
  • 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: Bool - Show rotate option
  • pinchGestureEnabled: Bool - Disable/Enable pinch gesture
  • squareAspect: Bool - Disable/Enable the square aspect of crop mask

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 25 or Higher

Features

  • Crop and rotate image with Expo.ImageManipulator

If you have some problem open a issue

TO DO

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

About

Crop and rotate image without detach your expo project!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%