Hello @Stoffern,
It's Clovs the Clown ;-)

Will you add a feature to your component, where the image is stationary with a draggable box represents the cropped image in react-native.
example on this image:
https://i1.wp.com/reactscript.com/wp-content/uploads/2016/07/Accessible-Image-Cropper-For-React.png

Cause there is no third library that do that (with IOS and Android compatibility).
Actually your component is the best in cropping picture on react-native, that why I ask you that.
Maybe I will help you in few month but I need some time to learn React for now :-P

See you around
regards,

I have 3.0.0-alpha.2 installed but is that stable?

crop() returns a base64 encoded image

How do i write this data into a valid format in a jpeg file. I'm using react-native-fetch-blob:

RNFB.fs.writeFile(cropFilePath, data, 'base64')

Hi there! Am trying out the example app/code, and keep getting the following error:

Failed to get size for image: http://i.imgur.com/tCatS2c.jpg

Any idea what I might be doing wrong?

Requiring unknow moudle "gl-react-image". if you are sure the moudle is there ,try.......

I can't find gl-react-image in node_moudles .

where can I find it?

Hello, @Stoffern

I cannot get event that more than 2 touches in my app using RN0.29

PanResponder.create({
onPanResponderMove: (evt, gestureState){
if(evt.nativeEvent.touches.length<2) //move
//if(evt.nativeEvent.changedTouches.length<2) //also move?
else //pinch, this condition is never called.
}
...
})
//Is PanResponder changing the API ?
thanks very much!

I tried to pass the data base64 of the image to the component and it doesn't work.

<ImageCrop
    image="data:image/jpeg;base64,/...."
/>

If you continue to scroll outside of the crop area, the image stays where it should, but the offset increases. Give it 4-5 solid "scroll" motions after it's hit the border, and it takes several the oposing way.

Example: Keep moving your image down after it hits the bottom, then try to move it up. It won't move it up until you move it enough to offset the offset.

Question: Can you zoom out of an image instead of in? That'd be a neat feature.

Hello
I am using this library for the image inline image cropping. the cropped image is not pixelated. i passed quality = 1.
can you please help me?
thanks in advance

I am getting this error

When Zoom in and zoom out functionalities is very solw and image is stucked sometime

While trying to "panToMove" the image, I got the following error when zoom is set to default value

Also, I can't make the pinchToZoom to work on iOS as well with an image source coming from CameraRoll (I use data base64 image). I've tried to set different zoom, maxZoom and minZoom values, the pinch won't work.

Hi
I took an image from the camera (android), rotated it and saved to gallery.
Now when i choose the image using this plugin, the image is displayed with original orientation i.e, as it was taken from the camera (prior to the rotation).

First of all, great library - thanks!

However, I noticed a problem with photos in portrait format (width < height).

I load the default photos from the simulator's camera roll. Landscape photos are fine, but portrait photos are not displayed in the ImageCrop component.

Tweaking the cropWidth and/or cropHeight does not have any effect.
Do you have any special handling for that?

Suppose you have

<ImageCrop
          image={this.props.image}
          cropHeight={this.props.height}
          cropWidth={this.props.width}
          zoom={this.state.zoom}
        />

Changing the zoom in the state via .setState does not control the zooming of the cropper. For example I would like to have an "update" action in which I change the image source and I reset the zoom to 0. It works for changing the image source, but providing a new zoom doesn't seem to do anything, the new image is zoomed in as the old image was before updating.

Make pan relative the image size not the zoom value

^^

make them relative to zoom

Is there any way to render uploaded images in different aspect ratios without stretching. Example ----

?

Current default is '' (empty string). Expecting for it to work with default value.

Not sure what was expected as a prop when I read image (required): link to image that should be cropped. Is it waiting for an URI? An object similar to { uri: ... }?

Is it possible to cut image at a particular angle?

Im trying to upgrade my app to react native 50, and after updating to the latest version of this plugin i am getting an error GLSL is only available in gl-react v2. What versions of gl react and gl react native should i be using?

I currently have
"react": "16.0.0",
"react-native": "0.50.4",
"gl-react": "2.3.1",
"gl-react-native": "2.47.0",
"react-native-image-cropper": "^0.4.1",

I need to have a dynamic cropWidth and cropHeight. What I'm trying to do is to have cropWidth set to 100% and cropHeight set to follow flexbox rules. Any idea if that's something supported already?

