[🐛] Android: Cannot read property 'showImagePicker' of undefined

[DeveloperMCD]

Description

I run the sample code, the app crashes with this error:
Cannot read property 'showImagePicker' of undefined, js engine: hermes

How to repeat issue and example

I run the sample code, the app crashes with this error:
Cannot read property 'showImagePicker' of undefined, js engine: hermes

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

 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({
                filePath: response,
                fileData: response.data,
                fileUri: response.uri,
            });
        }
    });

Solution

App needs to not crash.

Additional Information

    "react-native-image-picker": "^7.1.0",
    "react-native": "0.72.4",

Android
Linux
VSCode

[DeveloperMCD]

To put it simply, another way:

Right before ImagePicker.showImagePicker() I put in a couple console.log's

console.log('ImagePicker:');
console.log(ImagePicker);

Which yields:
ImagePicker:
undefined

WHY is the library "undefined", when I'm clearly loading it properly at the top of my React Native file?

[DeveloperMCD]

Ok, I solved my own problem. I had to look at the code and really dig.

The documentation, getting started guide for this library is TOTALLY useless. You can't even start a blank app and paste in the demo code and get it to work! Observe:

Documentation:
import ImagePicker from 'react-native-image-picker';
ImagePicker.showImagePicker

By that they meant:
import * as ImagePicker from 'react-native-image-picker';
ImagePicker.launchImageLibrary

NOT THE SAME THING. No offense.

[ghost]

const myLaunchCamera = async () => {
    try {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
            {
                title: 'Camera Permission',
                message: 'App needs access to your camera.',
                buttonNeutral: 'Ask Me Later',
                buttonNegative: 'Cancel',
                buttonPositive: 'OK',
            },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            console.log('Camera permission granted');

            const options = {
                mediaType: 'photo',
                quality: 0.7,
            };
        
            launchCamera(options, async (response) => {
                if (response.didCancel) {
                    console.log('Camera launch canceled');
                } else if (response.error) {
                    console.error('Camera launch error', response.error);
                } else {
                    // Handle the captured image (response.uri)
                    console.log(response);


                    // uploadImage(response.uri);
                }
            });


        } else {
            console.log('Camera permission denied');
        }
    } catch (err) {
        console.warn(err);
    }
}