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

package/src/components/StepHeader.tsx

@@ -12,7 +12,10 @@ import { CountryFlag } from './CountryFlag';
 // title (heading2) + optional country flag, then an optional description below
 // (indented to align under the title when a back button is present).
 
-const BACK_FOOTPRINT = 28 + spacing.sm; // back button width + gap
+// Back button width + gap. Kept in step with BACK_SIZE below: it indents the
+// description so it starts under the title rather than under the button.
+const BACK_SIZE = 40;
+const BACK_FOOTPRINT = BACK_SIZE + spacing.sm;
 
 export interface StepHeaderProps {
   title: string;
@@ -28,7 +31,17 @@ export function StepHeader({ title, description, onBack, country }: StepHeaderPr
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         {onBack ? (
           <View style={{ marginRight: spacing.sm }}>
-            <GlassIconButton icon="back" onPress={onBack} size={28} iconSize={22} accessibilityLabel="Back" />
+            {/* Same 40pt footprint as the theme/close chrome above it — a
+                smaller glass circle here read as a different class of control,
+                and 28pt was under the 44pt minimum touch target even with
+                hitSlop. */}
+            <GlassIconButton
+              icon="back"
+              onPress={onBack}
+              size={BACK_SIZE}
+              iconSize={22}
+              accessibilityLabel="Back"
+            />
           </View>
         ) : null}
         <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>

package/src/components/StepView.tsx

@@ -18,6 +18,8 @@ import { BusinessKeyPeopleStep } from '../screens/BusinessKeyPeopleStep';
 import { BusinessDocumentsStep } from '../screens/BusinessDocumentsStep';
 import { ApplicantRoleStep } from '../screens/ApplicantRoleStep';
 import { NfcStep } from '../screens/NfcStep';
+import { MultiIdProgress } from './MultiIdProgress';
+import { useMultiIdPlan } from '../lib/use-multi-id-plan';
 
 // ---------------------------------------------------------------------------
 // The step router — which screen a step renders.
@@ -26,7 +28,31 @@ import { NfcStep } from '../screens/NfcStep';
 // and the step order, and nothing else.
 // ---------------------------------------------------------------------------
 
+/** The steps a multi-ID run walks once PER ID — the ones whose screen is about
+ *  one particular check and therefore needs the position strip above it. */
+const MULTI_ID_STEPS: readonly KYCStep[] = [
+  'id-type',
+  'id-input',
+  'document-capture',
+  'nfc',
+  'liveness',
+];
+
+/** Wraps a step's screen with the multi-ID position strip when a run is active. */
 export function StepView({ step, onClose }: { step: KYCStep; onClose: () => void }): React.ReactElement {
+  const plan = useMultiIdPlan();
+  if (plan && MULTI_ID_STEPS.includes(step)) {
+    return (
+      <View style={{ flex: 1 }}>
+        <MultiIdProgress plan={plan} />
+        <View style={{ flex: 1 }}>{stepScreen(step, onClose)}</View>
+      </View>
+    );
+  }
+  return stepScreen(step, onClose);
+}
+
+function stepScreen(step: KYCStep, onClose: () => void): React.ReactElement {
   switch (step) {
     case 'consent':
       return <ConsentStep />;

package/src/components/glass/ChromeGlass.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import { GlassSurface } from './GlassSurface';
+
+// ---------------------------------------------------------------------------
+// ChromeGlass — the surface behind controls that float over the LIVE CAMERA.
+//
+// This is the strongest case for Liquid Glass in the SDK: the chrome floats
+// above content, it is interactive, and the background is a moving scene rather
+// than a flat tint, which is exactly the condition the material was designed
+// for (it is what the iOS Camera app does).
+//
+// Two properties are load-bearing, and both exist to protect the white glyphs:
+//
+//   • `colorScheme: 'dark'` — forced, NOT the app theme. These icons are white
+//     against a camera feed, not against the app's background, so a light app
+//     theme would put pale glass under white icons.
+//
+//   • `tintColor` — a dark bias over the glass. Plain glass is translucent, so
+//     a white passport page filling the frame would wash a white glyph out.
+//     The flat scrim this replaces guaranteed contrast; the tint is what buys
+//     that guarantee back while keeping the material's depth and adaptivity.
+//
+// Off iOS 26 it renders the ORIGINAL flat scrim, so Android and older iOS are
+// pixel-identical to before. Glass stays purely additive.
+// ---------------------------------------------------------------------------
+
+/** The flat scrim used before glass, and still the fallback everywhere else. */
+export const CHROME_SCRIM = 'rgba(0,0,0,0.55)';
+
+/** Dark bias laid over the glass so white glyphs survive a bright scene. */
+const CHROME_TINT = 'rgba(0,0,0,0.28)';
+
+export interface ChromeGlassProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Whether the glass reacts to touch. True for buttons, false for pills. */
+  interactive?: boolean;
+  /**
+   * Overrides the scrim on the fallback path. Pass the value the call site used
+   * before, so non-glass devices keep their exact previous appearance.
+   */
+  scrim?: string;
+}
+
+export function ChromeGlass({
+  children,
+  style,
+  interactive = false,
+  scrim = CHROME_SCRIM,
+}: ChromeGlassProps): React.ReactElement {
+  return (
+    <GlassSurface
+      glassStyle="regular"
+      colorScheme="dark"
+      tintColor={CHROME_TINT}
+      interactive={interactive}
+      fallbackColor={scrim}
+      style={style}
+    >
+      {children}
+    </GlassSurface>
+  );
+}

package/src/components/glass/FloatingSheet.tsx

@@ -0,0 +1,242 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  Modal,
+  PanResponder,
+  Pressable,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { spacing } from '../../config/theme';
+import { displayCornerRadius } from '../../lib/screen-corners';
+import { useTheme } from '../runtime';
+import { GlassIconButton } from '../GlassIconButton';
+import { GlassSheet } from './GlassSheet';
+
+// ---------------------------------------------------------------------------
+// FloatingSheet — the shell every bottom sheet in the SDK sits in.
+//
+// A floating card: detached from the screen's edges by a TIGHT gap (8px), all
+// four corners rounded, a grab handle centred under a whisper of padding. The
+// gap is deliberately small — the earlier float swam in margin and spent
+// screen height a phone does not have, while welding it flush read as a
+// different surface from the SDK's glass language. The 8px is what says
+// "card above the page" without costing content room.
+//
+// It offers three ways out, because a sheet that can only be dismissed one way
+// is a trap for whichever user does not find that way:
+//   • swipe it down,
+//   • the close button,
+//   • tap the backdrop.
+//
+// Shared rather than copied into each sheet: swipe-to-dismiss is the kind of
+// thing that rots when it exists in four places, and the sheets would drift
+// apart on handle size, dismiss threshold and safe-area maths.
+// ---------------------------------------------------------------------------
+
+/** Detached from the screen edges by a tight, even gap. */
+const FLOAT_GAP = spacing.sm;
+
+/**
+ * The float's corner radius is PRESENTATION GRAMMAR, not branding — and it is
+ * computed the way Apple computes nested corners: CONCENTRIC with the display,
+ * i.e. the device's own corner radius minus the gap, so the sheet's curve runs
+ * parallel to the phone's. Square-cornered screens have no curve to be
+ * concentric with, so they keep the share-sheet look instead. Never the
+ * brand-scaled `radius` tokens: an org whose buttons are 4px square should not
+ * get a squared-off bottom sheet.
+ */
+const screenRadius = displayCornerRadius();
+const SHEET_RADIUS = screenRadius > 0 ? Math.max(screenRadius - FLOAT_GAP, 16) : 38;
+
+/**
+ * The corner curve eats into the header, so the close button's inset SCALES
+ * with the radius — ~0.42·R is where the system sheet sits its own X. A fixed
+ * inset that cleared 38pt corners sat ON the curve at a 16-class phone's 47.
+ */
+const CLOSE_INSET = Math.max(14, Math.round(SHEET_RADIUS * 0.42));
+
+/** How far down a drag must travel before release dismisses instead of springing back. */
+const DISMISS_DISTANCE = 90;
+/** A flick dismisses at any distance — velocity is intent, distance is only evidence of it. */
+const DISMISS_VELOCITY = 0.7;
+
+export interface FloatingSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+  /** Extra bottom offset, e.g. a raised keyboard. */
+  bottomOffset?: number;
+  /** Caps the panel; the body owns its own scrolling. */
+  maxHeight?: number;
+  /** Accessible label for the close button. */
+  closeLabel?: string;
+  /**
+   * Fires once the modal has finished going away (iOS only, from `Modal`).
+   *
+   * Needed by callers that must wait for THIS sheet to be gone before opening
+   * another one — iOS refuses to present a second modal while the first is
+   * still on screen.
+   */
+  onDismiss?: () => void;
+}
+
+export function FloatingSheet({
+  visible,
+  onClose,
+  children,
+  bottomOffset = 0,
+  maxHeight,
+  closeLabel = 'Close',
+  onDismiss,
+}: FloatingSheetProps): React.ReactElement {
+  const { colors } = useTheme();
+  const translateY = useRef(new Animated.Value(0)).current;
+
+  // The PanResponder is built once, so it would otherwise close over the FIRST
+  // onClose forever and stop dismissing after the parent re-renders.
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // A sheet reopened after being dragged away must not still be off-screen.
+  useEffect(() => {
+    if (visible) translateY.setValue(0);
+  }, [visible, translateY]);
+
+  const pan = useRef(
+    PanResponder.create({
+      // Claim on touch START, not just on move.
+      //
+      // The panel is wrapped in a Pressable to swallow backdrop taps, and a
+      // Pressable takes the responder the instant a finger lands. Asking only
+      // on move meant that Pressable had already won and the drag never began.
+      // `onStartShouldSetResponder` bubbles from the deepest view up, and this
+      // header is deeper than that wrapper, so claiming here beats it — while
+      // the close button, deeper still, keeps winning its own taps.
+      onStartShouldSetPanResponder: () => true,
+      // Kept for the case where a touch begins as something else and turns
+      // into a drag. Downward only: stealing horizontal or upward gestures
+      // would make the scrollable bodies below feel broken.
+      onMoveShouldSetPanResponder: (_, g) => g.dy > 4 && Math.abs(g.dy) > Math.abs(g.dx),
+      // Once the drag owns the gesture, nothing may take it mid-pull.
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderMove: (_, g) => {
+        // Downward only: dragging up must not detach the sheet from its corner.
+        if (g.dy > 0) translateY.setValue(g.dy);
+      },
+      onPanResponderRelease: (_, g) => {
+        if (g.dy > DISMISS_DISTANCE || g.vy > DISMISS_VELOCITY) {
+          Animated.timing(translateY, {
+            toValue: 700,
+            duration: 180,
+            easing: Easing.in(Easing.cubic),
+            useNativeDriver: true,
+          }).start(() => onCloseRef.current());
+          return;
+        }
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          bounciness: 0,
+        }).start();
+      },
+    }),
+  ).current;
+
+  // A TIGHT float: detached from the edges by a whisper (8px), not welded to
+  // them and not swimming in margin. The gap is what says "card above the
+  // page" — any more of it and the sheet loses height it needs for content.
+  const panel: ViewStyle = {
+    marginHorizontal: FLOAT_GAP,
+    // The CARD sits low, like the system share sheet: a tight 8px off the
+    // screen edge, with the home indicator riding ON the card. Reserving the
+    // whole safe-area under it left the sheet hovering mid-air. The CONTENT
+    // still clears the indicator — that inset moves INSIDE the card (below).
+    marginBottom: bottomOffset > 0 ? bottomOffset + FLOAT_GAP : FLOAT_GAP,
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      onDismiss={onDismiss}
+    >
+      <Pressable
+        onPress={onClose}
+        accessibilityLabel="Dismiss"
+        style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}
+      >
+        <Animated.View style={[panel, { transform: [{ translateY }] }]}>
+          {/* Swallows taps so only the backdrop dismisses. */}
+          <Pressable onPress={() => undefined}>
+            <GlassSheet
+              style={{
+                // Floating card: all four corners round, not just the top
+                // pair — at the SYSTEM sheet's radius, never the brand scale.
+                borderRadius: SHEET_RADIUS,
+                maxHeight,
+                // No bottom padding, deliberately: a scrolling body runs all
+                // the way to the lip and is CLIPPED by the curve — content
+                // sliding under the rounded edge, the way the system does it.
+                overflow: 'hidden',
+              }}
+            >
+              {/* The drag lives on the header, NOT the whole panel: bodies here
+                  scroll, and a panel-wide responder fights the list for every
+                  downward swipe. */}
+              <View
+                {...pan.panHandlers}
+                style={{
+                  flexDirection: 'row',
+                  // TOP, not centre. Centred, the handle sits against the
+                  // tallest child, so the close button's height decided how far
+                  // down the panel the grabber sat. Each now hangs off the top
+                  // with its own offset, which is what puts the handle at the
+                  // lip where a grabber belongs. Matches the Flutter sheet.
+                  alignItems: 'flex-start',
+                  // Radius-proportional (CLOSE_INSET): deep concentric corners
+                  // need the button further from the edges than shallow ones.
+                  paddingHorizontal: CLOSE_INSET,
+                }}
+              >
+                <View style={{ flex: 1 }} />
+                {/* Grab handle — says "draggable" without a caption. */}
+                <View
+                  style={{
+                    width: 36,
+                    height: 5,
+                    borderRadius: 2.5,
+                    marginTop: 8,
+                    backgroundColor: colors.border,
+                  }}
+                />
+                {/* Pushed down as well as in: the button's own box already
+                    holds the icon off its edges, so set flush to the top it
+                    hung off the corner instead of tucking into it. */}
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: 'flex-end',
+                    marginTop: Math.min(16, Math.max(6, CLOSE_INSET - 6)),
+                  }}
+                >
+                  <GlassIconButton
+                    icon="close"
+                    onPress={onClose}
+                    size={32}
+                    iconSize={18}
+                    accessibilityLabel={closeLabel}
+                  />
+                </View>
+              </View>
+              {children}
+            </GlassSheet>
+          </Pressable>
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+}

