使用Expo通过React Native登录Google+

Question

I'm trying to implement a Sign In to Google from a React-native app. I found this question where someone give a way to do it, but is not working anymore or I'm doing something wrong.

My code is this one:

App.js

"use strict";
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LoginGoogle } from './src/components/Login.js';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open uuuup App.js ehh to start working on your app!</Text>
        <LoginGoogle/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Login.js

"use strict";
import React, { Component } from 'react';
import Expo from 'expo';
import Button from 'react-native';
import { Text, View } from 'react-native';

class LoginGoogle extends Component {    

  signInWithGoogleAsync = async () => {
    try {
      const result = await Expo.Google.logInAsync({
        androidClientId: process.env.GOOGLE_ANDROID_CLIENT_ID,
        iosClientId: process.env.GOOGLE_IOS_CLIENT_ID,
        scopes: ['profile'],
      })

      if (result.type === 'success') {
        return result
      }
      return { cancelled: true }
    } catch (e) {
      return { error: e }
    }
  }


  onLoginPress = async () => {
    const result = await this.signInWithGoogleAsync()
    // if there is no result.error or result.cancelled, the user is logged in
    // do something with the result
  }

    render() {
      return (<Button onPress={this.onLoginPress}>Login</Button>)
    }
}

export default LoginGoogle;

When this is compiled, it says the following error:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefinded. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

I already found when this error generally happen as states this other question . I already try importing LoginGoogle with and without curly braces, but without luck.

Any idea on what could be happening here? I know that if I put only a Text in LoginGoogle.js and import it from App.js works like a charm, so probably it has something to do with the functions that are related to Google Sign In, but it's a guess, I could be wrong.

Answer 1

You only need to change this line:

import { LoginGoogle } from './src/components/Login.js';

to

import LoginGoogle from './src/components/Login.js';

The first line would work if you exported Login like this:

export {LoginGoogle}

and not

export default LoginGoogle;