search

react-native-google-signin / google-signin

Google Sign-in for your React Native applications
https://react-native-google-signin.github.io/
MIT License
3.12k stars 877 forks source link

[Android] Sign in with Google button almost impossible to press #1224

Closed NorseGaud closed 7 months ago

NorseGaud commented 7 months ago

Same issue as https://github.com/react-native-google-signin/google-signin/issues/1200

This is a MAJOR blocker for us an makes our app unusable.

Here is our code:

import React, { useState } from 'react'
import DeviceInfo from 'react-native-device-info';
import { SafeAreaView, Alert, StyleSheet, View, Dimensions, Image, Text, Linking, Platform } from 'react-native'
import { supabase } from 'src/db/supabase'
import { Button, Input } from 'react-native-elements'
import KeyboardDismiss from 'src/components/KeyboardDismiss';
import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-google-signin/google-signin'
import Logo from 'src/images/logo.png';

const { width } = Dimensions.get("window")

export default function Auth() {
    const nonce = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
    GoogleSignin.configure({
    webClientId: 'X'XXX
  })

  async function signInWithEmail() {
    setLoading(true)
    const { error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    })
    if (error) Alert.alert(error.message)
    setLoading(false)
  }

  async function signUpWithEmail() {
    setLoading(true)
        const {
            data: { session },
            error,
        } = await supabase.auth.signUp({
            email: email,
            password: password,
        })
        if (error) Alert.alert(error.message)
        if (!session) Alert.alert('Please check your inbox for email verification!')
    setLoading(false)
  }

  return (
        <KeyboardDismiss>
        <SafeAreaView style={styles.safeAreaView}>
            <View style={styles.container}>
                <Image
                        source={Logo}
                        style={{
                                width: width / 2, height: width / 2,
                                marginBottom: 0
                        }}
                />
                <GoogleSigninButton
                    size={GoogleSigninButton.Size.Wide}
                    color={GoogleSigninButton.Color.Dark}
                    style={{
                        width: '100%',
                        height: 45
                    }}
                    disabled={false}
                    onPress={async () => {
                        try {
                            await GoogleSignin.hasPlayServices()
                            const userInfo = await GoogleSignin.signIn()
                            console.log(userInfo)
                            if (userInfo.idToken) {
                                const { data, error } = await supabase.auth.signInWithIdToken({
                                    provider: 'google',
                                    token: userInfo.idToken
                                })
                                // console.log(JSON.stringify({ error, data }, null, 2))
                                if (error) throw new Error(error)
                            } else {
                                throw new Error('no ID token present!')
                            }
                        } catch (error) {
                            if (error.code === statusCodes.SIGN_IN_CANCELLED) {
                                console.trace('cancelled')
                            } else if (error.code === statusCodes.IN_PROGRESS) {
                                console.trace('already signing in')
                            } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
                                console.trace('no play services')
                            } else {
                                Alert.alert(error)
                                console.error(error.stack)
                            }
                        }
                    }}
                />
                <View style={[styles.verticallySpaced, styles.mt20]}>
                    <Input
                        label="Email"
                        // leftIcon={{ type: 'font-awesome', name: 'envelope' }}
                        onChangeText={(text) => setEmail(text)}
                        value={email}
                        placeholder="email@address.com"
                        autoCapitalize={'none'}
                    />
                </View>
                <View style={styles.verticallySpaced}>
                    <Input
                        label="Password"
                        // leftIcon={{ type: 'font-awesome', name: 'lock' }}
                        onChangeText={(text) => setPassword(text)}
                        value={password}
                        secureTextEntry={true}
                        placeholder="Password"
                        autoCapitalize={'none'}
                    />
                </View>
                <View style={[styles.verticallySpaced, styles.mt20]}>
                    <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
                </View>
                <View style={styles.verticallySpaced}>
                    <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
                </View>
                    <Text style={{color: 'blue', marginTop: 30}}
                        onPress={() => Linking.openURL('https://XXXX.app/privacy-policy')}>
                        Privacy Policy
                    </Text>
                    <Text style={{marginTop: 30}}>
                        v{DeviceInfo.getBuildNumber()}
                    </Text>
                </View>
        </SafeAreaView>
        </KeyboardDismiss>
  )
}

const styles = StyleSheet.create({
    safeAreaView: {
        flex: 1,
        backgroundColor: 'white'
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
  verticallySpaced: {
    paddingTop: 4,
    paddingBottom: 4,
    alignSelf: 'stretch',
  },
  mt20: {
    marginTop: 20,
  },
})

The only logs I see in LogCat are

2023-12-05 15:38:19.367  9916-9916  ViewRootIm...nActivity] app.memlane                          I  ViewPostIme pointer 0
2023-12-05 15:38:19.468  9916-9916  ViewRootIm...nActivity] app.memlane                          I  ViewPostIme pointer 1
2023-12-05 15:38:20.613  9916-9916  ViewRootIm...nActivity] app.memlane                          I  ViewPostIme pointer 0
2023-12-05 15:38:20.727  9916-9916  ViewRootIm...nActivity] app.memlane                          I  ViewPostIme pointer 1

