@myazahq/kyc-sdk-react-native 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myazahq/kyc-sdk-react-native",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Myaza KYC SDK for React Native (Expo) — ID verification, liveness detection, and document capture",
   "author": "Flitstack Technologies Inc.",
   "repository": {

package/src/components/KycSheet.tsx

@@ -1,22 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { Image, Platform, ScrollView, StatusBar, View } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-import { StatusBarController } from './StatusBarController';
-import { initialWindowMetrics } from 'react-native-safe-area-context';
+import React, { useEffect, useState } from "react";
+import { Image, Platform, ScrollView, StatusBar, View } from "react-native";
+import { SvgXml } from "react-native-svg";
+import { StatusBarController } from "./StatusBarController";
+import { initialWindowMetrics } from "react-native-safe-area-context";
 
-import { headerSurface, radius, spacing } from '../config/theme';
-import { useKeyboardInset } from '../lib/use-keyboard-inset';
-import type { SupportedCountry } from '../types/config';
-import { useKycConfig, useTheme } from './runtime';
-import { useBranding } from './useBranding';
-import { MyazaText } from './Typography';
-import { PoweredBy } from './PoweredBy';
-import { StepHeader } from './StepHeader';
-import { StepIndicator } from './StepIndicator';
-import { GlassIconButton } from './GlassIconButton';
-import { GlassSurface } from './glass/GlassSurface';
-import { GlassGroup } from './glass/GlassGroup';
-import { FlashOverlay } from './FlashOverlay';
+import { headerSurface, radius, spacing } from "../config/theme";
+import { useKeyboardInset } from "../lib/use-keyboard-inset";
+import type { SupportedCountry } from "../types/config";
+import { useKycConfig, useTheme } from "./runtime";
+import { useBranding } from "./useBranding";
+import { MyazaText } from "./Typography";
+import { PoweredBy } from "./PoweredBy";
+import { StepHeader } from "./StepHeader";
+import { StepIndicator } from "./StepIndicator";
+import { ProgressBar } from "./ProgressBar";
+import { GlassIconButton } from "./GlassIconButton";
+import { GlassSurface } from "./glass/GlassSurface";
+import { GlassGroup } from "./glass/GlassGroup";
+import { FlashOverlay } from "./FlashOverlay";
 
 // Full-screen sheet shell — 1:1 with the Flutter SDK's KycBottomSheet:
 //   • a tinted header block (Liquid Glass on iOS 26) with a bottom border:
@@ -83,16 +84,20 @@ export function KycSheet({
   const keyboardInset = useKeyboardInset();
 
   const tint = headerSurface(colors, mode);
-  const showIndicator = progress != null && stepCount != null;
+  const hasProgress = progress != null && stepCount != null;
+  // The bar REPLACES the step row rather than joining it: two progress
+  // indicators on one header would be noise, and the point of the bar is that
+  // it costs no height.
+  const asBar = config.progressStyle === "bar";
+  const showIndicator = hasProgress && !asBar;
+  const showBar = hasProgress && asBar;
   const showBrand = !hideBrand && !!logoUri;
 
-
-
   // On iOS the modal is a pageSheet by default (sits below the status bar), but
   // `disableClose` presents it full-screen (to drop the swipe-to-dismiss), so it
   // then extends under the notch + over the home indicator and needs its own
   // safe-area insets — the pageSheet provides them for free.
-  const iosFullScreen = Platform.OS === 'ios' && config.disableClose === true;
+  const iosFullScreen = Platform.OS === "ios" && config.disableClose === true;
 
   // Static safe-area snapshot (captured at app launch — no SafeAreaProvider
   // needed). On Android 15+/API 35+ the modal is drawn EDGE-TO-EDGE, and
@@ -106,7 +111,7 @@ export function KycSheet({
   //   • iOS pageSheet: already below the status bar → no inset.
   //   • iOS full-screen (disableClose): 56 covers the status bar + notch.
   const topInset =
-    Platform.OS === 'android'
+    Platform.OS === "android"
       ? sa?.top || StatusBar.currentHeight || 28
       : iosFullScreen
         ? 56
@@ -114,95 +119,131 @@ export function KycSheet({
 
   // Clear the home indicator / nav bar at the bottom of a full-screen modal.
   const bottomInset =
-    Platform.OS === 'android' ? sa?.bottom ?? 0 : iosFullScreen ? 34 : 0;
+    Platform.OS === "android" ? (sa?.bottom ?? 0) : iosFullScreen ? 34 : 0;
 
   return (
-    <View style={{ flex: 1, backgroundColor: immersive ? '#000000' : colors.background }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: immersive ? "#000000" : colors.background,
+      }}
+    >
       {/* The SDK theme drives the status-bar glyph colour so it stays readable on
           the modal background — light glyphs in dark mode, dark in light mode.
           Android: JS StatusBar/SystemBars can't reach the <Modal>'s Dialog window,
           so a native view (StatusBarController) themes it from inside the modal.
           iOS: only the full-screen modal (disableClose) slides under the bar — the
           default pageSheet keeps the host bar above the card. */}
-      {Platform.OS === 'android' ? (
-        <StatusBarController barStyle={mode === 'dark' ? 'light' : 'dark'} />
+      {Platform.OS === "android" ? (
+        <StatusBarController barStyle={mode === "dark" ? "light" : "dark"} />
       ) : iosFullScreen ? (
-        <StatusBar barStyle={mode === 'dark' ? 'light-content' : 'dark-content'} animated />
+        <StatusBar
+          barStyle={mode === "dark" ? "light-content" : "dark-content"}
+          animated
+        />
       ) : null}
       <View style={{ flex: 1 }}>
         {/* Header block (glass on iOS 26, tinted surface otherwise) — dropped
             entirely when the step owns the display. */}
-        {immersive ? null : <GlassSurface
-          glassStyle="regular"
-          fallbackColor={tint}
-          style={{ borderBottomWidth: 1, borderBottomColor: colors.border, paddingBottom: spacing.md }}
-        >
-          {/* Row 1 — brand + controls */}
-          <View
+        {immersive ? null : (
+          <GlassSurface
+            glassStyle="regular"
+            fallbackColor={tint}
             style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingHorizontal: spacing.md,
-              paddingTop: topInset + spacing.sm,
+              // The bar sits ON this edge and paints its own track, so the
+              // border would double it.
+              borderBottomWidth: showBar ? 0 : 1,
+              borderBottomColor: colors.border,
+              paddingBottom: spacing.md,
             }}
           >
-            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-              {showBrand ? <BrandBar logoUri={logoUri!} companyName={companyName} /> : null}
-            </View>
+            {/* Row 1 — brand + controls */}
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                paddingHorizontal: spacing.md,
+                paddingTop: topInset + spacing.sm,
+              }}
+            >
+              <View
+                style={{ flex: 1, flexDirection: "row", alignItems: "center" }}
+              >
+                {showBrand ? (
+                  <BrandBar logoUri={logoUri!} companyName={companyName} />
+                ) : null}
+              </View>
 
-            {/* Header controls. When BOTH the theme toggle and close show, they
+              {/* Header controls. When BOTH the theme toggle and close show, they
                 share a single Liquid Glass capsule (each button `plain`). When
                 only one shows — the consumer disabled the other (`disableClose`
                 or `showThemeToggle: false`) — that button stands on its own
                 glass instead of a one-icon capsule. Neither → nothing. */}
-            {(() => {
-              const showToggle = config.showThemeToggle !== false;
-              const showClose = !config.disableClose;
-              const toggleBtn = showToggle ? (
-                <GlassIconButton
-                  icon={mode === 'dark' ? 'sun' : 'moon'}
-                  onPress={toggle}
-                  solid
-                  plain={showClose}
-                  accessibilityLabel="Toggle theme"
-                />
-              ) : null;
-              const closeBtn = showClose ? (
-                <GlassIconButton
-                  icon="close"
-                  onPress={onClose}
-                  plain={showToggle}
-                  accessibilityLabel="Close"
-                />
-              ) : null;
+              {(() => {
+                const showToggle = config.showThemeToggle !== false;
+                const showClose = !config.disableClose;
+                const toggleBtn = showToggle ? (
+                  <GlassIconButton
+                    icon={mode === "dark" ? "sun" : "moon"}
+                    onPress={toggle}
+                    solid
+                    plain={showClose}
+                    accessibilityLabel="Toggle theme"
+                  />
+                ) : null;
+                const closeBtn = showClose ? (
+                  <GlassIconButton
+                    icon="close"
+                    onPress={onClose}
+                    plain={showToggle}
+                    accessibilityLabel="Close"
+                  />
+                ) : null;
 
-              if (showToggle && showClose) {
-                return (
-                  <GlassGroup style={{ gap: 2 }}>
-                    {toggleBtn}
-                    {closeBtn}
-                  </GlassGroup>
-                );
-              }
-              // Exactly one (or zero) — render it standalone with its own glass.
-              return toggleBtn ?? closeBtn;
-            })()}
-          </View>
-
-          {/* Row 2 — title + back + flag */}
-          {title || onBack ? (
-            <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.sm }}>
-              <StepHeader title={title} description={description} onBack={onBack} country={country} />
+                if (showToggle && showClose) {
+                  return (
+                    <GlassGroup style={{ gap: 2 }}>
+                      {toggleBtn}
+                      {closeBtn}
+                    </GlassGroup>
+                  );
+                }
+                // Exactly one (or zero) — render it standalone with its own glass.
+                return toggleBtn ?? closeBtn;
+              })()}
             </View>
-          ) : null}
 
-          {/* Row 3 — step indicator */}
-          {showIndicator ? (
-            <View style={{ marginTop: spacing.md }}>
-              <StepIndicator progress={progress!} stepCount={stepCount!} />
-            </View>
-          ) : null}
-        </GlassSurface>}
+            {/* Row 2 — title + back + flag */}
+            {title || onBack ? (
+              <View
+                style={{
+                  paddingHorizontal: spacing.md,
+                  paddingTop: spacing.sm,
+                }}
+              >
+                <StepHeader
+                  title={title}
+                  description={description}
+                  onBack={onBack}
+                  country={country}
+                />
+              </View>
+            ) : null}
+
+            {/* Row 3 — step indicator */}
+            {showIndicator ? (
+              <View style={{ marginTop: spacing.md }}>
+                <StepIndicator progress={progress!} stepCount={stepCount!} />
+              </View>
+            ) : null}
+
+            {/* Absolutely positioned, so it overlays the header's bottom edge
+                instead of adding a row — the whole reason to prefer it. */}
+            {showBar ? (
+              <ProgressBar progress={progress!} stepCount={stepCount!} />
+            ) : null}
+          </GlassSurface>
+        )}
 
         {/* Step body */}
         {fillsViewport ? (
@@ -210,7 +251,9 @@ export function KycSheet({
           // padding exists so scrolled content clears the home indicator, but
           // in a fixed-height body it just lifts the list off the footer and
           // reads as a dead band. PoweredBy owns the safe-area inset already.
-          <View style={{ flex: 1, padding: spacing.md, paddingBottom: spacing.md }}>
+          <View
+            style={{ flex: 1, padding: spacing.md, paddingBottom: spacing.md }}
+          >
             {children}
           </View>
         ) : (
@@ -236,7 +279,9 @@ export function KycSheet({
             // input into view — the platform's own handling, which a
             // KeyboardAvoidingView only approximates. Without this the
             // keyboard simply covered the bottom of every input step.
-            automaticallyAdjustKeyboardInsets={Platform.OS === 'ios' && !immersive}
+            automaticallyAdjustKeyboardInsets={
+              Platform.OS === "ios" && !immersive
+            }
           >
             {children}
           </ScrollView>
@@ -265,14 +310,20 @@ export function KycSheet({
 
 /** Whether a logo URI points at an SVG (extension check, query-safe). */
 function isSvgUri(uri: string): boolean {
-  const path = uri.split('?')[0] ?? uri;
-  return path.toLowerCase().endsWith('.svg');
+  const path = uri.split("?")[0] ?? uri;
+  return path.toLowerCase().endsWith(".svg");
 }
 
 // Persistent header brand — circular logo avatar + company name. A broken/missing
 // logo image collapses the whole brand bar (mirrors the web SDK's `onError` and
 // Flutter's `errorBuilder`), so the header never shows a broken-image box.
-function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: string }): React.ReactElement | null {
+function BrandBar({
+  logoUri,
+  companyName,
+}: {
+  logoUri: string;
+  companyName: string;
+}): React.ReactElement | null {
   const { colors } = useTheme();
   const [broken, setBroken] = useState(false);
   const svg = isSvgUri(logoUri);
@@ -285,7 +336,9 @@ function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: stri
     if (!svg) return;
     let cancelled = false;
     fetch(logoUri)
-      .then((r) => (r.ok ? r.text() : Promise.reject(new Error(String(r.status)))))
+      .then((r) =>
+        r.ok ? r.text() : Promise.reject(new Error(String(r.status))),
+      )
       .then((text) => {
         if (!cancelled) setXml(text);
       })
@@ -299,54 +352,83 @@ function BrandBar({ logoUri, companyName }: { logoUri: string; companyName: stri
   if (broken) return null;
   return (
     <>
+      {/* TWO layers, deliberately.
+
+          A shadow and `overflow: 'hidden'` CANNOT live on the same view on iOS:
+          overflow-hidden compiles to `masksToBounds`, which clips the shadow
+          away with everything else outside the bounds. Android draws `elevation`
+          outside the view, so it survived there — which is why the chip lost its
+          ring on iPhone only.
+
+          So the outer view owns the border and shadow and does NOT clip, and the
+          inner one clips the logo. Same split Flutter gets for free by putting
+          the border on the Container's decoration and the crop in a ClipOval. */}
       <View
         style={{
           width: 28,
           height: 28,
           borderRadius: radius.full,
-          backgroundColor: '#FFFFFF',
-          // Light border + soft shadow — the same treatment as the Flutter
-          // SDK's brand chip (black 5% ring, black 6% blur-4 y-1 shadow) and
-          // the web SDK's ring-1 ring-black/5.
+          backgroundColor: "#FFFFFF",
+          // Light ring + soft shadow — the same treatment as the Flutter SDK's
+          // brand chip (black 5% ring, black 6% blur-4 y-1 shadow) and the web
+          // SDK's ring-1 ring-black/5.
           borderWidth: 1,
-          borderColor: 'rgba(0,0,0,0.05)',
-          shadowColor: '#000000',
+          borderColor: "rgba(0,0,0,0.05)",
+          shadowColor: "#000000",
           shadowOpacity: 0.06,
           shadowRadius: 4,
           shadowOffset: { width: 0, height: 1 },
           elevation: 1,
-          overflow: 'hidden',
           marginRight: spacing.sm,
-          alignItems: 'center',
-          justifyContent: 'center',
+          alignItems: "center",
+          justifyContent: "center",
         }}
       >
-        {/* Fill + cover-crop the circle. The borderRadius is repeated on the
-            Image itself because iOS doesn't reliably clip an Image child to a
-            parent's rounded corners (mirrors Flutter's ClipOval + cover).
-            SVG logos (common — the brand import picks up site favicons) can't
-            be decoded by <Image>; the fetched markup renders via SvgXml at
-            the chip's inner size (26 = 28 minus the 1px border each side),
-            slice = cover-crop. */}
-        {svg ? (
-          xml ? (
-            <SvgXml
-              xml={xml}
-              width={26}
-              height={26}
-              preserveAspectRatio="xMidYMid slice"
+        <View
+          style={{
+            // Fills the parent's CONTENT box (inside its 1px border) and is the
+            // only thing that clips, so the logo reaches the ring on every side.
+            alignSelf: "stretch",
+            flex: 1,
+            borderRadius: radius.full,
+            overflow: "hidden",
+          }}
+        >
+          {/* Fill + cover-crop, matching Flutter's SizedBox.expand + BoxFit.cover.
+
+            Sized in PERCENTAGES, not the literal 26 this used to hardcode: that
+            number was "28 minus the 1px border on each side", so it silently
+            went wrong the moment either value changed, and it left the logo a
+            pixel short of the ring. The clipping parent now owns the geometry.
+
+            SVG logos are common here because the brand import picks up site
+            favicons, and <Image> cannot decode SVG at all — hence the fetched
+            markup through SvgXml. `slice` is the SVG spelling of cover-crop. */}
+          {svg ? (
+            xml ? (
+              <SvgXml
+                xml={xml}
+                width="100%"
+                height="100%"
+                preserveAspectRatio="xMidYMid slice"
+              />
+            ) : null
+          ) : (
+            <Image
+              source={{ uri: logoUri }}
+              style={{ width: "100%", height: "100%" }}
+              resizeMode="cover"
+              onError={() => setBroken(true)}
             />
-          ) : null
-        ) : (
-          <Image
-            source={{ uri: logoUri }}
-            style={{ width: '100%', height: '100%', borderRadius: radius.full }}
-            resizeMode="cover"
-            onError={() => setBroken(true)}
-          />
-        )}
+          )}
+        </View>
       </View>
-      <MyazaText variant="heading3" numberOfLines={1} color={colors.textDark} style={{ flexShrink: 1, fontSize: 14 }}>
+      <MyazaText
+        variant="heading3"
+        numberOfLines={1}
+        color={colors.textDark}
+        style={{ flexShrink: 1, fontSize: 14 }}
+      >
         {companyName}
       </MyazaText>
     </>

package/src/components/MyazaInput.tsx

@@ -11,6 +11,7 @@ type BlurHandler = NonNullable<TextInputProps['onBlur']>;
 
 import { radius, sizing, spacing } from '../config/theme';
 import { useTheme } from './runtime';
+import { useInputFontFamily } from './fonts';
 import { MyazaText } from './Typography';
 
 // Branded text input with label, helper, and error states. Mirrors the Flutter
@@ -60,6 +61,9 @@ export function MyazaInput({
   onBlur,
 }: MyazaInputProps): React.ReactElement {
   const { colors } = useTheme();
+  // TextInput does not inherit fontFamily in RN — set it or the field (and its
+  // placeholder) renders in the system face beside brand-font text.
+  const fontFamily = useInputFontFamily();
   const [focused, setFocused] = useState(false);
 
   // Mirror the Flutter SDK's MyazaInput border states:
@@ -113,7 +117,7 @@ export function MyazaInput({
             autoFocus={autoFocus}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16 }}
+            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16, fontFamily }}
           />
           {suffix ? <View style={{ width: spacing.sm }} /> : null}
           {suffix}
@@ -142,6 +146,7 @@ export function MyazaInput({
             color: colors.textDark,
             backgroundColor: colors.background,
             fontSize: 16,
+            fontFamily,
           }}
         />
       )}

package/src/components/MyazaSelect.tsx

@@ -3,6 +3,7 @@ import { Modal, Pressable, ScrollView, TextInput, useWindowDimensions, View } fr
 
 import { radius, spacing } from '../config/theme';
 import { useTheme } from './runtime';
+import { useInputFontFamily } from './fonts';
 import { MyazaText } from './Typography';
 import { Icon } from './Icon';
 
@@ -72,6 +73,9 @@ export function MyazaSelect<T extends string | number>({
   searchable?: boolean;
 }): React.ReactElement {
   const { colors } = useTheme();
+  // TextInput does not inherit fontFamily in RN — set it or the search field
+  // (and its placeholder) renders in the system face.
+  const fontFamily = useInputFontFamily();
   const { height: windowHeight } = useWindowDimensions();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -207,6 +211,7 @@ export function MyazaSelect<T extends string | number>({
                     paddingHorizontal: spacing.sm,
                     color: colors.textDark,
                     fontSize: 15,
+                    fontFamily,
                   }}
                 />
                 {query !== '' ? (

package/src/components/PoweredBy.tsx

@@ -45,17 +45,9 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
         alignItems: 'center',
       }}
     >
-      {/* openURL can reject (no browser / a locked-down device). The mark itself
-          is the point, so a failed open is swallowed rather than surfaced. */}
-      <Pressable
-        onPress={() => {
-          void Linking.openURL(PRODUCT_URL).catch(() => undefined);
-        }}
-        accessibilityRole="link"
-        accessibilityLabel="Powered by Myaza Trust"
-        hitSlop={8}
-        style={{ flexDirection: 'row', alignItems: 'center', gap: 10, opacity: 0.9 }}
-      >
+      {/* The ROW is not the link — only the mark is. "Powered by" is a label,
+          not a destination, so it does not carry the tap. */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, opacity: 0.9 }}>
         {/* Small and muted on purpose — "Powered by" is connective tissue, not
             the message. The BRAND carries the weight. */}
         <MyazaText variant="body" color={markColor} style={{ flexShrink: 1, fontSize: 12 }}>
@@ -63,8 +55,21 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
         </MyazaText>
 
         {/* The lockup, spaced TIGHTER than the gap before it so it reads as one
-            mark rather than three evenly-spaced items. */}
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}>
+            mark rather than three evenly-spaced items. This is the link:
+            wordmark, rule and TRUST are one brand, so the whole lockup is the
+            target — but nothing beyond it is.
+
+            openURL can reject (no browser / a locked-down device). The mark
+            itself is the point, so a failed open is swallowed. */}
+        <Pressable
+          onPress={() => {
+            void Linking.openURL(PRODUCT_URL).catch(() => undefined);
+          }}
+          accessibilityRole="link"
+          accessibilityLabel="Myaza Trust"
+          hitSlop={8}
+          style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}
+        >
           <MyazaWordmark height={28} wordmark={markColor} />
 
           <View style={{ width: 1, height: 24, backgroundColor: markColor, opacity: 0.35 }} />
@@ -82,8 +87,8 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
           >
             TRUST
           </MyazaText>
-        </View>
-      </Pressable>
+        </Pressable>
+      </View>
     </View>
   );
 }

package/src/components/ProgressBar.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, useAnimatedValue, View } from 'react-native';
+
+import { useTheme } from './runtime';
+
+// The quiet alternative to StepIndicator: a single thin bar sitting ON the
+// header's bottom edge, replacing its border rather than adding a row beneath
+// it — so choosing it costs the header no height at all.
+//
+// Unlike the step circles it does not say WHICH step you are on or how many
+// there are, which is the trade: it is unaffected by step count, so a 14-step
+// KYB flow draws exactly like a 4-step one. Hosts who would rather the chrome
+// said less opt in with `progressStyle: 'bar'`.
+
+export interface ProgressBarProps {
+  /** 0.0–1.0 progress fraction. */
+  progress: number;
+  /** Steps in the flow — announced, not drawn. */
+  stepCount: number;
+}
+
+/**
+ * Thickness of the bar.
+ *
+ * 5, not the 1px border it replaces: at hairline weight it read as a rendering
+ * artefact rather than a deliberate indicator, and the filled portion needs
+ * enough body for its colour to register against the track at a glance.
+ */
+const HEIGHT = 5;
+
+export function ProgressBar({ progress, stepCount }: ProgressBarProps): React.ReactElement {
+  const { colors } = useTheme();
+  const fraction = Math.min(Math.max(progress, 0), 1);
+  const step = Math.min(Math.max(Math.round(fraction * stepCount), 1), stepCount);
+
+  // Animated so advancing a step reads as movement rather than a jump — the
+  // motion IS the feedback that the step was accepted. 250ms sits inside the
+  // 150–300ms micro-interaction band; ease-out because it is entering.
+  const width = useAnimatedValue(fraction);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      // Don't animate the initial mount from 0 — the flow may be resumed
+      // mid-way, and a bar sweeping in from empty would misreport where the
+      // user actually is.
+      first.current = false;
+      width.setValue(fraction);
+      return;
+    }
+    Animated.timing(width, {
+      toValue: fraction,
+      duration: 250,
+      easing: Easing.out(Easing.cubic),
+      // Width cannot be driven natively, and a scaleX transform would squash
+      // the rounded cap. The bar is one small view, so the JS driver is fine.
+      useNativeDriver: false,
+    }).start();
+  }, [fraction, width]);
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: HEIGHT,
+        // The track doubles as the header's bottom border, which is why the
+        // header drops its own when this is shown.
+        backgroundColor: colors.border,
+      }}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`Step ${step} of ${stepCount}`}
+      accessibilityValue={{ min: 1, max: stepCount, now: step }}
+    >
+      <Animated.View
+        style={{
+          height: HEIGHT,
+          backgroundColor: colors.primary,
+          borderTopRightRadius: HEIGHT / 2,
+          borderBottomRightRadius: HEIGHT / 2,
+          width: width.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0%', '100%'],
+          }),
+        }}
+      />
+    </View>
+  );
+}