I'm using react-native 0.39 with gl-react 3.0.0 and gl-react-native 2.39.0, and I can't make this library work, I've already tried downgrading react-native and another libraries but nothing works. Here is the error

Any help will be appreciated!

i am using these dependencies

"dependencies": {
"gl-react": "^2.2.9",
"gl-react-native": "^2.40.2",
"querystring": "^0.2.0",
"react": "^0.14.8",
"react-native": "^0.24.1",

}

Hi, I'm trying to use ImageCrop with local file saving options:

<ImageCrop
  ref={(c) => { this.cropper = c; }}
  zoom={this.state.zoom}
  image={this.props.image}
  cropHeight={this.props.height}
  cropWidth={this.props.width}
  panToMove
  format="file"
  filePath="abc.jpg"
  pinchToZoom
/>

When I invoke this.cropper.crop() the returned Promise gets rejected "Could not write file: You don't have permission to save the file "abc.jpg"."
I presume it has something to do with declared permissions in Info.plist but I couldn't find anything related on the web. If there is a simple answer to this it would be worth adding it to the README documentation.

Somewhat related to the following: #39

I think my problem it's related to #22.
I've an image that I need to crop to a size bigger than the screen, so I pass the props cropWidth and cropHeight to 800 x 600 respectively. With the pixelRatio feature (without touching default value), the image show in full screen but I can't scroll fluid inside it to select crop section. I probably need the image showing scaled proportionally in the crop modal, and then the user should zoom and crop the desired section.

Is this possible? I've trying a lot to work around this but I can't.

this is not a bug . it's a function support. I think it's very important.
Because if the image width(or height) is so long .
Can‘t show a full image when the starting to end .
can't reduce image.

Hi, there's an issue where you said rotation it's done, but I can't make it work on my phone, neither in emulator.

Hi, I'm trying to use this library inside Modal component and pinchToZoom doesn't works at all.

I've tried modifying full example code and the problem still happen.

      <Modal
        animationType={"slide"}
        transparent={false}
        visible={true}
        onRequestClose={() => {this.setState({modalVisible: false, cropImage: {}})}}
        >
          <ImageCrop
            ref={'cropper'}
            image={this.state.image}
            cropHeight={this.state.height}
            cropWidth={this.state.width}
            zoom={80}
            maxZoom={80}
            minZoom={80}
            panToMove={true}
            pinchToZoom={true}
          />
      </Modal>

Thanks for building this @Stoffern, I tried every available RN crop package before this and yours was the only one that offered actual useful cropping capabilities.

I have a question though - do you know if it's possible to do the cropping based on the natural size of the image, but display the crop dialog as a ratio based on the screen size?

For example, an image is 1080 x 1080 and we want the crop area to be 1080 x 540. However if we specify this using cropHeight and cropWidth, the image is too big for the screen. We solve this when displaying the image normally, by using a ratio and screen size, however we can't do this when cropping as the resulting base64 image is output at the ratio size, not the actual size. Are you able to suggest a solution to this using react-native-image-cropper?

The captureFrame method of Surface in gl-react-native has the ability to specify file as a format and filePath to persist the cropped image to disk/storage.

Update line 196 in ImageCrop.js to:
return this.refs.cropit.captureFrame({quality: this.props.quality, type: this.props.type, format: this.props.format, filePath: this.props.filePath})

Example usage:
let filepath = ${RNFetchBlob.fs.dirs.CacheDir}/temp_post_image.jpg;

<ImageCrop
ref = {'cropper'}
format = {'file'}
filePath = {filepath}
image = {this.state.image}
cropHeight = {Screen.width}
cropWidth = {Screen.width}
type = 'jpg'
quality = {0.6}
maxZoom = {80}
minZoom = {20}
panToMove = {true}
pinchToZoom = {true}
/>

A new release is needed to work with latest React versions, following 0f0abae

Version 0.1.10 does not work, it complains about duplicate packages.

Can you please make a new release?

require ('.image.jpg')

Hello guys,
I just update all my project to react-native 0.40, and
I'm trying to use your package but I got this error on xcode:
[RCTImageLoader _loadImageOrDataWithURLRequest:size:scale:resizeMode:progressBlock:partialLoadBlock:completionBlock:]_block_invoke.194 + 355
libc++abi.dylib: terminating with uncaught exception of type NSException

