callstack/react-native-image-editor

Call to ImageEditor not working

keyurgarsondiya opened this issue · 3 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.

Any solution yet

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); })

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