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

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>
   );
 }

package/src/components/viewfinder/ViewfinderControls.tsx

@@ -1,11 +1,23 @@
 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 { ChromeGlass } from '../glass/ChromeGlass';
+
+/** This overlay's own scrim, kept so non-glass devices look unchanged. */
+const OVERLAY_SCRIM = 'rgba(0,0,0,0.4)';
+
+/** Fills a sized Pressable with a round surface. */
+const ROUND_FILL: ViewStyle = {
+  flex: 1,
+  borderRadius: radius.full,
+  alignItems: 'center',
+  justifyContent: 'center',
+};
 
 /** Top offset that clears the status bar when the camera runs full-bleed. */
 export function topInset(fill: boolean): number {
@@ -49,7 +61,13 @@ export function HintBanner({
   );
 }
 
-/** A round overlay button — the torch and the immersive back control. */
+/**
+ * A round overlay button — the torch and the immersive back control.
+ *
+ * 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.
+ */
 export function OverlayButton({
   icon,
   onPress,
@@ -77,13 +95,17 @@ export function OverlayButton({
         [side]: spacing.md,
         width: 36,
         height: 36,
-        borderRadius: radius.full,
-        backgroundColor: active ? colors.primary : 'rgba(0,0,0,0.4)',
-        alignItems: 'center',
-        justifyContent: 'center',
       }}
     >
-      <Icon name={icon} size={18} color="#FFFFFF" />
+      {active ? (
+        <View style={[ROUND_FILL, { backgroundColor: colors.primary }]}>
+          <Icon name={icon} size={18} color="#FFFFFF" />
+        </View>
+      ) : (
+        <ChromeGlass interactive scrim={OVERLAY_SCRIM} style={ROUND_FILL}>
+          <Icon name={icon} size={18} color="#FFFFFF" />
+        </ChromeGlass>
+      )}
     </Pressable>
   );
 }

package/src/services/deviceMetadata.ts

@@ -15,7 +15,7 @@ export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
  * Single source of truth for the SDK version — also used by `services/api.ts`
  * for the `X-SDK-Version` header. Keep in sync with `package.json`.
  */
-export const SDK_VERSION = '2.3.0';
+export const SDK_VERSION = '2.4.0';
 
 export interface ReactNativeDeviceMetadata {
   sdkType: 'react-native';

package/src/types/config.ts

@@ -62,7 +62,7 @@ export type KYCStep =
 // ---------------------------------------------------------------------------
 
 /** How flow progress is drawn — see {@link MyazaKYCConfig.progressStyle}. */
-export type ProgressStyle = 'steps' | 'bar';
+export type ProgressStyle = 'steps' | 'bar' | 'none';
 
 export interface MyazaKYCConfig<C extends SupportedCountry = SupportedCountry> {
   /**
@@ -215,8 +215,13 @@ export interface MyazaKYCConfig<C extends SupportedCountry = SupportedCountry> {
    *   • `'bar'` — a single thin bar pinned to the bottom edge of the header.
    *     Quieter, and unaffected by step count, so it suits long flows and hosts
    *     who would rather the chrome said less.
+   *   • `'none'` — no progress in the header at all. For hosts whose own
+   *     surface already communicates progress, or short flows where a
+   *     step count is more noise than reassurance. The header keeps its
+   *     brand row and controls; only the progress element is dropped.
    *
-   * Both convey the same fraction; the choice is how much room it takes.
+   * `'steps'` and `'bar'` convey the same fraction; the choice is how much room
+   * it takes. `'none'` opts out of conveying it here.
    */
   progressStyle?: ProgressStyle;