Google-signin: signIn().then() is called twice when using <TouchableHighlight/> instead of <GoogleSignInButton/>

[ademars94]

When I call signIn() from the GoogleSignInButton component, everything works fine.

When I call signIn() from a custom TouchableOpacity component, any logic in my .then() method is executed twice.

Here is the stock button:

<GoogleSigninButton style={ styles.googButton }
                    size={GoogleSigninButton.Size.Standard}
                    color={GoogleSigninButton.Color.Light}
                    onPress={ () => this.googleLogin() }
/>

Here is my custom button:

<TouchableOpacity onPress={ () => this.googleLogin() } style={ Styles.confirmButton }>
    <Text style={ Styles.buttonText }>Login with Google</Text>
</TouchableOpacity>

They both call the same function:

googleLogin = () => {
    GoogleSignin.signIn()
        .then((user) => {
          console.log("User Obj from Login.js:", user);
          this.setState({user: user});
        })
        .catch((err) => {
          console.log('WRONG SIGNIN', err);
        })
        .then(() => {
          console.log("Getting ready to call navigate...");
          this.navigate("EventIndex")
        });
};

When I use the GoogleSignInButton it works completely fine. When I use my custom TouchableHighlight button, all of the .then() logic is being executed twice. What is going on here?

[d-johan]

Hi, I have the same issue. How did you get around it?

[ademars94]

@dodomasta
Here's my duct-taped solution to this problem. It's not pretty but it is working.

googleLogin = () => {
    GoogleSignin.signIn()
      .then((user) => {
        this.setState({
          user         : user,
          isNavigating : true
        });
      })
      .catch((err) => {
        console.log('WRONG SIGNIN', err);
      })
      .then(() => {
        // Prevent from firing twice by setting state of isNavigating
        if ( this.state.isNavigating ) {
          this.setState({
            isNavigating: false
          }, () => this.navigate("EventIndex"));
        }
      });
  };

Still looking for a better solution.

[ryancoughlin]

I am having a similar issue but not on this package. What versions of RN are you guys on?

My button

                <UpsellButton
                  title="Monthly Subscription"
                  text="$1.99 a month"
                  onPress={() => this.purchase(monthlySubscription)}
                  accessory={upsellSecondaryArrow}
                />

Purchase:

  purchase(product) {
    console.log('Start purchasing inside of upsell')
    buyProduct(product)
      .then(() => {
        Snackbar.show({
          backgroundColor: BaseStyle.darkBackgroundColor,
          title: 'Purchase succesful, stay salty',
          duration: 2000,
        })
        this.props.purchaseSuccessful()
      })
  }

[axelkennedal]

I'm having this issue too, but not with this library - just that a TouchableWithoutHighlight in my app calls its onPress handler multiple times. The spaghetti solution by @ademars94 works for me, but it's so strange that this would happen

[jozan]

I'm quite sure I've addressed this problem in https://github.com/react-native-community/react-native-google-signin/pull/398 when I was working on the iOS logic. This should not fire twice and is definitely a bug to be fixed.

[vonovak]

given that the issue is pretty old and we released 2 RCs in the mean time, which include a rewrite of how things works internally, I'm closing this. Please open a new issue if the original problem persists.

[Gutyn]

This is still hapenning on android:
System:
OS: macOS 10.15.3
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Memory: 31.89 GB / 64.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.14.2 - /usr/local/bin/node
Yarn: 1.21.1 - ~/.yarn/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28, 29
Build Tools: 28.0.3, 29.0.0, 29.0.0, 29.0.2
System Images: android-21 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
Android NDK: 21.0.6113669
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
npmPackages:
react: ^16.9.0 => 16.9.0
react-native: 0.61.5-gl002 => 0.61.5-gl002
npmGlobalPackages:
react-native-cli: 2.0.1

[cesarve77]

In my case I have 2 tabs
1) Sign in
2) Sign Up

In both tabs I render one SignInButton, and the events is fired twice.

[vonovak]

hello, please open a new issue if the original problem persists, and kindly follow the issue template, thanks