Using the Google contacts Library API your app can read and write the contacts in Google Contacts or you can use them as a contact list in your application.
To integrate google contacts in the react-native application you first need to install the react-native google-signin library.
Installation
npm install --save @react-native-community/google-signin
Linking
in RN >= 0.60 you should not need to do anything
in RN < 0.60 run react-native link react-native-google-signin
To set up for android and iOS follow the Android guide and iOS guide
Usage
import React, { Component } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import {
GoogleSignin,
statusCodes,
} from '@react-native-community/google-signin';
export default class GoogleContacts extends React.Component
constructor(props) {
super(props);
this.state={
accessToken:null,
data:[],
};
}
componentDidMount(){
this.configureGoogleSignIn();
this.googleLogin();
}
configureGoogleSignIn(){ //It is mandatory to call this method before attempting to call signIn()
GoogleSignin.configure({
scopes: [
"openid",
"email",
"profile",
"https://www.google.com/m8/feeds",
],
androidClientId:ANDROID_CLIENT_ID,//your android client id from google console
iosClientId:IOS_CLIENT_ID,// ios client id from google console
offlineAccess: false,
hostedDomain: '',
accountName:''
})
}
googleLogin=async(type)=>{ //function to sign in google account
try {
await GoogleSignin.hasPlayServices(
{showPlayServicesUpdateDialog: true}
);
const userInfo = await GoogleSignin.signIn();
const token = await GoogleSignin.getTokens();
this.setState({accessToken:token.accessToken});
this.getGoogleContacts(token.accessToken);
} catch (error) {
console.log("error in sign in ");
console.log(error);
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
// sign in was cancelled
console.log('cancelled');
} else if (error.code === statusCodes.IN_PROGRESS) {
// operation in progress already
console.log('in progress');
}
else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log('play services not available or outdated');
} else {
console.log('Something went wrong');
console.log(error.toString());
}
}
}
transformRequest(obj){ //function to set query parameters
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
async getGoogleContacts(accessToken){ //function to get google contacts using token from google sign in
const ACCESS_TOKEN = accessToken;
let params={
"alt":"json",
};
let url="https://www.google.com/m8/feeds/contacts/default/full?"; //api url to get google contacts provided by google
var suburl=this.transformRequest(params);
url=url+suburl;
return fetch(url,
{
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + ACCESS_TOKEN,
},
})
.then((response) => {
return response.json()
})
.then((responseJson) => {
console.log("responseJson=",responseJson);
})
.catch((error) => {
console.log("An error occurred.Please try again",error);
return error;
});
}
Result: Here I am printing the contact list array in console log but you can use it in your application according to your requirement.
StudySection gives an opportunity to beginners and experts in .NET framework to go through StudySection’s .NET Certification Exam and get a .NET certification for enhancement of career in programming. If you have knowledge of the .NET framework then you can get a certificate through an online exam at StudySection.
