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:

Error Image

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;

what is the exact version of `react-native-image-picker` that you are using? You can check it under the `package.json` file. — emkarachchi, Jan 03 '21 at 19:37
If you are using `react-native-image-picker 3.x.x` version, `showImagePicker ` will no longer work. please refer [here for the migration guide](https://github.com/react-native-image-picker/react-native-image-picker#migration-from-2xx-to-3xx) . You need to use `launchImageLibrary` as mentioned [here](https://github.com/react-native-image-picker/react-native-image-picker#launchimagelibrary) — emkarachchi, Jan 03 '21 at 19:42
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. — MuhammadShahbaz, Jan 04 '21 at 07:10
I don't know how it worked on the tutorial. but as per the [docs](https://github.com/react-native-image-picker/react-native-image-picker#launchimagelibrary). You need to change your [import statement](https://github.com/react-native-image-picker/react-native-image-picker#methods) and use [launchimagelibrary](https://github.com/react-native-image-picker/react-native-image-picker#launchimagelibrary) with [options](https://github.com/react-native-image-picker/react-native-image-picker#options) and [response](https://github.com/react-native-image-picker/react-native-image-picker#options) — emkarachchi, Jan 04 '21 at 07:18
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. — MuhammadShahbaz, Jan 05 '21 at 14:15

score 30 · Answer 1 · edited Feb 02 '21 at 14:18

30

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

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

edited Feb 02 '21 at 14:18

BigData-Guru

1,161
1
15
20

answered Feb 02 '21 at 09:17

Casneil Simpson

309
2
2

1

Follow This: https://stackoverflow.com/a/68378454/7921804 – Maizied Hasan Majumder Jul 14 '21 at 12:53
Yes this worked for me – GUGAN RAJ Dec 30 '21 at 07:50

AZITHA INDRAJITH · Answer 2 · 2021-04-23T10:49:30.013

8

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

edited Apr 23 '21 at 10:49

answered Apr 19 '21 at 08:38

AZITHA INDRAJITH

118
1
7

1

Please give better explanation as to why the above code works. – 0xInfection Apr 19 '21 at 09:57
2

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`. – Filip Savic Apr 20 '21 at 09:55
@FilipSavic in my case image gallery is opening up and closes at the same moment in ios. however android works fine. Any ideas? – R.singh Jun 04 '21 at 10:27
@R.singh No idea... sorry :/ Maybe check if someone has already filed an issue on their GitHub. – Filip Savic Jun 08 '21 at 13:25
Follow This: https://stackoverflow.com/a/68378454/7921804 – Maizied Hasan Majumder Jul 14 '21 at 12:53

score 8 · Answer 3 · answered Jun 09 '21 at 08:00

8

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

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

answered Jun 09 '21 at 08:00

chanduthedev

356
2
9

score 4 · Answer 4 · answered Feb 17 '21 at 16:35

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"/>

score 2 · Answer 5 · answered Dec 16 '21 at 11:59

2

Replace

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

with

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

This is working for me.

answered Dec 16 '21 at 11:59

Umesh

1,609
1
17
28

score 1 · Answer 6 · answered Nov 16 '22 at 09:27

1

showImagePicker API is removed.

use Direct launchCamera or launchImageLibrary

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

answered Nov 16 '22 at 09:27

Keshav Gera

10,807
1
75
53

score 0 · Answer 7 · answered May 01 '22 at 19:48

0

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 react-native-image-picker@2.3.4 same like you can use this command

answered May 01 '22 at 19:48

Ahsan Raza Alvi

49
3

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

7 Answers7

Linked