package/src/components/glass/GlassSheet.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../runtime';
+import { GlassSurface } from './GlassSurface';
+
+// ---------------------------------------------------------------------------
+// GlassSheet — the panel of a bottom sheet that floats above the flow.
+//
+// A sheet is a surface, not a control, which is the one case where glass is
+// right for something non-interactive: it is a layer that has risen above the
+// content, and letting that content show through is what says so.
+//
+// `glassStyle: 'regular'` rather than `'clear'` on purpose. These panels are
+// full of list text that has to stay readable, and `regular` is the frosted
+// variant; `clear` is for chrome over imagery, where there is little to read.
+//
+// The colour scheme follows the APP theme (unlike the camera chrome, which is
+// pinned dark) because a sheet sits over the SDK's own background, so its text
+// is themed text on a themed surface.
+//
+// Off iOS 26 it is the opaque themed panel it has always been.
+// ---------------------------------------------------------------------------
+
+export interface GlassSheetProps {
+  children?: React.ReactNode;
+  /** Panel geometry — corner radii and padding. */
+  style?: StyleProp<ViewStyle>;
+}
+
+export function GlassSheet({ children, style }: GlassSheetProps): React.ReactElement {
+  const { colors, mode } = useTheme();
+  return (
+    <GlassSurface glassStyle="regular" fallbackColor={colors.background} style={style}>
+      {/* A WHISPER of scrim between the glass and the content — the sheet
+          must stay glass (the flow showing through is the point). This only
+          takes the edge off a strongly tinted flow so body text keeps
+          contrast; anything critical sits on its own alert panel besides.
+          Slightly heavier in light mode, where the wash was worst. */}
+      <View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          { backgroundColor: colors.background, opacity: mode === 'light' ? 0.35 : 0.18 },
+        ]}
+      />
+      {children}
+    </GlassSurface>
+  );
+}