My dependencies: {
"gl-react": "^2.2.4",
"gl-react-image": "0.0.2",
"gl-react-native": "^2.40.1",
"react": "15.4.2",
"react-native": "<=0.40.0",
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
"react-native-image-cropper": "^0.3.0",
"react-native-router-flux": "^3.37.0"
}
Hope you can help me
regards,

Hello,

I'm trying to use react-native-image-cropper in my react-native app for ios. When I import the package

import { ImageCrop } from 'react-native-image-cropper';

I get this error:

These are the commands I've run:

npm i -S gl-react
npm i -S gl-react-native & rnpm link
npm i -S react-native-image-cropper

Here are my package versions:

$ npm -v
4.1.2
$ npm ls react-native gl-react gl-react-native react-native-image-cropper
[email protected] /Users/bkotos/Projects/react-native/app
├── [email protected]
├── [email protected]
├── [email protected]
└─┬ [email protected]
  └── [email protected]

I also went through the setup steps in gl-react-native and added libRNGL.a to the build phase in my app's xcode project. This didn't help either.

Am I doing something wrong or possibly missing a step in the setup?

I got this error when I want to use the ImageCropper component:

      <View style={{ flex: 1 }}>
        <ImageCropper
          ref="cropper"
          image={source} // string
          cropHeight={height} // number
          cropWidth={width} // number
          zoom={50}
          maxZoom={70}
          minZoom={10}
          panToMove={true}
          pinchToZoom={true}/>
        <Text onPress={this._capture.bind(this)}>Capture</Text>
      </View>

I print in my console the values of image, cropHeight and cropWidth and they are good, the problem happen also if I put static value directly in the component jsx

I am trying to crop image from this tool second time but I am facing a problem that it always shows previous image loaded in ImageCrop tag. Can someone fix it please

This seems to be coming from the gl-react-image dependency, using react native 0.50.0+

Could you add a LICENSE file to the repo? E.g. MIT?

Hello
I am using your lib for inline cropping like Instagram.
I am fetching one major issue with your lib. Image pixelated if we choose 4k or high resolution.

Set Image in image View

Set image in ImageCrop View

Here I attached some screenshot you can see. The image is pixelated in ImageCrop component.

Please help me

Thanks

Hello Guys,

I just installed react-native-image-cropper but
I got this error : "undefined is not an object (evaluating 'this.refs.cropper.crop')"
I got some trouble with the update of react-native 0.40 maybe the error come from that?
Or maybe I should have gone to Stackoverflow

import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  StyleSheet
} from 'react-native'
import { Actions } from 'react-native-router-flux';
import ImageCrop from 'react-native-image-cropper';

export default class CropContainer extends Component {
   constructor(props) {
      super(props);
      this.state = {
        image: require('../../pictures/Pixit_Icon.png'),
        height: 0,
        widht: 0,
        zoom: 0
      }
   }

   capture(){
     this.refs.cropper.crop() --------------------------------> here the error!
     .then(base64 => console.log(base64))
   }

   render() {
      return (
         <View>
            <ImageCrop
              ref={'cropper'}
              image={this.state.image}
              cropHeight={this.state.height}
              cropWidth={this.state.width}
              zoom={this.state.zoom}
              maxZoom={80}
              minZoom={20}
              panToMove={true}
              pinchToZoom={true}
              />
            <Text onPress={this.capture()}>Capture()</Text>
         </View>
      );
   }
}

Hope you can help me :-)

Hi @Stoffern, do you think it would be possible to pass as a prop a custom GLImage to the renderer?

I"m curious, because I'd like to try using https://github.com/stoffern/gl-react-imagefilters with this component. I think it would need to be generic enough so that it isn't coupled to that library though.

Hi,

I am trying to load a new image whenever capture is clicked. However, the app crashes whenever the button is clicked. I am able to console log the URL of the image to be loaded, and the URL of the image is being loaded, but the app crashes whenever it tries to load the image. Also, if it matters, I'm trying to move on to the next element of an array to load an image. My initial image is files[0].link, and the next one is files[1].link which is where it crashes. I tried to look at the logs on Android Studio and it seems that there is some issue with gl-react-native. Any idea where the issue might be?

Thanks