Google Sign In Button Branding Styles in Expo

user_799342 0
Viewed 2447

I have followed this expo-google-app-auth and using the authentication in the react native app. 

const { type, accessToken, user } = await Google.logInAsync(config);

With this, I am taking accessToken and passing it to the node.js which has firebase integration

var credential = firebase.auth.GoogleAuthProvider.credential(id_token);

Everything works fine here, now my question is I want to use the GoogleSignIn Branding Button. For me, just the normal button is sufficient enough without any google library for adding button. Is there any styles alone to integrate it into the normal button?

google-signin expo react-native
2 Answers

As per my knowledge, expo doesn't provide branded google sign in button like react-native-cli. But you can use react-native-elements library. There is a built in component with the name social icon and you just need to pass google as type. More explanation can be found here.

thanks

user_14073780

As the other answer mentioned, expo doesn't have a built-in branded Google Sign-In button.

My strategy was to use an Icon button, which is found in the @expo/vector-icons package. FontAwesome5 has a Google icon, and this gives you an easy and customizable way to create a button that matches the branding.

Assuming you're already importing and using basic react-native functions like Text, your code might look something like this:

import { FontAwesome5 } from '@expo/vector-icons';

// your code... 

<FontAwesome5.Button style={styles.googleButton} name="google" onPress={() => this.googleLogIn()}
        //any other customization you want, like borderRadius, color, or size
>
  <Text style={styles.googleText}>Log In With Google</Text>
</FontAwesome5.Button>

Here is the relevant section in the documentation: https://docs.expo.io/guides/icons/#button-component

By the way, it doesn't matter if you use FontAwesome or FontAwesome5 or Ionicons or any other Icon library included in @expo/vector-icons. They all have this button component. You can see the list of Icons here: https://icons.expo.fyi/

user_139096330
Related