undefined is not an object(evaluating ImagePickerManager.showImagePicker)

Question

var ImagePicker = require('react-native-image-picker');
call() {   
    var options = {
      title: 'Select Avatar',
      customButtons: [
        {name: 'fb', title: 'Choose Photo from Facebook'},
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };
      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 {
        let source = { uri: response.uri };

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

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

I call this function from render onClick. I am using

[email protected]

But it is giving me undefined is not an object error. Also please tell me how can I link it to phone gallery to choose the image. Please suggest me solution

Anthroposophy

did you run react-native run-android after you added the code of the native android ? – Phooey

I didn't. But now when I ran react-native run-android it is working. Thank you. Can you please also tell how to link it to phone gallery – Anthroposophy

It is working on android but on IOS there is following error - Can not read property 'showImagePicker' of undefined – Anthroposophy

you need to run react-native run-ios for IOS... – Phooey

Sorry I can't tell how to link it(I don't know it), I never used the library before.. but I know this error from another libs – Phooey

mmm I am an android developer, I never used ios development before... hope a good luck – Phooey

Answer 1

If you update your import:

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

ImagePicker.showImagePicker(options, (response) => {
         // code here
};

things are gonna work

Kwashiorkor

Answer 2

First you must link the module.

react-native link react-native-image-picker

Then check below files:

android/app/build.gradle：compile project(':react-native-image-picker')

android/setting.gradle：

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

android/app/src/..../MainApplication

The issue is here:

https://github.com/react-community/react-native-image-picker/issues/414#issuecomment-265060406

Simard

Thank you @DennisFrea. This issue resolved when I ran react-native run-android command – Anthroposophy

Fyi..... only manual link if you are using < RN 0.60 otherwise if RN > 0.60 it should already include Autolinking. – Lolalolande

Answer 3

I think this is cool way to solve this problem:

import * as ImagePicker from "react-native-image-picker"

<TouchableOpacity style={styles.CameraIconContent}
          onPress={() =>
            ImagePicker.launchImageLibrary(
              {
                mediaType: 'photo',
                includeBase64: false,
                maxHeight: 200,
                maxWidth: 200,
              },
              (response) => {
                console.log(response);
                this.setState({resourcePath: response});
              },
            )
          }
                    >
                    <Image
                        source={CAMERA_ICON}
                            resizeMode = "contain"
                            style={{
                                width: 20,
                                height: 20
                            }}
                    />
            </TouchableOpacity>

Upwind

Answer 4

If you're using version 4.x.x, follow these steps:

First: go to AndroidManifest in 'android/app/src/main/AndroidManifest.xml' and add the permissions:

<uses-permission android:name="android.permission.CAMERA" />

After: Access the camera as in this example:

import {PermissionsAndroid} from 'react-native';
import * as ImagePicker from "react-native-image-picker"

async function cameraPermission() {
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
    if(granted === PermissionsAndroid.RESULTS.GRANTED) {
      // if get here, the user has accepted the permissions
    } else {
      // if get here, the user did NOT accepted the permissions
    }
}

function takePhoto() {
    cameraPermission();

    ImagePicker.launchCamera({
        mediaType: 'photo',
        maxHeight: 600,
        maxWidth: 800
    }, res => {
        if (!res.didCancel) {
            this.setState({ imageUri: res.uri });
        }
    });
}

Attention! if you are going to use ios you also need to grant permissions

Monograph

Answer 5

When I upgraded my old project, I had the same problem. The react-native-image-picker version was ^0.26.7 that is very old version actually.

The previous code was

let ImagePicker = require('react-native-image-picker');
     
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 {
                    this.profileImageObject = response;
                    let source = { uri: response.uri };
      ;              this.setState({
                        profilePicture: source,
                        isProfilePicture: true
                    })
                }
            });

The error was as like the following screenshot

---

---

I just import all from the library and use launchImageLibrary function as follows:

import * as ImagePicker from "react-native-image-picker"

ImagePicker.launchImageLibrary(options, (response) => {...}

Now it works for me. I hope it will help developers as well.

Abductor

Answer 6

1. Install module linking it to react native: npm install react-native-image-picker --save

2. Restart your react native server

3. Run your app again to load the new installed module: npx react-native run-android

Froward