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

See original GitHub issue

Description

Not able to properly use plugin because is throwing error undefined when calling launchCamera or launchImageLibrary

How to repeat issue and example

  • Added plugin thru yarn add react-native-image-picker
  • Perfomed pod install @ ios directory
  • Add configs to Info.plist as described in plugin’s docs.
  • Code written as below

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


const ImageUpload: React.FC<any> = ({}) => {
    const [response, setResponse] = React.useState(null);

    function showMessage() {
        Alert.alert("Alert", "Choose an option", [
            {
                text: 'Back',
                onPress: () => {},
            },
            {
                text: 'Camera',
                onPress: () => openCamera(),
            },
            {
                text: 'Library',
                onPress: () => openLibrary()
            },
        ]);
    }

    const openLibrary = () => {
        launchImageLibrary(
            {
              mediaType: 'photo',
              includeBase64: false,
              maxHeight: 200,
              maxWidth: 200,
            },
            (response) => {
                console.log(response);
            //   setResponse(response);
            },
          )
    }

    const openCamera = () => {
        launchCamera(
            {
              mediaType: 'photo',
              includeBase64: false,
              maxHeight: 200,
              maxWidth: 200,
            },
            (response) => {
                console.log(response);
            //   setResponse(response);
            },
          )
    }

    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;

Solution

Clarification on steps to properly install plugin.

Additional Information

  • Image Picker version: "react-native-image-picker": "^3.3.4"
  • React Native version: "react-native": "0.63.2"
  • Platform: iOS
  • Development Operating System: Mac OS Catalina
  • Dev tools: [Xcode 12.1]

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
Johan-dutoitcommented, Apr 28, 2021

As with all native modules, after an install, you’ll have to rebuild your project (sometimes even restart the packager).

i.e. react-native run-ios or react-native run-android

Alternatively open your project in xcode/android studio and run it from therre.

2reactions
annajun1224commented, Apr 28, 2021

Same issue here. I’m using typescript

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeError: Cannot read property 'launchImageLibrary' of ...
ERROR I have problem using this lib, how to fix it ? ... TypeError: Cannot read property 'launchImageLibrary' of undefined, js engine: v8...
Read more >
Cannot read property 'launchImageLibrary' of undefined react ...
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 ......
Read more >
How to use the react-native-image-picker.launchImageLibrary ...
To help you get started, we've selected a few react-native-image-picker.launchImageLibrary examples, based on popular ways it is used in public projects.
Read more >
typeerror: cannot read properties of null (reading 'image')
Error i get when i submit form without uploading image: TypeError: Cannot read property 'image' of null. from error statement the problems seems...
Read more >
ImagePicker - Expo Documentation
The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found