TypeError: undefined is not an object (evaluating '_reactNativeImagePicker.default.showImagePicker')

Question

Using React Image Picker i am facing this error: TypeError: undefined is not an object (evaluating '_reactNativeImagePicker.default.showImagePicker')

This is what happens when i click on image picker function

Mobile Screenshot:

This is my Code:

import React from 'react';
import { View, Text,Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

const options = {
    title: 'Select Avatar',
    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  };

function Picker(){
    const openPicker =()=>{
      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 };
      
          console.log(source)
        }
      });
    }
    return(
        <View>
            <Button onPress={openPicker} title="Open image picker"></Button>
        </View>
    )
}

export default Picker; 

Japhetic

what is the exact version of react-native-image-picker that you are using? You can check it under the package.json file. – Testudo

If you are using react-native-image-picker 3.x.x version, showImagePicker will no longer work. please refer here for the migration guide . You need to use launchImageLibrary as mentioned here – Testudo

I am using image picker version 3.1.2 . I was actually following a tutorial in which they downloaded the new version and then they used the old docs which worked for them. The version just launchImageLibrary(options?, callback)? nothing else as before the 2.x.x version needed the whole code. – Japhetic

I don't know how it worked on the tutorial. but as per the docs. You need to change your import statement and use launchimagelibrary with options and response – Testudo

I changed it with launch image library but now i am getting this error. TypeError: undefined is not a function (near '...(0, _reactNativeImagePicker.default)...'). Can you change my updated required code. – Japhetic

Same issue here, has anyone gotten this work? – Teeter

Follow This: https://mcmap.net/q/665386/-undefined-is-not-an-object-evaluating-imagepickermanager-showimagepicker – Renaterenato

Answer 1

I had this same issue and this is how I solved it.

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

Fenestra

Follow This: https://mcmap.net/q/665386/-undefined-is-not-an-object-evaluating-imagepickermanager-showimagepicker – Renaterenato

Yes this worked for me – Illtreat

Answer 2

If your react-native-image-picker version is 3.x.x then, replace the above code with these lines,

import {launchCamera, launchImageLibrary} from 'react-native-image-picker'; // Migration from 2.x.x to 3.x.x => showImagePicker API is removed.
...

const openPicker =()=>{
  launchCamera(options, (response) => { // Use launchImageLibrary to open image gallery
    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 };
  
      console.log(source)
    }
  });

Read the docs

Hydnocarpate

Please give better explanation as to why the above code works. – Tonl

It works because we all found and copied code containing showImagePicker, but that method doesn't exist in version 3.x.x. So, we should use launchImageLibrary or launchCamera. – Scirrhous

@FilipSavic in my case image gallery is opening up and closes at the same moment in ios. however android works fine. Any ideas? – Jourdan

@Jourdan No idea... sorry :/ Maybe check if someone has already filed an issue on their GitHub. – Scirrhous

Follow This: https://mcmap.net/q/665386/-undefined-is-not-an-object-evaluating-imagepickermanager-showimagepicker – Renaterenato

Answer 3

Issue:
import ImagePicker from "react-native-image-picker"

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

Scorch

Answer 4

check your lib version if its 3x then try something like this

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


                <Button onPress={() =>
                        ImagePicker.launchImageLibrary(
                          {
                            mediaType: 'photo',
                            includeBase64: false,
                            maxHeight: 200,
                            maxWidth: 200,
                          },
                          (response) => {
                            console.log(response);
                            this.setState({resourcePath: response});
                          },
                        )
                      }
                title="Select Image"/>

Crinoline

Answer 5

Replace

  import { ImagePicker } from 'react-native-image-picker',

with

var ImagePicker = require('react-native-image-picker');

This is working for me.

Beograd

Answer 6

showImagePicker API is removed.

use Direct launchCamera or launchImageLibrary

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

Indene

Answer 7

you can downgrade your version of the image picker library I am facing same issue then I am using this CLI command to downgrade a version of the image picker npm install [email protected] same like you can use this command

Bowing