react-native-image-editor icon indicating copy to clipboard operation
react-native-image-editor copied to clipboard

Call to ImageEditor not working

Open keyurgarsondiya opened this issue 4 years ago • 2 comments

Bug

Environment info:

Android

My Code:

import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  Platform,
  Button
} from 'react-native';
import ImageEditor from '@react-native-community/image-editor';

class ImageEditorScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resizedUri: null
    };
  }

  handleSelectField = async () => {
    let { route } = this.props;
    let { imageUri } = route.params;
    const cropData = {
      offset: { x: 0, y: 0 },
      size: { width: 250, height: 250 },
      displaySize: { width: 300, height: 300 },
      resizeMode: 'contain'
    };
    console.log('Image URI from route.params: ', imageUri);
    let resized = await new Promise((resolve, reject) => {
      console.log('Reached in Promise');
      ImageEditor.cropImage(
        imageUri,
        cropData,
        uri => {
          resolve(uri);
          console.log(uri);       **//This Line not printing**
        },
        () => reject()
      );
    });

    this.setState({ resizedUri: resized });
    console.log('object');
  };

  render() {
    let { route } = this.props;
    let { imageUri } = route.params;
    let { resizedUri } = this.state;
    return (
      <View>
        <Image source={{ uri: imageUri }} style={{ width: 250, height: 250 }} />
        <Button title='Select Field Area' onPress={this.handleSelectField} />
        {resizedUri && <Text>{resizedUri}</Text>}
      </View>
    );
  }
}

export default ImageEditorScreen;

Library version: Latest Version (npm install @react-native-community/image-editor --save)

However in the image editor call to crop image the inner console log is not printing only so actually not going inside only. I have checked the image uri is being received correctly. Please help me to solve this.

keyurgarsondiya avatar Mar 13 '20 05:03 keyurgarsondiya

Any solution yet

sgarchavada avatar Nov 27 '20 09:11 sgarchavada

I had the same issue when I was trying to upgrade my RN version and add this package. My solution was to follow their documentation and made a minor change in my code:

ImageEditor.cropImage(uri, cropData).then(url => { console.log("Cropped image uri", url); })

ARXII-13 avatar Jan 07 '21 01:01 ARXII-13

as @ARXII-13 mentioned you @keyurgarsondiya need to wait a promise result

retyui avatar Feb 25 '24 13:02 retyui