auth ui: Add iOS-compliant "Sign in with Apple" button component.

In Apple's Human Interface Guidelines doc about the button to be
used for "Sign in with Apple", they recommend using a standard
component from the iOS SDK if possible, but that you can use a
custom button, subject to design constraints, otherwise. That doc is
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/.

So, make a component, only to be used on iOS, that will check if the
standard button is available, and use it, if so. The fallback custom
button will show on iOS <13.

Since Apple doesn't review our Google Play Store submissions, we
shouldn't even have to use the custom button on Android; we can just
use the same ZulipButton as the other social auth buttons use. I
think it looks better when they all look uniform like this.

Author: Chris Bobbe

src/start/IosCompliantAppleAuthButton/Custom.js

@@ -0,0 +1,80 @@
+/* @flow strict-local */
+import React, { PureComponent } from 'react';
+import { StyleSheet, Text, View, Image, TouchableWithoutFeedback } from 'react-native';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+import type { ThemeName } from '../../reduxTypes';
+import TranslatedText from '../../common/TranslatedText';
+import appleLogoBlackImg from '../../../static/img/apple-logo-black.png';
+import appleLogoWhiteImg from '../../../static/img/apple-logo-white.png';
+
+const styles = StyleSheet.create({
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 44,
+  },
+  frame: {
+    height: 44,
+    justifyContent: 'center',
+    borderRadius: 22,
+    overflow: 'hidden',
+  },
+  nightFrame: {
+    backgroundColor: 'black',
+  },
+  dayFrame: {
+    backgroundColor: 'white',
+    borderWidth: 1.5,
+    borderColor: 'black',
+  },
+  text: {
+    fontSize: 16,
+  },
+  nightText: {
+    color: 'white',
+  },
+  dayText: {
+    color: 'black',
+  },
+});
+
+type Props = $ReadOnly<{|
+  style?: ViewStyleProp,
+  onPress: () => void | Promise<void>,
+  theme: ThemeName,
+|}>;
+
+/**
+ * The custom "Sign in with Apple" button that follows the rules.
+ *
+ * Do not reuse this component; it is only meant to be rendered by the
+ * IosCompliantAppleAuthButton, which controls whether the custom
+ * button should be used.
+ */
+export default class Custom extends PureComponent<Props> {
+  render() {
+    const { style, onPress, theme } = this.props;
+    const logoSource = theme === 'default' ? appleLogoBlackImg : appleLogoWhiteImg;
+    const frameStyle = [
+      styles.frame,
+      theme === 'default' ? styles.dayFrame : styles.nightFrame,
+      style,
+    ];
+    const textStyle = [styles.text, theme === 'default' ? styles.dayText : styles.nightText];
+
+    return (
+      <View style={frameStyle}>
+        <TouchableWithoutFeedback onPress={onPress}>
+          <View style={styles.buttonContent}>
+            <Image source={logoSource} />
+            <Text style={textStyle}>
+              <TranslatedText text="Sign in with Apple" />
+            </Text>
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+    );
+  }
+}

src/start/IosCompliantAppleAuthButton/index.js

@@ -0,0 +1,75 @@
+/* @flow strict-local */
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { connect } from '../../react-redux';
+
+import Custom from './Custom';
+import type { ThemeName } from '../../reduxTypes';
+import type { Dispatch } from '../../types';
+import { getSettings } from '../../selectors';
+
+type SelectorProps = $ReadOnly<{|
+  theme: ThemeName,
+|}>;
+
+type Props = $ReadOnly<{|
+  style?: ViewStyleProp,
+  onPress: () => void | Promise<void>,
+
+  dispatch: Dispatch,
+  ...SelectorProps,
+|}>;
+
+type State = $ReadOnly<{|
+  isNativeButtonAvailable: boolean | void,
+|}>;
+
+/**
+ * A "Sign in with Apple" button (iOS only) that follows the rules.
+ *
+ * These official guidelines from Apple are at
+ * https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/.
+ *
+ * Not to be used on Android. There, we also offer "Sign in with
+ * Apple", but without marking it with a different style from the
+ * other buttons.
+ */
+class IosCompliantAppleAuthButton extends PureComponent<Props, State> {
+  state = {
+    isNativeButtonAvailable: undefined,
+  };
+
+  async componentDidMount() {
+    this.setState({ isNativeButtonAvailable: await AppleAuthentication.isAvailableAsync() });
+  }
+
+  render() {
+    const { style, onPress, theme } = this.props;
+    const { isNativeButtonAvailable } = this.state;
+    if (isNativeButtonAvailable === undefined) {
+      return <View style={[{ height: 44 }, style]} />;
+    } else if (isNativeButtonAvailable) {
+      return (
+        <AppleAuthentication.AppleAuthenticationButton
+          buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
+          buttonStyle={
+            theme === 'default'
+              ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE_OUTLINE
+              : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
+          }
+          cornerRadius={22}
+          style={[{ height: 44 }, style]}
+          onPress={onPress}
+        />
+      );
+    } else {
+      return <Custom style={style} onPress={onPress} theme={theme} />;
+    }
+  }
+}
+
+export default connect(state => ({
+  theme: getSettings(state).theme,
+}))(IosCompliantAppleAuthButton);