It works fine in an emulator, but won't work when running on any Android 9 - 13 devices (I've tried multiple).

Environment

{
  "name": "memlane",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios-15": "npx pod-install && react-native run-ios --simulator=\"iPhone 15\"",
    "ios-14": "npx pod-install && react-native run-ios --simulator=\"iPhone 14\"",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-community/push-notification-ios": "^1.11.0",
    "@react-native-google-signin/google-signin": "^10.1.1",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@reduxjs/toolkit": "^1.9.5",
    "@supabase/supabase-js": "^2.38.4",
    "axios": "^1.5.1",
    "moment": "^2.29.4",
    "patch-package": "^8.0.0",
    "react": "18.2.0",
    "react-native": "0.72.7",
    "react-native-app-auth": "^7.1.0",
    "react-native-calendars": "^1.1301.0",
    "react-native-contacts": "https://github.com/klimenkoDanil/react-native-contacts.git",
    "react-native-device-info": "^10.12.0",
    "react-native-elements": "^3.4.3",
    "react-native-get-random-values": "^1.9.0",
    "react-native-modal": "^13.0.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.25.0",
    "react-native-shadow": "^1.2.2",
    "react-native-svg": "^14.0.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-vector-icons": "10.0.0",
    "react-redux": "^8.1.2",
    "redux": "^4.2.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.2.3",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.22.15",
    "@babel/runtime": "^7.22.15",
    "@react-native/eslint-config": "^0.72.2",
    "babel-jest": "^29.6.4",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.48.0",
    "jest": "^29.6.4",
    "metro-react-native-babel-preset": "^0.77.0",
    "react-native-dotenv": "^3.4.9",
    "react-test-renderer": "18.2.0",
    "@babel/preset-env": "^7.20.0",
    "@react-native/metro-config": "^0.72.11",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "prettier": "^2.4.1",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  },
  "engines": {
    "node": ">=16"
  }
}

npm list   
memlane@0.1.0 /Users/norsegaud/memlane
├── @babel/core@7.23.5
├── @babel/preset-env@7.23.5
├── @babel/runtime@7.23.5
├── @invertase/react-native-apple-authentication@2.3.0
├── @react-native-async-storage/async-storage@1.21.0
├── @react-native-community/push-notification-ios@1.11.0
├── @react-native-google-signin/google-signin@10.1.1
├── @react-native/eslint-config@0.72.2
├── @react-native/metro-config@0.72.11
├── @react-navigation/bottom-tabs@6.5.11
├── @react-navigation/native-stack@6.9.17
├── @react-navigation/native@6.1.9
├── @reduxjs/toolkit@1.9.7
├── @supabase/supabase-js@2.39.0
├── @types/react-test-renderer@18.0.7
├── @types/react@18.2.41
├── axios@1.6.2
├── babel-jest@29.7.0
├── babel-plugin-module-resolver@5.0.0
├── eslint@8.55.0
├── jest@29.7.0
├── metro-react-native-babel-preset@0.77.0
├── moment@2.29.4
├── patch-package@8.0.0
├── prettier@2.8.8
├── react-native-app-auth@7.1.0
├── react-native-calendars@1.1302.0
├── react-native-contacts@7.0.7 (git+ssh://git@github.com/klimenkoDanil/react-native-contacts.git#f0c71ef648768f3e96d72e53fb4ee12884fa4d27)
├── react-native-device-info@10.12.0
├── react-native-dotenv@3.4.9
├── react-native-elements@3.4.3
├── react-native-get-random-values@1.10.0
├── react-native-modal@13.0.1
├── react-native-push-notification@8.1.1
├── react-native-safe-area-context@4.7.4
├── react-native-screens@3.27.0
├── react-native-shadow@1.2.2
├── react-native-svg@14.0.0
├── react-native-url-polyfill@2.0.0
├── react-native-vector-icons@10.0.0
├── react-native@0.72.7
├── react-redux@8.1.3
├── react-test-renderer@18.2.0
├── react@18.2.0
├── redux-persist@6.0.0
├── redux-saga@1.2.3
├── redux@4.2.1
├── typescript@4.8.4
└── uuid@9.0.1
❯ ./gradlew --version    

------------------------------------------------------------
Gradle 7.5.1
------------------------------------------------------------

Build time:   2022-08-05 21:17:56 UTC
Revision:     d1daa0cbf1a0103000b71484e1dbfe096e095918

Kotlin:       1.6.21
Groovy:       3.0.10
Ant:          Apache Ant(TM) version 1.10.11 compiled on July 10 2021
JVM:          17.0.9 (Homebrew 17.0.9+0)
OS:           Mac OS X 14.1.2 aarch64
NorseGaud commented 7 months ago

Ok, figured it out. It was <KeyboardDismiss>. Once I removed that it started working again.

NorseGaud commented 7 months ago

@jbienia @GKyomen