Ad

Uploading Image To Firebase In React Native: Undefined Is Not A Function

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:

enter image description here

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...

Ad

Answer

Are you using React-nativeImagePicker? 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,
    });
  }
});
Ad
source: stackoverflow.com
Ad