[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]

Question

I am running my react-native app through the expo. The same thing is happening with react-native-image-picker.

I tried using react-native link react-native-image-picker and react-native link react-native-image-crop-picker. It didn't work, so I tried unlinking those and again linked, still, it didn't work. I tried every way like also tried it with different versions of react-native and react-native-image-picker as well as with react-native-image-crop-picker.

Link to npm libraries:-

image-picker -> https://www.npmjs.com/package/react-native-image-crop-picker/v/0.4.2

image-crop-picker -> https://github.com/react-native-community/react-native-image-picker

Code for react-native-image-picker:-

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});

Code for react-native-image-crop-picker:-

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    Modal,
    TouchableHighlight,
    Alert,
    TextInput,
    Picker,
    Button,
} from 'react-native';

import Textarea from 'react-native-textarea';
import { Card } from 'react-native-shadow-cards';

import ImagePicker from 'react-native-image-crop-picker';

export default class CreateProject extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleChoosePhoto = async (imageOpt) => {
        if (imageOpt === 'gallery') {
            ImagePicker.openPicker({
                width: 300,
                height: 400,
                cropping: true
            }).then(image => {
                console.log(image);
            });
        } else if (imageOpt === 'camera') {
            ImagePicker.openCamera({
                width: 300,
                height: 400,
                cropping: true,
              }).then(image => {
                console.log(image);
              });
        } else {
            Alert.alert('Failure! Can\'t do this operation right now.');
        }
    }
    
    render() {
      return (
        // Code for the View here
      );
    }
}

Error Code:-

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]
* app/components/CreateProject.js:29:24 in _callee$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:216:8 in async
* app/components/CreateProject.js:27:24 in _callee
* app/components/CreateProject.js:70:87 in onPress
- node_modules/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android.js:213:45 in touchableHandlePress
* [native code]:null in touchableHandlePress
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:878:34 in _performSideEffectsForTransition
* [native code]:null in _performSideEffectsForTransition
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:777:44 in _receiveSignal
* [native code]:null in _receiveSignal
- node_modules/react-native/Libraries/Components/Touchable/Touchable.js:488:24 in touchableHandleResponderRelease
* [native code]:null in touchableHandleResponderRelease
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:93:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:318:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:342:30 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:715:42 in executeDispatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:737:20 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:894:29 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:874:16 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1050:21 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1072:19 in runExtractedEventsInBatch
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2708:6 in <unknown>
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18527:14 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2611:31 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2706:17 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2782:28 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Can you link your expo code? – Sanyam Jain Dec 12 '19 at 06:16 — Sanyam Jain, Dec 12 '19 at 06:16

score 9 · Accepted Answer · answered Dec 12 '19 at 06:47

The problem is that you have used expo. And expo doesnt support linking of any external libraries. So if you want to use those particular libraries then you have to eject from expo to bare react native. You can check this document on how to eject , medium link

Otherwise what you can do is use the expo image picker expo-image picker and try with that.

Hope it helps. feel free for doubts.

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker')]

1 Answers1

Linked