iOS button has no background

[pprotas]

Hi! So the button looks fine on Android and everything works. But on iOS my Apple button has no white background:

Code:

import { appleAuth, AppleButton } from '@invertase/react-native-apple-authentication';
import React, { FC, useContext } from 'react';
import 'react-native-get-random-values';
import { Notifier } from 'react-native-notifier';

export const AppleLoginButton: FC = () => {
    const onAppleButtonPress = async () => {
        (...)
    }

    return (
        <AppleButton
            buttonType={AppleButton.Type.CONTINUE}
            buttonStyle={AppleButton.Style.WHITE}
            onPress={onAppleButtonPress}
            cornerRadius={50}
            style={{
                width: 250,
                height: 40
            }}
        />
    );
}

Any way to fix this? I tried different buttonStyles and buttonTypes but they all have no background.

More info: Running on macOS 13.0 Beta Simulator is iPhone 13 Pro Max simulator on iOS 16.0 React Native version 0.64.2

[mikehardy]

The consistent recommendation here is that you must iOS 13 on simulator to test.

How's it work on a real device?

In my project it works fine in those two cases using the example app.

If you can reproduce a problem using the example app on real device or ios13 simulator let me know

[mikehardy]

I reproduce this but on ios16 (that is: beta) Simulators only, you may want to raise it with Apple as these are provided by the system and we have no control over them.

They do not appear to have changed their APIs either? https://developer.apple.com/documentation/authenticationservices/asauthorizationappleidbuttonstyle?language=objc (if you turn on show changes for Xcode 14+ they indicate they are modified but only for macCatalyst, and without specifying the modification)

If Apple is either unresponsive or this is an intentional change by them in iOS 16 that will remain when it is released, you may always construct your own button using react-native UI elements, just like with any other button - just take care to follow Apple design guidelines for the button so they approve it.

Since this is provided by the upstream (that is: system) APIs and appears to work fine in released code, I'm going to close this as it is not actionable here in this module and there's a workaround with custom button design

[focux]

For the record, this also happens on a real device running iOS 16, not only simulators.

Edit: This was fixed on iOS 16 beta 2.

[mikehardy]

Edit: This was fixed on iOS 16 beta 2.

That's great news! It was a major styling difference, that's for sure, thanks for posting the update @focux