ggunti / react-native-amazing-cropper

Image cropper for react native using Animated API
MIT License
145 stars 83 forks source link

TypeError: null is not an object (evaluating 'RCTImageRotateModule.rotateImage') #28

Closed Gopalakrishnan-V closed 4 years ago

Gopalakrishnan-V commented 4 years ago

This error message appears when calling onDone.

react: 16.9.0 react-native: 0.61.4 react-native-amazing-cropper: ^0.1.1 react-native-image-rotate: ^2.1.0

@ggunti

ggunti commented 4 years ago

Run npm install --save react-native-image-rotate @react-native-community/image-editor. After that, run pod install inside ios directory.

Gopalakrishnan-V commented 4 years ago

Currently I am working on android. Yeah, I followed the steps as mentioned in the readme. Still facing the same error @ggunti

ggunti commented 4 years ago

Do you get this error also on iOS? Also, please attach some code in order to be able to reproduce the issue. As I see, it is a linking problem, but because of autolinking there should not be problems.

Gopalakrishnan-V commented 4 years ago

I have not checked it in iOS.

`<AmazingCropper footerComponent={

                }
                onDone={this.onDone}
                onCancel={this.onCancel}
                imageUri={imageMeta.uri}
                imageWidth={imageMeta.width}
                imageHeight={imageMeta.height}
            />`
Gopalakrishnan-V commented 4 years ago

Error screenshot

ggunti commented 4 years ago

I have no idea why it happens. Try to uninstall the rotation package and re-install it.

iAmShakil commented 4 years ago

@Gopalakrishnan-V can you confirm you rebuilt the project after installing pods?

ggunti commented 4 years ago

Please open a new issue if you still meet this problem.

kevgrig commented 4 years ago

I also hit this issue as I'm transitioning from npm to yarn (which is now the default for expo):

expo init testamazingcropper
cd testamazingcropper
yarn add react-native-image-rotate @react-native-community/image-editor react-native-amazing-cropper
# Edit App.js and replace with https://github.com/ggunti/react-native-amazing-cropper#usage-example-1-using-the-default-footer and add export default in front of the class
expo start
kevgrig commented 4 years ago

I had the same issue with npm. I'm not sure what's wrong. I did rm -rf node_modules, yarn cache clean, and re-installed and I tried both yarn and npm, but I always get the same error. As per my previous comment, it also happens with a fresh Expo project.

As a workaround, I created a fork and branch that uses Expo's ImageManipulator instead and it works:

yarn add https://github.com/myplaceonline/react-native-amazing-cropper.git#fix_issue_28
expo start -c

The key differences are to use ImageManipulator.manipulateAsync instead of RNImageRotate (note that I didn't implement the rotate function since I don't need it yet):

import * as ImageManipulator from 'expo-image-manipulator';

    ImageManipulator.manipulateAsync(this.props.imageUri, [{ crop: { originX: x, originY: y, width: width, height: height } }], {
      compress: 1,
      format: ImageManipulator.SaveFormat.PNG,
      base64: false,
    })
      .then(value => {
        this.props.onDone(value.uri);
      })
      .catch(reason => {
        this.props.onError(reason);
      });

I'm not too familiar with creating 3rd party libraries, so at first I got an error that dist/index.js was missing so that's why I removed dist from .gitignore and committed the entire dist directory (after running yarn build).