CODEWITHSUNDEEP
javascriptreact-nativeuiimagepickercontrollerreactjs
Jo Ko
Jo Ko

Reputation: 7575

React Native Image Picker: Cannot read property 'showImagePicker' of undefined

I'm following the example exactly as shown in https://github.com/marcshilling/react-native-image-picker using react-native-image-picker, via terminal with react-native run-ios and coding via Atom editor.

I did npm install react-native-image-picker@latest --save and currently the dependency in package.json shows: "react-native-image-picker": "^0.22.8",

And I clicked a button to trigger the imagePicker but I am getting the error: Cannot read property 'showImagePicker' of undefined.

What am I doing wrong?

Here is the code

import ImagePicker from 'react-native-image-picker'
var Platform = require('react-native').Platform

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

export default class chooseImage extends Component {
  constructor() {
    super()

    this.state = {
      avatarSource: "",
    }
  }

  _uploadImage() {
    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 {
        // You can display the image using either data...
        const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};

        // or a reference to the platform specific asset location
        if (Platform.OS === 'ios') {
          const source = {uri: response.uri.replace('file://', ''), isStatic: true};
        } else {
          const source = {uri: response.uri, isStatic: true};
        }

        this.setState({
          avatarSource: source
        })
      }
    })
  }

  render() {

    return (
      <View style={styles.container}>
          <TouchableHighlight
            onPress={this._uploadImage}
            underlayColor='transparent'
          >
            <Image
              source={this.state.avatarSource} style={styles.uploadAvatar}
            />
          </TouchableHighlight>
      </View>
    )
  }
}

EDIT

When I console.log(ImagePicker)

enter image description here

Upvotes: 5

Views: 16684

Answers (12)

wezzy
wezzy

Reputation: 5935

I had the same problem and in iOS it was due to the permission missing, even in the simulator. See the permissions here:

https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md

I just missed "NSPhotoLibraryAddUsageDescription" and it was enough to get the "Cannot read property 'showImagePicker' of undefined" error.

Upvotes: 0

Sai kiran
Sai kiran

Reputation: 366

As per your first comment you mentioned that you are not using Xcode you are using Atom and Terminal. In most of the cases only npm install will be enough but there are some platform specific cases that can be achieved either by linking it using react-native link or by following the manual installation steps provided in the document. if you are not using Xcode then its not possible for you to link this library completely for IOS platform. Make sure you use Xcode and follow the manual steps or else react-native link to solve your issue.

Upvotes: 0

fahad tufail
fahad tufail

Reputation: 615

If you are using xcode and getting this error on simulator or real device make sure after installing and react link command you follow manual instructions. as described ie.

In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> .

Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

Add RNImagePicker.a to Build Phases -> Link Binary With Libraries For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions. Note. = RNImagePicker.a is now libRNImagePicker.a and make sure you add this in your project build phase the lib's build phase itself.

Then you may compile and run it.

Upvotes: 0

Rishav Kumar
Rishav Kumar

Reputation: 5450

Note : After installation you have to restart the project as react-native run-ios or react-native run-android

May be u installed the picker but didn't restart the packager

: )

Upvotes: 0

Elmatsidis Paul
Elmatsidis Paul

Reputation: 465

I have been working for hours to solve this problem! Finally after adding correctly these lines in MainApplication.java it worked as a charm. Do not forget to rebuild the project.

enter image description here

Upvotes: 1

Asanka Sampath
Asanka Sampath

Reputation: 583

/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Upvotes: 3

akaMahesh
akaMahesh

Reputation: 381

If you are using xcode and getting this error on simulator or real device make sure after installing and react link command you follow manual instructions. as described ie.

  1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> .

  2. Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj

  3. Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
  4. For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.

Note. = RNImagePicker.a is now libRNImagePicker.a and make sure you add this in your project build phase the lib's build phase itself.

Then you may compile and run it.

Upvotes: 0

theberbie
theberbie

Reputation: 94

Rebuilding your app will just mean you'll get the same error.

You need to go through Xcode for iOS and edit your settings.gradle manually for this to work:

https://github.com/react-community/react-native-image-picker

You don't need to do the steps for both Android and iOS, but the steps outlined for either platform are crucial

So unless you have already executed react-native link, you will need to go through each numbered steps and make sure your binaries are properly linked.

Upvotes: 0

Samiksha Jagtap
Samiksha Jagtap

Reputation: 603

Rebuild your app. Run the command react-native run-ios and react-native run-android.

Upvotes: 0

chiquyet
chiquyet

Reputation: 537

Hi there are few things that you can try: Run react-native link

Make sure you already completed this step http://prntscr.com/hftr17

If not: your last chance is remove completely your code. Clone a new one.

I was successfully make it work by follow those.

Hope it can give you something.

Upvotes: 0

nadavvadan
nadavvadan

Reputation: 4190

cannot read property y of undefined means you have a statement x.y such that x is undefined. in this case, x is ImagePicker. My best guess is that your import statement causes the issue. try this:

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

instead of

import ImagePicker from 'react-native-image-picker'

Which is also what the example suggests.

if you want to stick with the import statement,

try this:

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

Which imports the module as ImagePicker and puts it inside the scope. For more info, see: MDN on import statement

Upvotes: 1

David Schumann
David Schumann

Reputation: 14793

it seems like IMagePicker is not defined.

Have you tried using

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

instead of the first line?

Upvotes: 0

Related Questions