Hello! and Welcome to login with google in react-native in android. In this post, I will login with google access login user email, name, and profile photo etc. A complete step by step guide. So follow step by step for google login.
Let’s begin!
I have used react-native-google-signin library.
Step 1:- Create new project from following command.
react-native init googleMailLogin
Note:- I have named with googleMailLogin. You can create project with your own named.
Step 2:- Install and link react-native-google-signin.
npm install react-native-google-signin --save react-native link react-native-google-signin
Step 3:- Project Configuration.
- Go to google developer account from here.
- Sign in with your google account if you are not singed in.
- Scroll down and click button GET A CONFIGURATION FILE.
- When you click om button GET A CONFIGURATION FILE, new webpage appear. Here, You can select or create new app. Enter app name and package name of your app.
After enter project package, select your country. - On selecting your country, GET A CONFIGURATION FILE button will be enable. Click this button.
- For Google Sign-In, you will need to provide SHA-1 of signing certificate.
- Click link How do I find my SHA-1? If you are using select tab which platform you are using. If you are using Mac/Linux then select Mac/Linux tab and if you are using window platform select tab window.
- Copy the command and run on terminal. It will require password, by default password is android .
- Copy to SHA 1 key from terminal and paste there, GET A CONFIGURATION FILE will be enable. Just download that file (google-services.json). and paste inside the <YOUR_PROJECT_ROOT>/android/app.
Step 4:- Replace code of your index.js with following code. (Make sure you change name googleMailLogin with your project name ).
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('googleMailLogin', () => App);
Step 5:- Replace code of App.js.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
} from 'react-native';
import {GoogleSignin, GoogleSigninButton} from 'react-native-google-signin';
import styles from './style';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
user: null,
imageProfile: "",
userEmail: '',
};
}
componentDidMount() {
this._setupGoogleSignin();
}
render() {
if (!this.state.user) {
return (
<View style={styles.container}>
<GoogleSigninButton style={styles.googleButtonStyles}
color={GoogleSigninButton.Color.Light}
size={GoogleSigninButton.Size.Icon}
onPress={() => { this.onGoogleSignInButton(); }}
/>
</View>
);
}
if (this.state.user) {
console.log(this.state.user.photo)
return (
<View style={styles.container}>
<Text style={styles.title}>This is basic example to login with google in react-native</Text>
<Image source={{ uri : this.state.user.photo}} style={styles.userPhoto}/>
<Text style={styles.subTitleText}>Welcome Mr. {this.state.user.name}</Text>
<Text>Your loged email is: {this.state.user.email}</Text>
<TouchableOpacity onPress={() => {this.onGoogleSignOut(); }}>
<View style={styles.logoutButton>
<Text>Log out</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
async _setupGoogleSignin() {
try {
await GoogleSignin.hasPlayServices({ autoResolve: true });
await GoogleSignin.configure({
webClientId: "Your webClientId',
offlineAccess: true
});
const user = await GoogleSignin.currentUserAsync();
console.log("userDetais",user);
this.setState({user});
}
catch(err) {
console.log("There are any error", err.message);
}
}
onGoogleSignInButton() {
GoogleSignin.signIn()
.then((user) => {
console.log("userDetais", user);
this.setState({user: user});
})
.catch((err) => {
console.log('There are some error', err);
})
.done();
}
onGoogleSignOut() {
GoogleSignin.revokeAccess().then(() => GoogleSignin.signOut()).then(() => {
this.setState({user: null});
})
.done();
}
}
Step 6:- Make a new file style.js in same directory. and replace with following code.
import {
StyleSheet,
Dimensions,
} from 'react-native';
import * as color from '../../utils/color';
const { height, width } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
name: {
fontSize: 20,
fontWeight: '500',
color: '#fff',
},
category: {
fontSize: 17,
fontWeight: '500',
color: 'red',
},
googleButtonStyles: {
width: 120,
height: 44
},
subTitleText: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 20,
},
rating: {
marginTop: 5,
marginLeft: 10,
fontSize: 15,
fontWeight: '500',
color: '#fff',
},
radio: {
flexDirection: 'row',
justifyContent: 'space-around',
marginTop: 30,
alignSelf: 'center',
},
responseView: {
backgroundColor: '#fff',
height: height / 2.2,
width: width / 1.15,
alignSelf: 'center',
marginTop: height / 4,
borderRadius: 10,
},
responseTitleText: {
fontSize: 18,
fontWeight: 'bold',
},
title: {
fontSize: 16,
color: '#000',
},
userPhoto: {
height: 100,
width: 100,
},
logoutButton: {
marginTop: 50,
},
modalView: {
width: width / 1.15,
alignSelf: 'center',
marginTop: height / 4,
marginBottom: width / 2,
borderRadius: 10,
alignItems: 'center',
backgroundColor: '#fff',
borderColor: 'transparent',
},
responseTitle: {
},
response: {
margin: 20,
},
responsefinalView: {
alignSelf: 'center',
width: width / 1.3,
borderRadius: 0,
justifyContent: 'center',
marginTop: width / 8,
},
crossIcon: {
height: 30,
width: 30,
marginTop: -12,
position: 'absolute',
},
messageView: {
justifyContent: 'center',
},
crossView: {
color: '#fff',
},
backIconButton: {
marginRight: -20,
marginTop: -5,
},
titleText: {
color: '#fff',
fontSize: width / 23,
marginLeft: 10,
},
titleTextView: {
width: width / 2,
},
});
module.exports = styles;
Now, run the project using react-native run-android in android.
Feel free to comment if there is any issue.
Thank you.
Feel free to comment if there is any issue.
Thank you.
you are in reality a excellent webmaster. it seems that you’re doing any distinctive trick. Also, The contents are masterpiece. you have performed a wonderful task on this subject!
Heya i’m for the first time here. I found this board and I to find It truly helpful & it helped me out a lot. I hope to provide something back and aid others such as you helped me.
Just wanna input on few general things, The website layout is perfect, the articles is very superb : D.
Great post. I was checking constantly this blog and I’m impressed!
Extremely helpful information particularly the closing phase 🙂 I maintain such info a lot.
I was looking for this certain info for a long time. Thank you
and best of luck.