Google SignIn from Reactive Native giving TypeError - Expo

Question

I am trying to create a simple React Native app with Google OAuth Login. I have created credentials in google and inputted the same in the app.js file.

The app starts in the android emulator and when i click sign in with google it gives the error in console:

"error [TypeError: undefined is not an object (evaluating '_expo.default.Google')]"

I have no idea how to solve this.

This is my app.js

import React from "react"
import { StyleSheet, Text, View, Image, Button } from "react-native"
import Expo from "expo"

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      signedIn: false,
      name: "",
      photoUrl: ""
    }
  }
  signIn = async () => {
    try {
      const result = await Expo.Google.logInAsync({
        androidClientId:
          "**********",
        //iosClientId: YOUR_CLIENT_ID_HERE,  <-- if you use iOS
        scopes: ["profile", "email"]
      })

      if (result.type === "success") {
        this.setState({
          signedIn: true,
          name: result.user.name,
          photoUrl: result.user.photoUrl
        })
      } else {
        console.log("cancelled")
      }
    } catch (e) {
      console.log("error", e)
    }
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.signedIn ? (
          <LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} />
        ) : (
          <LoginPage signIn={this.signIn} />
        )}
      </View>
    )
  }
}

const LoginPage = props => {
  return (
    <View>
      <Text style={styles.header}>Sign In With Google</Text>
      <Button title="Sign in with Google" onPress={() => props.signIn()} />
    </View>
  )
}

const LoggedInPage = props => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome:{props.name}</Text>
      <Image style={styles.image} source={{ uri: props.photoUrl }} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  header: {
    fontSize: 25
  },
  image: {
    marginTop: 15,
    width: 150,
    height: 150,
    borderColor: "rgba(0,0,0,0.2)",
    borderWidth: 3,
    borderRadius: 150
  }
})

Any help , suggestions ?

Thanks a lot !

Answer 1

This example from the docs no longer works as a result of changes made in the latest versions of expo CLI.

The Google app auth package has been moved to a standalone package - expo-google-app-auth and as a result, you need to import the Google object from that package.

below are some steps to make sure you are referencing the correct package

• make sure that the expo-google-app-auth is installed (you can use expo install expo-google-app-auth )
• then you should import the Google object using: import * as Google from 'expo-google-app-auth'
• then you can use the logInAsync() function like so:

  ...
  const result = await Google.logInAsync({
  ...
  })