package/src/components/glass/GlassSurface.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
-import { GlassView, isLiquidGlassAvailable, type GlassStyle } from 'expo-glass-effect';
+import {
+  GlassView,
+  isLiquidGlassAvailable,
+  type GlassColorScheme,
+  type GlassStyle,
+} from 'expo-glass-effect';
 
 import { useTheme } from '../runtime';
 
@@ -10,7 +15,21 @@ import { useTheme } from '../runtime';
 // On iOS 26+ (where `isLiquidGlassAvailable()` is true) it renders a native
 // `GlassView`; everywhere else (Android, iOS < 26) it falls back to a plain
 // token-styled surface. Glass is purely additive — every screen looks correct
-// without it. Used for the sheet shell, header, primary buttons, and ID cards.
+// without it.
+//
+// Where it is used, and the rule behind that: glass is for things that FLOAT
+// above content — surfaces (the sheet shell + header, bottom sheets via
+// `GlassSheet`) and interactive chrome (the header icon buttons, the camera
+// controls via `ChromeGlass`).
+//
+// Deliberately NOT used for:
+//   • the primary CTA — it needs a solid brand fill to read as the one clear
+//     action, and a translucent one competes with everything behind it;
+//   • labels and status pills (the brand bar, capture hints, the sandbox
+//     strip) — at capsule scale glass reads as a control, so wrapping static
+//     text in it promises a tap that does nothing;
+//   • any "on" state (torch lit, toggle active) — a material that samples
+//     what is behind it cannot state a binary unambiguously.
 // ---------------------------------------------------------------------------
 
 const liquidGlass = Platform.OS === 'ios' && isLiquidGlassAvailable();
