[Unimodule] expo-google-sign-in

android/expoview/build.gradle

@@ -170,6 +170,7 @@ dependencies {
   api project(':expo-image-loader-interface')
   api project(':expo-gl')
   api project(':expo-gl-cpp')
+  api project(':expo-google-sign-in')
   api project(':expo-sms')
   api project(':expo-print')
   api project(':expo-media-library')

android/expoview/src/main/java/versioned/host/exp/exponent/ExponentPackage.java

@@ -32,6 +32,7 @@
 import expo.modules.facedetector.FaceDetectorPackage;
 import expo.modules.filesystem.FileSystemPackage;
 import expo.modules.gl.GLPackage;
+import expo.modules.google.signin.GoogleSignInPackage;
 import expo.modules.location.LocationPackage;
 import expo.modules.medialibrary.MediaLibraryPackage;
 import expo.modules.permissions.PermissionsPackage;
@@ -108,6 +109,7 @@ public class ExponentPackage implements ReactPackage {
       new FaceDetectorPackage(),
       new ConstantsPackage(),
       new GLPackage(),
+      new GoogleSignInPackage(),
       new PermissionsPackage(),
       new SMSPackage(),
       new PrintPackage(),

android/settings.gradle

@@ -46,6 +46,7 @@ def includeUniversalModule = { name ->
   'expo-font-interface',
   'expo-gl',
   'expo-gl-cpp',
+  'expo-google-sign-in',
   'expo-image-loader-interface',
   'expo-local-authentication',
   'expo-location',

apps/native-component-list/components/GoogleSignInButton.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+const googleIcon = {
+  uri:
+    'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png',
+};
+
+export default class GoogleSignInButton extends React.PureComponent {
+  static defaultProps = {
+    onPress() {},
+  };
+  render() {
+    const { children, style, ...props } = this.props;
+    return (
+      <TouchableOpacity
+        activeOpacity={0.6}
+        style={StyleSheet.flatten([styles.touchable, style])}
+        {...props}>
+        <View style={styles.content}>
+          <Image source={googleIcon} style={styles.icon} />
+          <Text style={styles.text}>{children}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  touchable: {
+    shadowOpacity: 0.2,
+    shadowRadius: 1.5,
+    shadowOffset: { width: 0, height: 1 },
+    overflow: 'visible',
+    shadowColor: 'black',
+    backgroundColor: 'white',
+    borderRadius: 4,
+  },
+  content: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  icon: { width: 24, aspectRatio: 1 },
+  text: { color: 'gray', marginLeft: 12, fontSize: 16, fontWeight: '600' },
+});

apps/native-component-list/constants/Icons.js

@@ -10,7 +10,8 @@ export default {
   FileSystem: require('../assets/icons/api/FileSystem.png'),
   Geocoding: require('../assets/icons/api/Geocoding.png'),
   GL: require('../assets/icons/api/GL.png'),
-  GoogleLogin: require('../assets/icons/api/GoogleLogin.png'),
+  Google: require('../assets/icons/api/GoogleLogin.png'),
+  GoogleSignIn: require('../assets/icons/api/GoogleLogin.png'),
   Haptic: require('../assets/icons/api/Haptic.png'),
   ImagePicker: require('../assets/icons/api/ImagePicker.png'),
   KeepAwake: require('../assets/icons/api/KeepAwake.png'),

apps/native-component-list/navigation/MainTabNavigator.js

@@ -24,7 +24,8 @@ import FacebookLoginScreen from '../screens/FacebookLoginScreen';
 import GestureHandlerPinchScreen from '../screens/GestureHandlerPinchScreen';
 import GestureHandlerListScreen from '../screens/GestureHandlerListScreen';
 import GestureHandlerSwipeableScreen from '../screens/GestureHandlerSwipeableScreen';
-import GoogleLoginScreen from '../screens/GoogleLoginScreen';
+import GoogleScreen from '../screens/GoogleScreen';
+import GoogleSignInScreen from '../screens/GoogleSignInScreen';
 import RemindersScreen from '../screens/RemindersScreen';
 import SensorScreen from '../screens/SensorScreen';
 import GeocodingScreen from '../screens/GeocodingScreen';
@@ -128,7 +129,8 @@ const ExpoApisStackNavigator = createStackNavigator(
     FacebookLogin: { screen: FacebookLoginScreen },
     FileSystem: { screen: FileSystemScreen },
     Font: { screen: FontScreen },
-    GoogleLogin: { screen: GoogleLoginScreen },
+    Google: GoogleScreen,
+    GoogleSignIn: GoogleSignInScreen,
     Haptic: { screen: HapticScreen },
     Calendars: { screen: CalendarsScreen },
     Constants: { screen: ConstantsScreen },

apps/native-component-list/screens/ExpoApisScreen.js

@@ -67,7 +67,8 @@ export default class ExpoApisScreen extends React.Component {
       'FileSystem',
       'Font',
       'Geocoding',
-      'GoogleLogin',
+      'Google',
+      'GoogleSignIn',
       'Haptic',
       'ImagePicker',
       'ImageManipulator',

apps/native-component-list/screens/GoogleLoginScreen.js → apps/native-component-list/screens/GoogleScreen.js

@@ -7,7 +7,7 @@ export default class GoogleLoginScreen extends React.Component {
   static navigationOptions = {
     title: 'Google',
   };
-  
+
   render() {
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

apps/native-component-list/screens/GoogleSignInScreen.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { GoogleSignIn, Localization } from 'expo';
+import { Image, StyleSheet, Text, View } from 'react-native';
+
+import GoogleSignInButton from '../components/GoogleSignInButton';
+
+export default class GoogleSignInScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Google Sign-In',
+  };
+
+  state = { user: null };
+
+  componentDidMount() {
+    this._configureAsync();
+  }
+
+  _configureAsync = async () => {
+    const language = Localization.locale;
+    try {
+      await GoogleSignIn.initAsync({
+        isOfflineEnabled: true,
+        isPromptEnabled: true,
+        clientId: '603386649315-vp4revvrcgrcjme51ebuhbkbspl048l9.apps.googleusercontent.com',
+        language,
+      });
+    } catch ({ message }) {
+      console.error('Demo: Error: init: ' + message);
+    }
+    this._syncUserWithStateAsync();
+  };
+
+  _syncUserWithStateAsync = async () => {
+    /*
+      const user = await GoogleSignIn.signInSilentlyAsync();
+      this.setState({ user });
+    */
+
+    if (await GoogleSignIn.signInSilentlyAsync()) {
+      const photoURL = await GoogleSignIn.getPhotoAsync(256);
+      this.setState({
+        user: {
+          ...GoogleSignIn.currentUser.toJSON(),
+          photoURL: photoURL || GoogleSignIn.currentUser.photoURL,
+        },
+      });
+    } else {
+      this.setState({ user: null });
+    }
+  };
+
+  get buttonTitle() {
+    return this.state.user ? 'Sign-Out of Google' : 'Sign-In with Google';
+  }
+
+  render() {
+    const { user } = this.state;
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        {user && <GoogleProfile {...user} />}
+        <GoogleSignInButton onPress={this._toggleAuth}>{this.buttonTitle}</GoogleSignInButton>
+      </View>
+    );
+  }
+
+  _toggleAuth = () => {
+    if (this.state.user) {
+      this._signOutAsync();
+    } else {
+      this._signInAsync();
+    }
+  };
+
+  _signOutAsync = async () => {
+    try {
+      // await GoogleSignIn.disconnectAsync();
+      await GoogleSignIn.signOutAsync();
+      console.log('Log out successful');
+    } catch ({ message }) {
+      console.error('Demo: Error: logout: ' + message);
+    } finally {
+      this.setState({ user: null });
+    }
+  };
+
+  _signInAsync = async () => {
+    try {
+      await GoogleSignIn.askForPlayServicesAsync();
+      const { type, user } = await GoogleSignIn.signInAsync();
+      console.log({ type, user });
+      if (type === 'success') {
+        this._syncUserWithStateAsync();
+      }
+    } catch ({ message }) {
+      console.error('login: Error:' + message);
+    }
+  };
+}
+
+class GoogleProfile extends React.PureComponent {
+  render() {
+    const { photoURL, displayName, email } = this.props;
+    return (
+      <View style={styles.container}>
+        {photoURL && (
+          <Image
+            source={{
+              uri: photoURL,
+            }}
+            style={styles.image}
+          />
+        )}
+        <View style={{ marginLeft: 12 }}>
+          <Text style={styles.text}>{displayName}</Text>
+          <Text style={styles.text}>{email}</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 24,
+  },
+  image: { width: 128, borderRadius: 64, aspectRatio: 1 },
+  text: { color: 'black', fontSize: 16, fontWeight: '600' },
+});

apps/test-suite/index.js

@@ -32,6 +32,7 @@ async function getTestModulesAsync() {
     require('./tests/Constants'),
     require('./tests/Contacts'),
     require('./tests/FileSystem'),
+    require('./tests/GoogleSignIn'),
     require('./tests/Localization'),
     require('./tests/Location'),
     require('./tests/Linking'),