feat: add google oAuth with expo auth session

app.json

@@ -1,7 +1,8 @@
 {
   "expo": {
     "name": "BloodLine",
-    "slug": "BloodLine",
+    "slug": "bloodline",
+    "scheme": "comgeeekgodbloodline",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -21,6 +22,16 @@
       "supportsTablet": true
     },
     "android": {
+      "intentFilters":[
+        {
+          "action": "VIEW",
+          "category": ["BROWSABLE", "DEFAULT"],
+          "data": {
+            "scheme": "com.geeekgod.bloodline.auth"
+          }
+        }
+      ],
+      "package": "com.geeekgod.bloodline",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"

app/navigation/StackNavigator/index.js

@@ -1,4 +1,5 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
+import Login from '../../screens/Login';
 import Walkthrough from '../../screens/Walkthrough';
 import Welcome from '../../screens/Welcome';
 
@@ -8,10 +9,12 @@ const StackNavigator = () => {
     return (
         <Stack.Navigator
             screenOptions={{
-                headerShown: false
+                headerShown: false,
+                ...TransitionPresets.SlideFromRightIOS
             }}>
             <Stack.Screen name="Welcome" component={Welcome} />
             <Stack.Screen name="Walkthrough" component={Walkthrough} />
+            <Stack.Screen name="Login" component={Login} />
         </Stack.Navigator>
     );
 }

app/screens/Login/index.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import * as WebBrowser from 'expo-web-browser';
+import * as Google from 'expo-auth-session/providers/google';
+import { StyleSheet, View } from 'react-native';
+import { heightScreen, widthScreen } from '../../utils/layout';
+import { Box, Button, Icon, Text } from 'native-base';
+import LoginUnlock from "../../assets/svg/login/LoginUnlock.svg";
+import axios from "axios";
+import { AntDesign } from '@expo/vector-icons';
+
+WebBrowser.maybeCompleteAuthSession();
+
+const Login = () => {
+    const [request, response, promptAsync] = Google.useAuthRequest({
+        expoClientId: '938415613346-3ecn64agj1971r8l0s520kc41d4s0n6p.apps.googleusercontent.com',
+        androidClientId: '938415613346-f70dmihvkcjpjo3ljm798e85t5g45s2i.apps.googleusercontent.com',
+    });
+
+    React.useEffect(() => {
+        if (response?.type === 'success') {
+            const { authentication } = response;
+
+            axios.get("https://www.googleapis.com/oauth2/v1/userinfo?alt=json", {
+                headers: { Authorization: `Bearer ${authentication?.accessToken}` }
+            }).then((res) => {
+                console.log(res.data)
+            }).catch((err) => {
+                console.log(err);
+            })
+        }
+    }, [response]);
+
+    return (
+        <View style={styles.container}>
+            <Box
+                h="400"
+                w="400"
+                // bg="#DE2A26"
+                // rounded="full"
+                position="absolute"
+                top={heightScreen > 800 ? "-20" : "-40"}
+                right={heightScreen > 800 ? "-120" : "-150"}
+            >
+                <AntDesign name='heart' size={400} color='#DE2A26' />
+            </Box>
+            <LoginUnlock />
+            <Text fontFamily='body' fontWeight="600" mt='6' fontSize='3xl' textAlign='center'>Continue with us</Text>
+            <Text fontFamily='body' color='#7A7A7A' mt='3' mb='3' fontWeight="400" fontSize='md' textAlign='center' lineHeight='2xl'>Sign in via</Text>
+            <Button
+                leftIcon={<Icon name="google" as={AntDesign} color="white" />}
+                disabled={!request}
+                onPress={() => promptAsync()}
+                size='lg'
+                fontSize='xl'
+                rounded='2xl'
+            >
+                Login with Google
+            </Button>
+        </View>
+    );
+}
+
+export default Login
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        width: widthScreen,
+        backgroundColor: "#fff",
+        paddingHorizontal: heightScreen > 800 ? 32 : 26,
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+    },
+});

app/screens/Walkthrough/components/WalktroughScreen.js

@@ -36,8 +36,8 @@ const WalkthroughScreen = memo((props) => {
         right={heightScreen > 800 ? "-120" : "-150"}
       ></Box>
       {imageComponent()}
-      <Text fontFamily='body' fontWeight="600" mt='6' fontSize='3xl'>{props.title}</Text>
-        <Text fontFamily='body' color='#7A7A7A' mt='4' fontWeight="400" fontSize='md' textAlign='center'>{props.intro}</Text>
+      <Text fontFamily='body' fontWeight="600" mt='6' fontSize='3xl' textAlign='center'>{props.title}</Text>
+      <Text fontFamily='body' color='#7A7A7A' mt='4' fontWeight="400" fontSize='md' textAlign='center' lineHeight='2xl'>{props.intro}</Text>
     </View>
   );
 });
@@ -47,7 +47,6 @@ export default WalkthroughScreen;
 const styles = StyleSheet.create({
   container: {
     width: widthScreen,
-    // flex: 1,
     backgroundColor: "#fff",
     paddingHorizontal: heightScreen > 800 ? 32 : 26,
     justifyContent: "center",

app/screens/Walkthrough/index.js

@@ -2,9 +2,10 @@ import React, { memo, useRef, useState } from "react";
 import { Animated, ScrollView, StyleSheet, View } from "react-native";
 import WalkthroughScreen from "./components/WalktroughScreen";
 import Dots from "./components/Dots";
-import { Box, IconButton, ZStack } from "native-base";
+import { Box, IconButton } from "native-base";
 import { MaterialIcons } from "@expo/vector-icons";
 import { widthScreen } from "../../utils/layout";
+import { useNavigation } from "@react-navigation/native";
 
 const data = [
   {
@@ -35,6 +36,8 @@ const Walkthrough = memo(() => {
   const scrollViewRef = useRef();
   const scrollX = useRef(new Animated.Value(0)).current;
 
+  const navigation = useNavigation()
+
   const handleNextBtn = () => {
     switch (screenIndex) {
       case 0:
@@ -47,7 +50,7 @@ const Walkthrough = memo(() => {
         scrollViewRef.current.scrollTo({ x: widthScreen * 3, y: 0, animated: true })
         break;
       case 3:
-        console.log("next page")
+        navigation.navigate('Login')
         break
       default:
         break;

eas.json

@@ -0,0 +1,20 @@
+{
+    "build": {
+      "production": {
+        "node": "16.14.0"
+      },
+      "preview": {
+        "extends": "production",
+        "distribution": "store"
+      },
+      "development": {
+        "extends": "production",
+        "developmentClient": true,
+        "distribution": "store"
+      }
+    },
+    "cli": {
+      "version": ">= 0.52.0",
+      "requireCommit": true
+    }
+  }

package.json

@@ -11,8 +11,13 @@
   "dependencies": {
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/stack": "^6.3.1",
+    "axios": "^0.27.2",
     "expo": "~46.0.9",
     "expo-app-loading": "~2.1.0",
+    "expo-application": "~4.2.2",
+    "expo-auth-session": "~3.7.1",
+    "expo-location": "~14.3.0",
+    "expo-random": "~12.3.0",
     "expo-splash-screen": "~0.16.2",
     "expo-status-bar": "~1.4.0",
     "native-base": "^3.4.16",