CODEWITHSUNDEEP
iosreact-native
user30720
user30720

Reputation: 9

Can't read property showImagePicker of undefined in react native iOS

I have tired with this issue

  1. npm install react-native-image-picker@latest --save
  2. react-native link react-native-image-picker

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

const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true
      }
    };


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

          this.setState({
            avatarSource: source,
          });
        }
      });[enter image description here][1]

Upvotes: 0

Views: 1505

Answers (3)

Mauricio Sartori
Mauricio Sartori

Reputation: 2621

I also was dealing with this weird issue for a couple of days, in some threats in Github and some other questions here I could not find a solution that really solved the problem from my side till I found this bizarre but effective one! Here are the steps I followed:

1.- Open Xcode and from your project directory, go to the folder libraries. After that, go and find RNImagePicker and open Products folder.

2.- Go to the Build Phases Tab.

3.- Then drag and drop libRnImagePicker.a to Link Binary With Libraries. This step is the magic one

This step is the magic one, by doing this a missed link relation in your project is going to be generated by this time your project should look like this:

4.- Close your project

5.- Run sudo rm -rf node_modules/.cache

6.- After this, compile your project either with Xcode or with react-native run-ios While the compilation happens and the link dependency gets register it will return an error of cycle dependencies (But this is actually good news, we are almost there!)

7.- Open again the route described in step 1 and remove libRNImagePicker.a by clicking in the minus buttom. enter image description here

8.- Run your project again, and voila! The react-native-image-picker is working! :)

Upvotes: 0

Ron Astle Lobo
Ron Astle Lobo

Reputation: 1314

When you use react-native-link it affects 3 files in your android folder, the build.gradle file (located android/app), the settings.gradle (located android/) and the MainApplication.java file (located android/app/src/java).

Normally while linking, the dependencies don't get applied in build.gradle at times. Therefore check whether the package (react-native-image-picker) is added, if not go ahead and add it as compile project(':react-native-image-picker').

Likewise, check all the other files specified above whether the package is defined.

This is for android (I misunderstood the question as i experienced the same issue and fixed it for android)

Upvotes: 0

Daniel Tadros
Daniel Tadros

Reputation: 2357

You should restart the packager , every time you run link command in order to take effect. Just cancel the running packager and run react-native run-ios again

Upvotes: 2

Related Questions