@@ -34,6 +53,14 @@ export interface GlassSurfaceProps {
    * theme's elevated surface (`backgroundSecondary`).
    */
   fallbackColor?: string;
+  /**
+   * Forces the glass to render light or dark, overriding the app theme.
+   *
+   * Chrome that floats over the CAMERA needs this: its glyphs are white against
+   * a live scene, not against the app's background, so following a light app
+   * theme would render pale glass under white icons.
+   */
+  colorScheme?: GlassColorScheme;
 }
 
 export function GlassSurface({
@@ -43,6 +70,7 @@ export function GlassSurface({
   tintColor,
   interactive = false,
   fallbackColor,
+  colorScheme,
 }: GlassSurfaceProps): React.ReactElement {
   const { colors, mode } = useTheme();
 
@@ -53,7 +81,7 @@ export function GlassSurface({
         glassEffectStyle={glassStyle}
         tintColor={tintColor}
         isInteractive={interactive}
-        colorScheme={mode}
+        colorScheme={colorScheme ?? mode}
       >
         {children}
       </GlassView>

package/src/components/stepHeaderMeta.tsx

@@ -47,7 +47,9 @@ export function stepHeaderMeta(
       case 'id-type':
         return { title: 'Select ID Type', description: "Choose the type of identification document you'd like to use." };
       case 'id-input':
-        return { title: 'Enter Your Details', description: `Provide your ${label} for verification.` };
+        // The number is all this step asks for. The name comes from the
+        // integrator (mount props / the session), never the applicant.
+        return { title: `Enter your ${label}`, description: 'We’ll check this against the official record.' };
       case 'document-capture':
         // Phase-aware title/description live in the header (synced from the
         // capture screen via `documentCapturePhase`) — mirrors Flutter.

package/src/components/viewfinder/ImmersiveBottomBar.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
-import { ActivityIndicator, Pressable, View } from 'react-native';
+import { ActivityIndicator, Pressable, View, type ViewStyle } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
 import { radius, spacing } from '../../config/theme';
 import { useTheme } from '../runtime';
 import { MyazaText } from '../Typography';
 import { Icon } from '../Icon';
+import { CHROME_SCRIM, ChromeGlass } from '../glass/ChromeGlass';
 
-const SCRIM = 'rgba(0,0,0,0.55)';
+const SCRIM = CHROME_SCRIM;
+
+/** The torch's own scrim, kept as-is so non-glass devices look unchanged. */
+const TORCH_SCRIM = 'rgba(0,0,0,0.45)';
+
+/** Fills a sized Pressable with a round surface. */
+const ROUND_FILL: ViewStyle = {
+  flex: 1,
+  borderRadius: radius.full,
+  alignItems: 'center',
+  justifyContent: 'center',
+};
 
 /**
  * Fixed slots either side of the shutter.
@@ -147,22 +159,21 @@ export function BottomBar({
               onPress={onToggleTorch}
               accessibilityRole="button"
               accessibilityLabel={torch ? 'Turn off the torch' : 'Turn on the torch'}
-              style={{
-                width: 36,
-                height: 36,
-                borderRadius: radius.full,
-                // Inverted when on, so "lit" reads at a glance rather than
-                // needing the icon to be decoded.
-                backgroundColor: torch ? '#FFFFFF' : 'rgba(0,0,0,0.45)',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
+              style={{ width: 36, height: 36 }}
             >
-              <Icon
-                name={torch ? 'zap' : 'zap-off'}
-                size={18}
-                color={torch ? colors.primary : '#FFFFFF'}
-              />
+              {torch ? (
+                // Inverted when on, so "lit" reads at a glance rather than
+                // needing the icon to be decoded. Solid rather than glass: a
+                // translucent surface samples the scene behind it, so "on"
+                // would look different depending on where the camera points.
+                <View style={[ROUND_FILL, { backgroundColor: '#FFFFFF' }]}>
+                  <Icon name="zap" size={18} color={colors.primary} />
+                </View>
+              ) : (
+                <ChromeGlass interactive scrim={TORCH_SCRIM} style={ROUND_FILL}>
+                  <Icon name="zap-off" size={18} color="#FFFFFF" />
+                </ChromeGlass>
+              )}
             </Pressable>
           ) : null}
         </View>

package/src/components/viewfinder/ImmersiveControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActivityIndicator, Pressable, View } from 'react-native';
+import { ActivityIndicator, Pressable, View, type ViewStyle } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
 import { radius, spacing } from '../../config/theme';
@@ -7,6 +7,7 @@ import { useTheme } from '../runtime';
 import { MyazaText } from '../Typography';
 import { Icon } from '../Icon';
 import { CountryFlag } from '../CountryFlag';
+import { CHROME_SCRIM, ChromeGlass } from '../glass/ChromeGlass';
 
 // ---------------------------------------------------------------------------
 // Immersive capture chrome — 1:1 with the Flutter SDK's full-screen camera.
@@ -18,9 +19,16 @@ import { CountryFlag } from '../CountryFlag';
 //   • the side badge and document pill sit top, out of the frame's way.
 // ---------------------------------------------------------------------------
 
-const SCRIM = 'rgba(0,0,0,0.55)';
+const SCRIM = CHROME_SCRIM;
 
-/** Round translucent control — back, torch. */
+/**
+ * Round translucent control — back, torch.
+ *
+ * Liquid Glass when idle; SOLID brand fill when `active`. An "on" state has to
+ * be unmistakable, and a translucent material that samples the scene behind it
+ * cannot promise that — the torch would look on or off depending on what the
+ * camera happened to be pointed at.
+ */
 export function RoundControl({
   icon,
   label,
@@ -37,23 +45,27 @@ export function RoundControl({
   style: object;
 }): React.ReactElement {
   const { colors } = useTheme();
+  const fill: ViewStyle = {
+    flex: 1,
+    borderRadius: radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+  const glyph = <Icon name={icon} size={20} color="#FFFFFF" />;
   return (
     <Pressable
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={label}
-      style={{
-        position: 'absolute',
-        width: size,
-        height: size,
-        borderRadius: radius.full,
-        backgroundColor: active ? colors.primary : SCRIM,
-        alignItems: 'center',
-        justifyContent: 'center',
-        ...style,
-      }}
+      style={{ position: 'absolute', width: size, height: size, ...style }}
     >
-      <Icon name={icon} size={20} color="#FFFFFF" />
+      {active ? (
+        <View style={[fill, { backgroundColor: colors.primary }]}>{glyph}</View>
+      ) : (
+        <ChromeGlass interactive style={fill}>
+          {glyph}
+        </ChromeGlass>
+      )}
     </Pressable>
   );
 }