Cannot read property 'launchImageLibrary' of undefined react-native-image-picker

Question

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.

Maurene

Same issue! Haven't found any solution yet myself despite hours of trying – Blanc

Answer 1

Importing it like this solved my issue;

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

Electrostriction

Answer 2

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

Bucovina

Answer 3

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')

Ecliptic

Answer 4

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

Zinnes

The OP asked about React Native, however I'm working with Expo and this was the issue - So have upvoted – Beitch

Answer 5

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);
      // }
    });
  };

Base

Answer 6

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) => {

Dialectology

Answer 7

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.

Tessietessier

Welcome to Stack Overflow! Thank you for your answer. Please provide more details about your solution. Code snippets, high quality descriptions, or any relevant information would be great. Clear and concise answers are more helpful and easier to understand for everyone. Edit your answer with specifics to raise the quality of your answer. For more information: How To: Write good answers. Happy coding! – Hindu

Answer 8

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

Optimism