androidreact-nativereact-native-contacts

TypeError: Cannot read property 'getAll' of null when using react-native-contacts

Problem Statement:

I am trying to use the react-native-contacts library to fetch contacts in my React Native app. However, even after granting the required permission, I encounter the following error:

Permission: granted
(NOBRIDGE) LOG  [TypeError: Cannot read property 'getAll' of null]

Environment:

Code:

Here is my code:

ContactsScreen.tsx:

import React, { useEffect } from 'react';
import Contacts from 'react-native-contacts';
import { View, Text, StyleSheet, PermissionsAndroid } from 'react-native';

const ContactsScreen: React.FC = () => {
    const contacts = () => {
        PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
            title: 'Contacts',
            message: 'This app would like to view your contacts.',
            buttonPositive: 'Please accept bare mortal',
        })
            .then((res) => {
                console.log('Permission: ', res);
                Contacts.getAll()
                    .then((contacts) => {
                        console.log(contacts);
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            })
            .catch((error) => {
                console.error('Permission error: ', error);
            });
    }

    useEffect(() => {
        contacts();
    }, []);

    return (
        <View style={styles.container}>
            <Text>Contacts</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
        backgroundColor: '#f9f9f9',
    },
});

export default ContactsScreen;

AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />

What I Have Tried:

  1. Verified that permissions are granted using the logs.
  2. Cleaned and rebuilt the project using npx react-native run-android.
  3. Checked the react-native-contacts documentation to confirm API usage.
  4. Confirmed that the permissions are listed in the AndroidManifest.xml.
  5. I have even tried cd android && gradlew clean && cd ..

Expected Behavior:

The app should fetch and display contacts after permissions are granted.

Actual Behavior:

Even though the app logs that the permission is granted, it throws the following error:

TypeError: Cannot read property 'getAll' of null

Additional Notes:

Question: Why is the Contacts module returning null for the getAll method? Is there a step I am missing during the setup or configuration? I have to just get access to all contacts, then I will find way to render them in stylish format. Just need to get contacts first. Any answer is appreciated, I am spending almost 2-3 days no result. Thanks all.

Solution

  • After completely rebooting my Windows and starting fresh, I was finally able to resolve the issue I was facing. It turns out that the problem stemmed from the folder structure — specifically, my user name contained a space, which caused issues during the Android Studio installation process. After restoring my system, a new user profile was created without any spaces in the name, which allowed me to successfully follow the React Native CLI documentation for setting up Android Studio.

    Everything is now working perfectly, and I can access my contacts with ease. If you're running into a similar issue, I highly recommend trying this solution! Simply restore your system or create a new user without spaces in the username, and you should be good to go. It worked wonders for me, and I hope it helps you too!