Google-signin: Change text on button.

Created on 1 Mar 2017  路  2Comments  路  Source: react-native-google-signin/google-signin

Is there any way that we can change the text on the sign in button? Can we have custom text?

Most helpful comment

import React, { Component, PropTypes } from 'react'
import { Text, View, TouchableOpacity, Image } from 'react-native'
import { Icon } from 'native-base'
import { GoogleSignin } from 'react-native-google-signin'
import styles from './GmailLoginViewStyle'
import { Fonts, Images } from '../../theme';
import { loginWithSocial } from '../../redux/modules/auth'
export default class GmailLoginView extends Component {

  static contextTypes = {
    store: PropTypes.object
  };

  googleLogIn = () => {
    GoogleSignin.hasPlayServices({ autoResolve: true }).then(() => {
      console.log('Play services active');
      GoogleSignin.configure({
        iosClientId: 'xxxx',
        webClientId: 'xxxx',
        offlineAccess: false
      })
        .then(() => {
          GoogleSignin.signIn()
            .then((user) => {
              console.log('user==>> : ',user);
              this.setState({user: user});
              const { store: { dispatch } } = this.context;
              if(user.photo === null){
                console.log('login without picture');
                dispatch( loginWithSocial({
                  username: user.email,
                  token: user.id,
                  provider: 'google'
                }));
              }else {
                console.log('login with picture')
                dispatch(loginWithSocial({
                  username: user.email,
                  token: user.id,
                  provider: 'google',
                  imageUrl: user.photo
                }));
              }
            })
            .catch((err) => {
              console.log('WRONG SIGNIN', err);
            })
            .done();
        });
    })
      .catch((err) => {
        console.log('Play services error', err.code, err.message);
      });
  };


  render() {
    return (
      <TouchableOpacity style={styles.googleLoginButtonStyle} onPress={this.googleLogIn}>
        <View style={styles.googleLoginViewStyle}>
          <View style={styles.googleIconViewStyle}>
            <Image resizeMode="contain" style={{ height: 26, width: 26 }} source={Images.googleicon} />
          </View>
          <View style={styles.googleTextViewStyle}>
            <Text style={styles.googleLoginbuttonTexStyle}>Google</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

I Hope, it will work for you :)

All 2 comments

import React, { Component, PropTypes } from 'react'
import { Text, View, TouchableOpacity, Image } from 'react-native'
import { Icon } from 'native-base'
import { GoogleSignin } from 'react-native-google-signin'
import styles from './GmailLoginViewStyle'
import { Fonts, Images } from '../../theme';
import { loginWithSocial } from '../../redux/modules/auth'
export default class GmailLoginView extends Component {

  static contextTypes = {
    store: PropTypes.object
  };

  googleLogIn = () => {
    GoogleSignin.hasPlayServices({ autoResolve: true }).then(() => {
      console.log('Play services active');
      GoogleSignin.configure({
        iosClientId: 'xxxx',
        webClientId: 'xxxx',
        offlineAccess: false
      })
        .then(() => {
          GoogleSignin.signIn()
            .then((user) => {
              console.log('user==>> : ',user);
              this.setState({user: user});
              const { store: { dispatch } } = this.context;
              if(user.photo === null){
                console.log('login without picture');
                dispatch( loginWithSocial({
                  username: user.email,
                  token: user.id,
                  provider: 'google'
                }));
              }else {
                console.log('login with picture')
                dispatch(loginWithSocial({
                  username: user.email,
                  token: user.id,
                  provider: 'google',
                  imageUrl: user.photo
                }));
              }
            })
            .catch((err) => {
              console.log('WRONG SIGNIN', err);
            })
            .done();
        });
    })
      .catch((err) => {
        console.log('Play services error', err.code, err.message);
      });
  };


  render() {
    return (
      <TouchableOpacity style={styles.googleLoginButtonStyle} onPress={this.googleLogIn}>
        <View style={styles.googleLoginViewStyle}>
          <View style={styles.googleIconViewStyle}>
            <Image resizeMode="contain" style={{ height: 26, width: 26 }} source={Images.googleicon} />
          </View>
          <View style={styles.googleTextViewStyle}>
            <Text style={styles.googleLoginbuttonTexStyle}>Google</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

I Hope, it will work for you :)

Sorry to write on this post, but I need to know where found these imports:

import styles from './GmailLoginViewStyle'
import { Fonts, Images } from '../../theme';

Thank you

Was this page helpful?
0 / 5 - 0 ratings