Uploading image to firebase in react native: undefined is not a function

Question

As the title says, I'm trying to upload Image to firebase in react native. I'm using react-native-image-picker and firebase modules for that. My code goes as: (Only including the "main" parts for clarity)

import ImagePicker from 'react-native-image-picker';
...
//called on pressing a button
onChooseImagePress = async () => {
    let result = await ImagePicker.open({     //error occurs here
        takePhoto: true,
        useLastPhoto: true,
        chooseFromLibrary: true
    });
    if (!result.cancelled) {
        this.uploadImage(result.uri, "test-image")
        .then(() => {
            Alert.alert("Success");
        })
        .catch((error) => {
            Alert.alert(error);
        });
    }        
}

uploadImage = async (uri, imageName) => {
    const response = await fetch(uri);
    const blob = await response.blob();

    var ref = firebase.storage().ref('images').child("userName/" + imageName);
    return ref.put(blob);
}
....

Issue:

I am getting this error: undefined is not a function. Here's a screenshot of the same:

I'm not sure what it even means, since ImagePicker has an open function. Please note that I have provided the desired permissions. So it is not an issue due to that. Please help me resolve this. Thanks...

@Kabir umm no... I haven't done that, like never in my 10-15 days with react native — Ankit Kumar, Aug 03 '19 at 12:52
So follow this link for linking the library:https://aboutreact.com/example-of-image-picker-in-react-native/ — Kabir, Aug 03 '19 at 12:54
@Kabir 1. I'm on version 0.60 of react native, and there, it itself links all these. We don't have to do it manually. 2. I'm still facing the same issue :( — Ankit Kumar, Aug 03 '19 at 13:00
But sometime automatic link give so many error.You can file lots of place of stackoverflow about manual link. — Kabir, Aug 03 '19 at 13:01
You have also option for another library:https://github.com/ivpusic/react-native-image-crop-picker And https://docs.expo.io/versions/latest/sdk/imagepicker/ — Kabir, Aug 03 '19 at 13:03
@Kabir no it didn't give me any issue, was smooth. I'll check the other library. Seems very similiar btw :) — Ankit Kumar, Aug 03 '19 at 13:04
@Kabir it didn't help. Installing this screwed up some dependencies, and I had to rebuild the entire project. Tried again, ended up with the same result — Ankit Kumar, Aug 03 '19 at 13:29
@Kabir I have a button "Upload". I want to use it to upload images from my phone to firebase database. When I press that button, nothing happens, and I get this warning in the bottom of my screen — Ankit Kumar, Aug 03 '19 at 13:33
Not i got what is the issue,Just tell me ,Have you given permission for android or ios? — Kabir, Aug 03 '19 at 13:35
Yes I gave permissions. The error is `undefined is not a function`, and I don't know what is it supposed to mean and why — Ankit Kumar, Aug 03 '19 at 13:36
Ok sure,Just refer this link:https://stackoverflow.com/questions/43983519/react-native-image-picker-undefined-is-not-an-object-evaluating-imagepickerm — Kabir, Aug 03 '19 at 13:39
@Kabir I looked at this link before posting the question. Wasn't helpful to me — Ankit Kumar, Aug 03 '19 at 14:17
Use ImagePicker.showImagePicker(options, response => { console.log('Response = ', response); }); Intend of ImagePicker.open() — Kabir, Aug 03 '19 at 14:34
@SanyamJain I appologise for the late reply. I'm using `react-native-image-picker` — Ankit Kumar, Aug 03 '19 at 17:19

hong developer · Accepted Answer · 2019-08-03T17:38:12.513

Are you using React-native ImagePicker? There is no open in the API document.

API Reference of react-native-image-picker

This is the default example of getting the value of the selected image you want.

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

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.launchImageLibrary(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,
    });
  }
});

It seems to work fine (prints on console at least). I have one query anyways. It gives me two options, choose from library or take pic using camera. I don't want these options. Either take me directly to library, or don't show camera option. Can you please help me with that? — Ankit Kumar, Aug 03 '19 at 17:22
`ImagePicker.launchImageLibrary(options, (response) => { //do something });` This does that. Can you please add this to your answer just for the sake of completeness? Thanks anyway... — Ankit Kumar, Aug 03 '19 at 17:26
@AnkitKumar I see. I modified the code to answer your question. — hong developer, Aug 03 '19 at 17:38

Uploading image to firebase in react native: undefined is not a function

1 Answers1