expo: [expo-apple-authentication] AppleAuthenticationButton not showing up

šŸ› Bug Report

Environment

Bare react-native app. iOS simulator with iOS 13.

Steps to Reproduce

I’m trying to insert the AppleAuthenticationButton using the exact same code provided in the documentation:

import * as AppleAuthentication from "expo-apple-authentication";
...
  <AppleAuthentication.AppleAuthenticationButton
    buttonType={
      AppleAuthentication.AppleAuthenticationButtonType.CONTINUE
    }
    buttonStyle={
      AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
    }
    cornerRadius={5}
    onPress={async () => {
      try {
        const credential = await AppleAuthentication.signInAsync({
          requestedScopes: [
            AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
            AppleAuthentication.AppleAuthenticationScope.EMAIL
          ]
        });
        console.warn(credential);
        // signed in
      } catch (e) {
        console.warn(e);
      }
    }}
  />

Actual Behavior

Nothing is showing up. Worth things to note:

  • If I remove the props buttonType / buttonStyle it throws an error. So the component is being executed.
  • The AppleAuthentication.isAvailableAsync() method returns true.
  • If I call AppleAuthentication.signInAsync() using a custom button the Sign In flow works perfectly.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 19 (7 by maintainers)

Most upvoted comments

I think all you need to do is to set width and height to the button šŸ˜„. Try to set style


style={{ width: 200, height: 44 }}

Strangely, the button shows up when I run my app on a device, but not on the simulator.

did you check your os version on simulator? it needs to be higher than 13.

I think all you need to do is to set width and height to the button šŸ˜„. Try to set style

style={{ width: 200, height: 44 }}

Thanks @Szymon20000 for the tip, it works!

Adding this to SDKs 35 and 36 since we likely will want to cherry-pick the fix back into the sdk-35 branch and publish the module from there, assuming the fix is backwards compatible with 35.