react-native-image-editor
react-native-image-editor copied to clipboard
Call to ImageEditor not working
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