My feature offers a small image icon as a touchable to upload or take a picture, using "react-native-image-picker": "^3.3.2".

I'm getting error: Cannot read property 'launchImageLibrary' of undefined, same as this GitHub issue but as you can see, my code already have the import as they told to.

Here's my full code:

import React from 'react';
import {
    StyleSheet,
    Image,
    TouchableOpacity,
    Alert
} from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const ImageUpload: React.FC<any> = ({}) => {

    function showMessage() {
        Alert.alert("Upload image", "Choose a option", [
            {
                text: 'Camera',
                onPress: () => openCamera(),
            },
            {
                text: 'Gallery',
                onPress: () => openLibrary()
            },
        ]);
    }

    const openLibrary = () => {

        const options = {
            storageOptions: {
              skipBackup: true,
              path: 'images',
            },
          };
        launchImageLibrary(options, (response) => {
            console.log(response);
        });

    }

    const openCamera = () => {
        //ongoing
    }

    return(
        <>
            <TouchableOpacity onPress={()=>showMessage()}>
                <Image source={require('./picture.png')} style={{ width: 70, height: 70 }}/>
            </TouchableOpacity>
        </>
     );
};

const style = StyleSheet.create({
    ImageIcon: {
        justifyContent: "center",
        alignItems: "center",
    }

});

export default ImageUpload;

Also, In VS Code, I have this error when calling launchImageLibrary:

I have already perfomed a npx pod-install.

My feature offers a small image icon as a touchable to upload or take a picture, using "react-native-image-picker": "^3.3.2".

I'm getting error: Cannot read property 'launchImageLibrary' of undefined, same as this GitHub issue but as you can see, my code already have the import as they told to.

Here's my full code:

import React from 'react';
import {
    StyleSheet,
    Image,
    TouchableOpacity,
    Alert
} from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const ImageUpload: React.FC<any> = ({}) => {

    function showMessage() {
        Alert.alert("Upload image", "Choose a option", [
            {
                text: 'Camera',
                onPress: () => openCamera(),
            },
            {
                text: 'Gallery',
                onPress: () => openLibrary()
            },
        ]);
    }

    const openLibrary = () => {

        const options = {
            storageOptions: {
              skipBackup: true,
              path: 'images',
            },
          };
        launchImageLibrary(options, (response) => {
            console.log(response);
        });

    }

    const openCamera = () => {
        //ongoing
    }

    return(
        <>
            <TouchableOpacity onPress={()=>showMessage()}>
                <Image source={require('./picture.png')} style={{ width: 70, height: 70 }}/>
            </TouchableOpacity>
        </>
     );
};

const style = StyleSheet.create({
    ImageIcon: {
        justifyContent: "center",
        alignItems: "center",
    }

});

export default ImageUpload;

Also, In VS Code, I have this error when calling launchImageLibrary:

I have already perfomed a npx pod-install.

• javascript
• react-native
• react-native-image-picker

• 1 Same issue! Haven't found any solution yet myself despite hours of trying – Aidan Williamson Commented Apr 11, 2022 at 11:08

8 Answers 8

Importing it like this solved my issue;

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

In my case with Android, restarting the emulator fixed the problem. npm run android

It took me a very long time to get this to work but this worked for me.

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

References:

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

This error happened to me, I think there is some bug with expo and native libraries.

To test I did the following:

1. npm expo prebuild (will create the native codes in the ios and android folder)
2. npm react-native start

It worked for me.

Note: this error only happened on the iOS emulator, on Android the error did not occur

i use "react-native-image-picker": "^4.8.5",

i just restart metro "npx react-native start" or "npx react-native start --reset-cache"

and rerun metro bundler "npx react-native run-android"

my code is

import { launchImageLibrary } from "react-native-image-picker";

 handleChangePhoto = () => {
    launchImageLibrary({ noData: true }, (response) => {
      console.log(response);
      // if (response) {
      //   setPhoto(response);
      // }
    });
  };

for newer versions you can do like

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

and then run function directly instead using it like

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

do this ,

launchImageLibrary(options, (response) => {

If you are working with Expo and encountering issues with image picking with this library, it might be more effective to utilize the expo-image-picker library instead.

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