@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/use_smile_id_expandable_icon.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Pressable, StyleSheet } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { SiExpandMore } from "./icons";
+
+export type UseSmileIDExpandableIconProps = {
+  readonly expanded: boolean;
+  /**
+   * Optional toggle callback. When provided, the icon renders inside
+   * a `Pressable` so the disc itself owns the expand / collapse
+   * interaction. When omitted, the icon is purely visual and
+   * partner code drives the `expanded` state externally.
+   */
+  readonly onChange?: (next: boolean) => void;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const SIZE = 20;
+const CHEVRON_WIDTH = 12;
+const ROTATION_DURATION_MS = 200;
+
+/**
+ * Filled circular disc carrying a downward chevron. Used in the
+ * consent screen's "Learn more" row — partners tap the disc to
+ * toggle the explainer panel. The chevron rotates 180° (animated
+ * over 200 ms with ease-in-out) when `expanded` flips, so the same
+ * artwork serves both states with a smooth transition.
+ */
+export function UseSmileIDExpandableIcon(props: UseSmileIDExpandableIconProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const accessibilityLabel = props.expanded ? "Collapse" : "Expand";
+
+  const rotationProgress = useRef(
+    new Animated.Value(props.expanded ? 1 : 0),
+  ).current;
+  useEffect(() => {
+    Animated.timing(rotationProgress, {
+      toValue: props.expanded ? 1 : 0,
+      duration: ROTATION_DURATION_MS,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [props.expanded, rotationProgress]);
+
+  const rotate = rotationProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+  const inner = (
+    <Animated.View
+      style={[
+        styles.disc,
+        {
+          backgroundColor: theme.colors.offBlack,
+          transform: [{ rotate }],
+        },
+      ]}
+    >
+      <SiExpandMore size={CHEVRON_WIDTH} color={theme.colors.offWhite} />
+    </Animated.View>
+  );
+
+  if (props.onChange) {
+    const onChange = props.onChange;
+    return (
+      <Pressable
+        testID={props.testID}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ expanded: props.expanded }}
+        onPress={() => onChange(!props.expanded)}
+        hitSlop={8}
+      >
+        {inner}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Animated.View
+      testID={props.testID}
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {inner}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  disc: {
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/use_smile_id_face_oval_image.tsx

@@ -0,0 +1,90 @@
+import Svg, {
+  ClipPath,
+  Defs,
+  Ellipse,
+  Image as SvgImage,
+} from "react-native-svg";
+import { StyleSheet, View } from "react-native";
+import { computeFaceOvalGeometry } from "./face_oval_defaults";
+
+export type UseSmileIDFaceOvalImageProps = {
+  /** Local file URI (`file:///…`) of the captured selfie. */
+  readonly uri: string;
+  /** Container size from the parent canvas's `onLayout`. */
+  readonly containerWidth: number;
+  readonly containerHeight: number;
+  readonly testID?: string;
+};
+
+/**
+ * Renders the captured selfie at the canonical face-oval rect,
+ * clipped to an ellipse.
+ *
+ * Implementation: draws an SVG `<Image>` element constrained to the
+ * oval bounds and clipped through a `<ClipPath>` containing an
+ * `<Ellipse>`. Going through `react-native-svg` (already a peer
+ * dep) gives us a true ellipse on both iOS and Android — RN's
+ * `borderRadius` can't express asymmetric corner radii, so a plain
+ * `<Image>` with `borderRadius: ovalWidth/2` would render as a
+ * pill on Android when the oval isn't a perfect circle (face-oval
+ * default is roughly 1:1.26).
+ *
+ * Returns `null` until the canvas has measured (avoids a one-frame
+ * flash where the SVG renders at zero-size).
+ */
+export function UseSmileIDFaceOvalImage(props: UseSmileIDFaceOvalImageProps) {
+  if (props.containerWidth <= 0 || props.containerHeight <= 0) return null;
+  if (props.uri.length === 0) return null;
+
+  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(
+    props.containerWidth,
+    props.containerHeight,
+  );
+  const clipId = "si_face_oval_image_clip";
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.container,
+        {
+          width: ovalWidth,
+          height: ovalHeight,
+          left: ovalLeft,
+          top: ovalTop,
+        },
+      ]}
+      testID={props.testID}
+    >
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${ovalWidth} ${ovalHeight}`}
+      >
+        <Defs>
+          <ClipPath id={clipId}>
+            <Ellipse
+              cx={ovalWidth / 2}
+              cy={ovalHeight / 2}
+              rx={ovalWidth / 2}
+              ry={ovalHeight / 2}
+            />
+          </ClipPath>
+        </Defs>
+        <SvgImage
+          href={{ uri: props.uri }}
+          x={0}
+          y={0}
+          width={ovalWidth}
+          height={ovalHeight}
+          preserveAspectRatio="xMidYMid slice"
+          clipPath={`url(#${clipId})`}
+        />
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { position: "absolute" },
+});

package/src/presentation/components/use_smile_id_face_overlay.tsx

@@ -0,0 +1,387 @@
+import { memo, useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import Svg, { ClipPath, Defs, Ellipse, Path, Rect } from "react-native-svg";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDMotion } from "../theme/use_smile_id_motion";
+import {
+  isDirectional,
+  UseSmileIDOverlayState,
+  type UseSmileIDOverlayState as OverlayState,
+} from "../state/use_smile_id_overlay_state";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import {
+  computeFaceOvalGeometry,
+  FaceOvalDefaults,
+} from "./face_oval_defaults";
+import { UseSmileIDOvalBorderPalette } from "./use_smile_id_oval_border_palette";
+
+export type UseSmileIDFaceOverlayProps = {
+  readonly state: OverlayState;
+  /** 0..1 — bottom-to-top fill progress during READY/CAPTURING. */
+  readonly progress?: number;
+  /** Container size — partner passes from `onLayout` of the camera preview. */
+  readonly containerWidth: number;
+  readonly containerHeight: number;
+  /** Keeps the rim neutral through CAPTURING/PROCESSING — ESS has no green oval treatment. */
+  readonly enableEnhancedLiveness?: boolean;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const STROKE_WIDTH = FaceOvalDefaults.strokeWidth;
+
+const AnimatedEllipse = Animated.createAnimatedComponent(Ellipse);
+
+/** Oval edge a directional hint highlights. */
+type ArcEdge = "top" | "bottom" | "left" | "right";
+
+/**
+ * Oval edge the arc hugs, or null when non-directional. ML-derived,
+ * never layout-direction-derived (RTL-safe; the oval is never mirrored).
+ */
+function arcEdgeFor(state: OverlayState): ArcEdge | null {
+  switch (state) {
+    case UseSmileIDOverlayState.MOVE_UP:
+      return "top";
+    case UseSmileIDOverlayState.MOVE_DOWN:
+      return "bottom";
+    case UseSmileIDOverlayState.MOVE_LEFT:
+      return "left";
+    case UseSmileIDOverlayState.MOVE_RIGHT:
+      return "right";
+    default:
+      return null;
+  }
+}
+
+/**
+ * Face capture oval — dimmed scrim with a transparent cutout plus a
+ * state-driven border. Colours resolve through
+ * `UseSmileIDOvalBorderPalette`; timings come from `UseSmileIDMotion`.
+ * Directional `MOVE_*` states suppress the progress ring and draw a
+ * red arc on the crowded oval edge. See docs/Face-Oval-State-Flows.md.
+ */
+export function UseSmileIDFaceOverlay(props: UseSmileIDFaceOverlayProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const enableEnhancedLiveness = props.enableEnhancedLiveness ?? false;
+  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(
+    props.containerWidth,
+    props.containerHeight,
+  );
+  const borderColor =
+    theme.colors[
+      UseSmileIDOvalBorderPalette.tokenFor(props.state, enableEnhancedLiveness)
+    ];
+  const overlayColor = theme.colors.captureOverlayBackground;
+  const trackColor = theme.colors.ovalDefault;
+  const fillColor = theme.colors.ovalActive;
+  const directionalColor = theme.colors.ovalDirectionalIndicator;
+  const progress = clamp01(props.progress ?? 0);
+  const directional = isDirectional(props.state);
+
+  const ovalCx = ovalLeft + ovalWidth / 2;
+  const ovalCy = ovalTop + ovalHeight / 2;
+  const ovalRx = ovalWidth / 2;
+  const ovalRy = ovalHeight / 2;
+
+  // Animated.Value can't tween colour strings — cross-fade via opacity
+  // on each borderColor change instead.
+  const borderOpacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    borderOpacity.setValue(0);
+    Animated.timing(borderOpacity, {
+      toValue: 1,
+      duration: UseSmileIDMotion.stateTransition,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [borderColor, borderOpacity]);
+
+  // The renderer reads this animated value, never the raw target, so
+  // per-frame native progress jumps rise smoothly.
+  const animatedProgress = useRef(new Animated.Value(progress)).current;
+  useEffect(() => {
+    Animated.timing(animatedProgress, {
+      toValue: progress,
+      duration: UseSmileIDMotion.progressFill,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  }, [progress, animatedProgress]);
+
+  // The arc fades rather than popping; the last edge is remembered so
+  // the fade-out stays anchored where the hint was.
+  const lastArcEdgeRef = useRef<ArcEdge | null>(arcEdgeFor(props.state));
+  const arcEdge = arcEdgeFor(props.state) ?? lastArcEdgeRef.current;
+  useEffect(() => {
+    const edge = arcEdgeFor(props.state);
+    if (edge !== null) lastArcEdgeRef.current = edge;
+  }, [props.state]);
+  const arcAlpha = useRef(new Animated.Value(directional ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(arcAlpha, {
+      toValue: directional ? 1 : 0,
+      duration: UseSmileIDMotion.stateTransition,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [directional, arcAlpha]);
+
+  if (props.containerWidth <= 0 || props.containerHeight <= 0) {
+    return null;
+  }
+
+  // Key the clip id by edge: react-native-svg on Android never
+  // re-resolves an existing ClipPath's contents, so reusing one id
+  // would leave the first-rendered clip band stuck on its edge.
+  const arcClipId = `si_face_overlay_arc_clip_${arcEdge ?? "none"}`;
+  const arcClipRect = arcEdge
+    ? computeArcClipRect(
+        arcEdge,
+        { ovalWidth, ovalHeight, ovalLeft, ovalTop },
+        props.containerWidth,
+        props.containerHeight,
+      )
+    : null;
+  const progressPercent = Math.round(progress * 100);
+
+  return (
+    <View
+      testID={props.testID}
+      style={StyleSheet.absoluteFill}
+      pointerEvents="none"
+    >
+      {/* Static scrim in its own <Svg> so dynamic-layer changes never
+          invalidate it. The cutout is one even-odd path rather than a
+          <Mask> — masks rasterize the full-screen layer to a bitmap on
+          the UI thread per invalidation, freezing the camera preview. */}
+      <ScrimWithOvalCutout
+        containerWidth={props.containerWidth}
+        containerHeight={props.containerHeight}
+        ovalCx={ovalCx}
+        ovalCy={ovalCy}
+        ovalRx={ovalRx}
+        ovalRy={ovalRy}
+        color={overlayColor}
+      />
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${props.containerWidth} ${props.containerHeight}`}
+        preserveAspectRatio="none"
+        style={StyleSheet.absoluteFill}
+      >
+        <Defs>
+          {arcClipRect ? (
+            <ClipPath id={arcClipId}>
+              <Rect
+                x={arcClipRect.x}
+                y={arcClipRect.y}
+                width={arcClipRect.width}
+                height={arcClipRect.height}
+              />
+            </ClipPath>
+          ) : null}
+        </Defs>
+        {/* Progress ring is suppressed while a directional hint is active. */}
+        {progress > 0 && !directional ? (
+          <Ellipse
+            cx={ovalCx}
+            cy={ovalCy}
+            rx={ovalRx}
+            ry={ovalRy}
+            stroke={trackColor}
+            strokeWidth={STROKE_WIDTH}
+            fill="none"
+          />
+        ) : (
+          <AnimatedEllipse
+            cx={ovalCx}
+            cy={ovalCy}
+            rx={ovalRx}
+            ry={ovalRy}
+            stroke={borderColor}
+            strokeWidth={STROKE_WIDTH}
+            fill="none"
+            opacity={borderOpacity}
+          />
+        )}
+        {/* Red directional arc — stays mounted after the state clears so
+            the fade-out remains anchored. */}
+        {arcClipRect ? (
+          <AnimatedEllipse
+            cx={ovalCx}
+            cy={ovalCy}
+            rx={ovalRx}
+            ry={ovalRy}
+            stroke={directionalColor}
+            strokeWidth={STROKE_WIDTH}
+            fill="none"
+            clipPath={`url(#${arcClipId})`}
+            opacity={arcAlpha}
+            testID="si_face_overlay_directional_arc"
+          />
+        ) : null}
+      </Svg>
+      {/* Green fill revealed by a bottom-anchored view window — Android
+          never re-resolves animated SVG clipPath contents, so the clip
+          must happen at the View layer. */}
+      {progress > 0 && !directional ? (
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+          <Animated.View
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              overflow: "hidden",
+              height: animatedProgress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [
+                  props.containerHeight - (ovalTop + ovalHeight + STROKE_WIDTH),
+                  props.containerHeight - (ovalTop - STROKE_WIDTH),
+                ],
+              }),
+            }}
+          >
+            <Svg
+              width={props.containerWidth}
+              height={props.containerHeight}
+              viewBox={`0 0 ${props.containerWidth} ${props.containerHeight}`}
+              preserveAspectRatio="none"
+              style={[
+                styles.fillSvg,
+                {
+                  width: props.containerWidth,
+                  height: props.containerHeight,
+                },
+              ]}
+            >
+              <Ellipse
+                cx={ovalCx}
+                cy={ovalCy}
+                rx={ovalRx}
+                ry={ovalRy}
+                stroke={fillColor}
+                strokeWidth={STROKE_WIDTH}
+                fill="none"
+              />
+            </Svg>
+          </Animated.View>
+        </View>
+      ) : null}
+      {/* Accessibility-only node reporting capture progress as a labelled percent. */}
+      {progress > 0 ? (
+        <View
+          accessible
+          accessibilityLabel={loc.siAccessibilityCaptureProgress}
+          accessibilityValue={{ text: `${progressPercent}%` }}
+          style={StyleSheet.absoluteFill}
+          testID="si_face_overlay_progress_semantics"
+        />
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * Dimmed scrim with a transparent elliptical cutout, drawn as one
+ * even-odd path (outer rect winding + inner ellipse winding). Memoised:
+ * geometry and colour only change on layout/theme changes, so per-frame
+ * overlay updates never touch this native view.
+ */
+const ScrimWithOvalCutout = memo(function ScrimWithOvalCutout(props: {
+  readonly containerWidth: number;
+  readonly containerHeight: number;
+  readonly ovalCx: number;
+  readonly ovalCy: number;
+  readonly ovalRx: number;
+  readonly ovalRy: number;
+  readonly color: string;
+}) {
+  const { containerWidth, containerHeight, ovalCx, ovalCy, ovalRx, ovalRy } =
+    props;
+  const path =
+    `M0 0H${containerWidth}V${containerHeight}H0Z ` +
+    `M${ovalCx - ovalRx} ${ovalCy}` +
+    `a${ovalRx} ${ovalRy} 0 1 0 ${2 * ovalRx} 0` +
+    `a${ovalRx} ${ovalRy} 0 1 0 ${-2 * ovalRx} 0Z`;
+  return (
+    <Svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${containerWidth} ${containerHeight}`}
+      preserveAspectRatio="none"
+      style={StyleSheet.absoluteFill}
+    >
+      <Path d={path} fill={props.color} fillRule="evenodd" />
+    </Svg>
+  );
+});
+
+/**
+ * Clip band spanning `directionalArcEdgeFraction` of the oval extent
+ * from the crowded edge, stroke-padded so the arc isn't shaved off.
+ */
+function computeArcClipRect(
+  edge: ArcEdge,
+  oval: {
+    ovalWidth: number;
+    ovalHeight: number;
+    ovalLeft: number;
+    ovalTop: number;
+  },
+  containerWidth: number,
+  containerHeight: number,
+): { x: number; y: number; width: number; height: number } {
+  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = oval;
+  const ovalRight = ovalLeft + ovalWidth;
+  const ovalBottom = ovalTop + ovalHeight;
+  const verticalBand = ovalHeight * FaceOvalDefaults.directionalArcEdgeFraction;
+  const horizontalBand =
+    ovalWidth * FaceOvalDefaults.directionalArcEdgeFraction;
+  switch (edge) {
+    case "top":
+      return {
+        x: 0,
+        y: ovalTop - STROKE_WIDTH,
+        width: containerWidth,
+        height: verticalBand + STROKE_WIDTH,
+      };
+    case "bottom":
+      return {
+        x: 0,
+        y: ovalBottom - verticalBand,
+        width: containerWidth,
+        height: verticalBand + STROKE_WIDTH,
+      };
+    case "left":
+      return {
+        x: ovalLeft - STROKE_WIDTH,
+        y: 0,
+        width: horizontalBand + STROKE_WIDTH,
+        height: containerHeight,
+      };
+    case "right":
+      return {
+        x: ovalRight - horizontalBand,
+        y: 0,
+        width: horizontalBand + STROKE_WIDTH,
+        height: containerHeight,
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  // Bottom-anchored so the ring stays aligned as the reveal window grows.
+  fillSvg: { position: "absolute", left: 0, bottom: 0 },
+});
+
+function clamp01(value: number): number {
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}

package/src/presentation/components/use_smile_id_face_silhouette_overlay.tsx

@@ -0,0 +1,27 @@
+import { View } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+
+export type UseSmileIDFaceSilhouetteOverlayProps = {
+  readonly visible: boolean;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Silhouette guide rendered inside the face oval during the
+ * `INSTRUCTION` state — gives the user a visual hint of where to
+ * place their face before the analyzer kicks in.
+ *
+ * **STUB.** Silhouette SVG / vector pending; current implementation
+ * is an empty view.
+ */
+export function UseSmileIDFaceSilhouetteOverlay(
+  props: UseSmileIDFaceSilhouetteOverlayProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  if (!props.visible) return null;
+  return (
+    <View style={{ opacity: 0.3, backgroundColor: theme.colors.stroke }} />
+  );
+}

package/src/presentation/components/use_smile_id_failed_content.tsx

@@ -0,0 +1,94 @@
+import { StyleSheet, Text, View } from "react-native";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDButton } from "./use_smile_id_button";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+
+export type UseSmileIDFailedContentProps = {
+  readonly title?: string;
+  readonly errorMessage?: string;
+  readonly retryLabel?: string;
+  readonly exitLabel?: string;
+  readonly onRetry?: () => void;
+  readonly onExit?: () => void;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Failure-state body of the processing screen's bottom card —
+ * title, error message, and the Retry / Exit buttons. The warning
+ * ✕ indicator is rendered separately, centered inside the face
+ * oval by the screen itself, so it doesn't appear twice.
+ */
+export function UseSmileIDFailedContent(props: UseSmileIDFailedContentProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const title = props.title ?? loc.siProcessingFailedTitle;
+  const message = props.errorMessage ?? loc.siProcessingFailedMessage;
+  const retryLabel = props.retryLabel ?? loc.siProcessingRetry;
+  const exitLabel = props.exitLabel ?? loc.siProcessingExit;
+  return (
+    <View
+      testID={props.testID}
+      style={[styles.container, { paddingVertical: theme.spacing.small }]}
+    >
+      <Text
+        style={{
+          ...theme.typography.cardTitle,
+          color: theme.colors.primary,
+          textAlign: "center",
+        }}
+      >
+        {title}
+      </Text>
+      <Text
+        style={{
+          ...theme.typography.body,
+          color: theme.colors.cardText,
+          marginTop: theme.spacing.small,
+          textAlign: "center",
+        }}
+      >
+        {message}
+      </Text>
+      <View
+        style={[
+          styles.buttons,
+          { marginTop: theme.spacing.large, gap: theme.spacing.small },
+        ]}
+      >
+        {props.onRetry ? (
+          <UseSmileIDButton
+            label={retryLabel}
+            onClick={props.onRetry}
+            variant="primary"
+            theme={theme}
+            testID="si_processing_retry_button"
+          />
+        ) : null}
+        {props.onExit ? (
+          <UseSmileIDButton
+            label={exitLabel}
+            onClick={props.onExit}
+            variant="secondary"
+            theme={theme}
+            testID="si_processing_exit_button"
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Without `alignSelf: "stretch"` the centering card hugs the text
+  // and the buttons collapse to their label widths.
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "stretch",
+  },
+  buttons: { alignSelf: "stretch" },
+});