Author - StudySection Post Views - 20 views
native

Google contacts in React-native

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.

Leave a Reply

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