Possible Unhandled Promise Rejection in react-native-image-picker

Question

I am trying to implement image uploading in a flash cards app but I keep getting this error: Possible Unhandled Promise Rejection (id: 8):
TypeError: Cannot read property 'launchImageLibrary' of nullTypeError: Cannot read property 'launchImageLibrary' of null. I am using the following packages:

"react": "^18.2.0"
"react-native": "0.72.1"
"react-native-image-picker": "^5.6.0"

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const Flcard = () => {
  const [selectedImage, setSelectedImage] = useState('');

  const openImagePicker = () => {
    let options = {
      mediaType: 'photo', // Specify the media type to allow only images
      quality: 1, // 1 = maximum quality, 0 = lowest quality
    };

//The console.log and the variable xc are only used for debugging purposes.
// it should just be: launchImageLibrary(options, response => {....}




    let xc = launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.errorCode) {
        console.log('ImagePicker Error:', response.errorCode);
      } else if (response.assets && response.assets.length > 0) {
        // We use assets to support multiple image selection, but we'll only consider the first image here
        setSelectedImage(response.assets[0].uri);
      }

    });

    console.log(setSelectedImage(response.assets[0].uri))

  };

  return (
    <View style={styles.container}>
      {selectedImage ? (
        <Image source={{ uri: selectedImage }} style={styles.image} />
      ) : (
        <Text style={styles.noImageText}>No Image Selected</Text>
      )}

      <TouchableOpacity onPress={openImagePicker} style={styles.button}>
        <Text style={styles.buttonText}>Select Image</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  image: {
    width: 200,
    height: 200,
    marginBottom: 20,
  },
  noImageText: {
    fontSize: 18,
    marginBottom: 20,
  },
  button: {
    width: 250,
    height: 60,
    backgroundColor: '#3740ff',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 4,
    marginBottom: 12,
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 15,
    color: '#fff',
  },
});

export default Flcard;

I have tried to print the results of the launchimageLibrary function and I have found the following:

LOG: {"_h": 0, "_i": 2, "_j": [TypeError: Cannot read property 'launchImageLibrary' of null], "_k": null, "_o": 8}.

Unfortunately, as my experience with javascript remains minimal i don't understand what the object '_j' refers to or how to solve the issue here.

Possible Unhandled Promise Rejection in react-native-image-picker

0 Answers0