Getting "Illegal callback invocation from native module. This callback type only permits a single invocation from native code"

Question

I am using react-native-image picker and react-native-image-crop picker libraries in two class.

One is launching the library image (react-native-image picker) and other one package opens the cropping window(react-native-image-crop-picker).

Here the launching library is in one screen and cropper is opening while navigating from the library on another screen.

My issue is after click on the choose-in cropping window it again reset the cropping window and need to crop again and illegal invocation error occurs after this.

Refer the code sniipet

 // Opens the library image in Library.js screen
import ImagePicker from 'react-native-image-picker';
     ImagePicker.launchImageLibrary(options, (response)  => {
            if (response.didCancel) {
              console.warn('User cancelled photo picker');
            }
            else if (response.error) {
              console.warn('ImagePicker Error: ', response.error);
            }
            else {
             this.props.navigation.navigate('CropWindow', { screenName: 'CropImage',uri: response.uri});
            }

The below is for the cropping window in CropWindow.js

import ImagePicker from 'react-native-image-crop-picker';
    ImagePicker.openCropper({
                path: response,
                width: deviceWidth,
                height: deviceWidth*5/4
             }).then(image => {
                this.props.navigation.navigate('ShowAllCroppedImage', {uri: response.uri, croppedImage: this.croppedImage.bind(this)});
              })
              .catch((err) => {
                console.log("openCropper error = " + err)
              });

hong developer · Answer 1 · 2019-08-20T14:01:10.597

0

You do not need to use two modules at the same time. You can get what you want with a simple execution.

Before that, get the rights to the camera and storage space.

You can use yarn add react-native-permissions @react-native-community/async-storage

and react-native link react-native-permissions

Example

import Permissions from 'react-native-permissions';
...
_requestPermission = () => {
    Permissions.request('photo').then(response => {
      // Returns once the user has chosen to 'allow' or to 'not allow' access
      // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
      this.setState({photoPermission: response});
    });
    Permissions.request('camera').then(response => {
      // Returns once the user has chosen to 'allow' or to 'not allow' access
      // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
      this.setState({photoPermission: response});
    });
  };

If you want to cut an one image

import ImagePicker from 'react-native-image-crop-picker';
...
ImagePicker.openPicker({
  width: deviceWidth,
  height: deviceWidth*5/4
  cropping: true
}).then(image => {
  console.log(image);
});

If you want to cut multiple images:

import ImagePicker from 'react-native-image-crop-picker';
...
ImagePicker.openPicker({
  multiple: true,
  width: deviceWidth,
  height: deviceWidth*5/4
  cropping: true
}).then(images => {
  console.log(images);
});

edited Aug 20 '19 at 14:01

answered Aug 20 '19 at 13:01

hong developer

13,291
4
38
68

But my code works for me I can able to crop an image. There I got the call back error and needs to click the choose twice to see the cropped image. My intention does not need to crop multiple images at a time. I need to crop a single image only. – sejn Aug 20 '19 at 13:08
@sejn I'm not saying your code isn't working. If you want to cut an image, you can use the code on my answer. – hong developer Aug 20 '19 at 13:18
You can see `If you want to cut an one image` – hong developer Aug 20 '19 at 13:18
@sejn Are you using 'react-native-image-crop-picker' installed? Look at my answer. – hong developer Aug 20 '19 at 13:30
Yes I am using 'react-native-image-crop-picker'. – sejn Aug 20 '19 at 13:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198184/discussion-between-sejn-and-hong-develop). – sejn Aug 20 '19 at 13:36
Did you `react-native link` ? – hong developer Aug 20 '19 at 13:36
Yes I have linked – sejn Aug 20 '19 at 13:47
@sejn By the way, is my code not working? Does the error occur? – hong developer Aug 20 '19 at 13:48
I have added permissions already in my Info.plist file. Error still occurs – sejn Aug 21 '19 at 07:05

score 0 · Answer 2 · answered Aug 20 '19 at 13:09

its issue with permissions for android

import { PermissionsAndroid } from 'react-native';

async requestCameraPermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        'title': 'Cool Photo App Camera Permission',
        'message': 'Cool Photo App needs access to your camera ' +
                   'so you can take awesome pictures.'
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera")
    } else {
      console.log("Camera permission denied")
    }
  } catch (err) {
    console.warn(err)
  }
}

I am using iOS and I have allowed permissions for Camera in my Info.plist file. — sejn, Aug 20 '19 at 13:09

Getting "Illegal callback invocation from native module. This callback type only permits a single invocation from native code"

2 Answers2