Example of React Native Contacts – Show Device Contacts in RN

Hello friends, It’s been few days since I am trying to run the React Native Contacts NPM package in my react native project. But It showing me same error again and again and not run properly. So I start reading their GitHub documentation and found out that the latest version of package does not work properly with latest version of react native. But the version 5.2.3 is Stable and works properly in both Android and iOS devices. So we’re using the older version in our tutorial. Now what we are doing in our tutorial is, We would access the android and iOS device contacts and show them into FlatList component. User can also Edit and Delete contacts. So in this tutorial we would learn about Example of React Native Contacts – Show Device Contacts in RN.

Contact in this project Example of React Native Contacts – Show Device Contacts in RN :-

1. First of all we have to install the React Native Contacts NPM package in our project. So open your RN project in Command Prompt in Windows and Terminal in MAC and execute below command.

Screenshot After done installation :-

Now the package is successfully installed in our project. Next step is to start configuring it in both Android and iOS. Read all the below steps carefully.

2. Configure React Native Contacts in Android :-

1. In android we have to perform only 1 Step to setup the contacts package. Go to Your-React-Native-Project -> android -> app -> src -> main -> AndroidManifest.xml file. Now add both permission.

AndroidManifestSource Code of my AndroidManifest.xml file :-

2. Now we have to clear the App gradle and built it again.

3. Configure React Native Contacts in iOS :-

1. Go to Your-React-Native-Project -> iOS -> appName.xcodeproj file in XCode.

2. Select Your-App-Name -> Info .

3. Click on the Plus + Button .

4. Select Privacy – Contact Usages Description Permission from List and add it.

5. Now we have to install the PODS to link the package. Execute the below command.

Here you go. Now your react native iOS project is ready to use.

4. Start Coding for App :-

1. Open your project’s main App.js file and import useState, useEffect, FlatList, StyleSheet, PermissionsAndroid, Text, View, Platform, Alert, TouchableOpacity and PropTypes component.

2. Import Contacts component from ‘react-native-contacts’ package.

3. Creating a Constant stand alone component named as CustomItem with Props. We would use this component to render Items from Contact List into our main FlatList.

4. Creating our main Export default App component.

5. Creating a State named as contacts with State update method setContacts. We would use this State to store accessed contacts.

6. Creating useEffect() method, Now in the method we would First Ask for Permission for Android and iOS devices then call the accessContacts() function to fetch contacts from device.

7. Creating the accessContacts() method. In this function we would Access the device contacts and store them into contacts State.

8. Creating a function openContact(). In this function we would simply open the Selected contact into Edit view.

9. Creating a function itemSeparator(). We would use this function to render horizontal divider line between each item in Flat List.

10. Creating return() block, Here we would make our main FlatList component.

11. Now we have to declare the default Prop types for our CustomItem component.

12. Creating Style.

13. Complete Source Code for App.js file :-

Screenshot in iOS :-

Example of React Native Contacts - Show Device Contacts in RN Screenshot in iOS device :-

Example of React Native Contacts - Show Device Contacts in RN

Leave a Reply

Your email address will not be published. Required fields are marked *