React Native CameraRoll being undefined

Question

This is my function component using react native community camera roll. It's mostly copied from the examples in the readme from github: https://github.com/react-native-cameraroll/react-native-cameraroll

I do use the expo app on my android 11 phone to test and debug the rn app.

import * as React from 'react';
import {PermissionsAndroid, Platform, ScrollView, Image} from 'react-native';
import {Text, View} from "./Themed";
import CameraRoll, {PhotoIdentifier} from '@react-native-community/cameraroll';
import {useState} from 'react';

type CameraRollButtonProps = {}

export default function CameraRollButton({}: CameraRollButtonProps) {
    const [photos, setPhotos] = useState<PhotoIdentifier[]>([]);

    async function hasAndroidPermission() {
        const permission = PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;

        const hasPermission = await PermissionsAndroid.check(permission);
        if (hasPermission) {
            return true;
        }

        const status = await PermissionsAndroid.request(permission);
        return status === 'granted';
    }

    const onPress = async () => {
        if (Platform.OS === "android" && !(await hasAndroidPermission())) {
            return;
        }

        CameraRoll.getPhotos({
            first: 20,
            assetType: 'Photos',
        })
            .then(r => {
                setPhotos(r.edges);
            })
            .catch((err) => {
                console.log("error catched: " + err);
            })
    };

    return (
        <View>
            <Text onPress={onPress}>
                Camera Roll
            </Text>
            <ScrollView>
                {photos.map((p, i) =>
                    <Image
                        key={i}
                        style={{
                            width: 300,
                            height: 100,
                        }}
                        source={{uri: p.node.image.uri}}
                    />
                )}
            </ScrollView>
        </View>
    );
}

When I pressed the button first, I got the permission prompt on which i clicked allow. Then I got this error:

[Unhandled promise rejection: TypeError: Cannot read properties of undefined (reading 'getPhotos')] at node_modules/@react-native-community/cameraroll/js/CameraRoll.js:205:32 in saveToCameraRoll at components/CameraRollButton.tsx:34:19 in onPress

I installed the module via sudo npm i @react-native-community/cameraroll --save. I also tried to execute this line from the readme later: react-native link @react-native-community/cameraroll && npx pod-install. It didn't seem to do anything and as I understood I don't need it as there is auto linking.

I also deleted node_modules and reinstalled everything. Still the same error. I also tried installing the module via expo install.

Answer 1

I'm still not sure what the problem was, but I guess using expo might be a problem. I forgot that expo comes with a lot of modules so I ended up using https://docs.expo.dev/versions/v42.0.0/sdk/media-library/ without any problems.