@myazahq/kyc-sdk-react-native 2.0.0

package/src/components/MyazaInput.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import {
+  TextInput,
+  View,
+  type KeyboardTypeOptions,
+  type TextInputProps,
+} from 'react-native';
+
+type FocusHandler = NonNullable<TextInputProps['onFocus']>;
+type BlurHandler = NonNullable<TextInputProps['onBlur']>;
+
+import { radius, sizing, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+// Branded text input with label, helper, and error states. Mirrors the Flutter
+// SDK's MyazaInput.
+
+export interface MyazaInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  label?: string;
+  placeholder?: string;
+  error?: string | null;
+  helper?: string;
+  keyboardType?: KeyboardTypeOptions;
+  autoCapitalize?: 'none' | 'characters';
+  maxLength?: number;
+  editable?: boolean;
+  /** Focus the field on mount (matches the Flutter SDK's id-input autofocus). */
+  autoFocus?: boolean;
+  onFocus?: FocusHandler;
+  onBlur?: BlurHandler;
+}
+
+export function MyazaInput({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  error,
+  helper,
+  keyboardType = 'default',
+  autoCapitalize = 'none',
+  maxLength,
+  editable = true,
+  autoFocus = false,
+  onFocus,
+  onBlur,
+}: MyazaInputProps): React.ReactElement {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+
+  // Mirror the Flutter SDK's MyazaInput border states:
+  //   focused + error → error / 2px   ·   focused → primary / 2px
+  //   error           → error / 1.5px ·   default → border / 1px
+  const borderColor = error ? colors.error : focused ? colors.primary : colors.border;
+  const borderWidth = focused ? 2 : error ? 1.5 : 1;
+
+  const handleFocus: FocusHandler = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur: BlurHandler = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  return (
+    <View>
+      {label ? (
+        <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+          {label}
+        </MyazaText>
+      ) : null}
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textMuted}
+        keyboardType={keyboardType}
+        autoCapitalize={autoCapitalize}
+        maxLength={maxLength}
+        editable={editable}
+        autoFocus={autoFocus}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        style={{
+          height: sizing.inputHeight,
+          borderWidth,
+          borderColor,
+          borderRadius: radius.sm,
+          // Keep text from shifting when the border thickens on focus: pad so
+          // (border + padding) stays constant across states (max border = 2).
+          paddingHorizontal: spacing.md + (2 - borderWidth),
+          color: colors.textDark,
+          backgroundColor: colors.background,
+          fontSize: 16,
+        }}
+      />
+      {error ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.xs }}>
+          {error}
+        </MyazaText>
+      ) : helper ? (
+        <MyazaText variant="bodySmall" style={{ marginTop: spacing.xs }}>
+          {helper}
+        </MyazaText>
+      ) : null}
+    </View>
+  );
+}

package/src/components/MyazaPulseLoader.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react';
+import { ActivityIndicator, Animated, Easing, View } from 'react-native';
+
+import { useTheme } from './runtime';
+
+// Branded loading indicator — the RN mirror of the Flutter SDK's
+// `MyazaPulseLoader` (lib/src/widgets/myaza_pulse_loader.dart): a pulsing outer
+// ring (border, scale 0.85→1.05 + fade-out, 1s loop) around an inner tinted
+// circle holding a spinner. Shared by the ID-type loading state and the
+// submitting screen so the loader looks consistent across the flow and matches
+// the web/Flutter SDKs.
+
+export interface MyazaPulseLoaderProps {
+  /** Outer ring diameter. The inner spinner badge scales to 70% of this. */
+  size?: number;
+}
+
+export function MyazaPulseLoader({ size = 80 }: MyazaPulseLoaderProps): React.ReactElement {
+  const { colors } = useTheme();
+  const pulse = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(pulse, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+
+  // Outer ring: scales 0.85 → 1.05 while fading 0.8 → 0 (mirrors Flutter's
+  // .scale(...).fadeOut(begin: 0.8)).
+  const scale = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1.05] });
+  const opacity = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.8, 0] });
+  const inner = size * 0.7;
+
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      {/* Pulsing outer ring (border only). */}
+      <Animated.View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: 2,
+          borderColor: colors.primary,
+          opacity,
+          transform: [{ scale }],
+        }}
+      />
+      {/* Inner tinted circle with a spinner. */}
+      <View
+        style={{
+          width: inner,
+          height: inner,
+          borderRadius: inner / 2,
+          backgroundColor: `${colors.primary}1A`, // ~10% primary
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <ActivityIndicator size="small" color={colors.primary} />
+      </View>
+    </View>
+  );
+}

package/src/components/StatusBarController.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { findNodeHandle, NativeModules, Platform, StyleSheet, View } from 'react-native';
+
+// Themes the Android modal's status/navigation bars from the SDK theme. RN's
+// <Modal> runs in its own Dialog window that JS StatusBar/SystemBars APIs can't
+// reach (they target the activity window). So we render a tiny real native view
+// INSIDE the modal and hand its tag to MyazaStatusBarModule, which resolves the
+// view and applies the bar appearance to ITS window (the Dialog). Native modules
+// (unlike legacy view managers) work fine on the New Architecture. Android-only.
+
+const StatusBarModule: { setBarStyle?: (viewTag: number, light: boolean) => void } | undefined =
+  Platform.OS === 'android' ? NativeModules.MyazaStatusBarModule : undefined;
+
+/** `barStyle: 'light'` = light glyphs (dark bg), `'dark'` = dark glyphs (light bg). */
+export function StatusBarController({ barStyle }: { barStyle: 'light' | 'dark' }): React.ReactElement | null {
+  const ref = useRef<View>(null);
+
+  const apply = useCallback(() => {
+    if (!StatusBarModule?.setBarStyle) return;
+    const tag = findNodeHandle(ref.current);
+    if (tag != null) StatusBarModule.setBarStyle(tag, barStyle === 'light');
+  }, [barStyle]);
+
+  // Re-apply whenever the theme flips. On the FIRST open the modal's Dialog window
+  // resets its own bar appearance as it finishes presenting, which overrides an
+  // immediate apply (the bar would stay on the host style until a manual toggle).
+  // So re-apply on a couple of short delays past the present animation. `onLayout`
+  // additionally covers the apply once the view attaches to the Dialog.
+  useEffect(() => {
+    apply();
+    const timers = [setTimeout(apply, 250), setTimeout(apply, 600)];
+    return () => timers.forEach(clearTimeout);
+  }, [apply]);
+
+  if (Platform.OS !== 'android') return null;
+  // `collapsable={false}` keeps it a real native view so the module can resolve it.
+  return <View ref={ref} collapsable={false} onLayout={apply} style={styles.hidden} pointerEvents="none" />;
+}
+
+const styles = StyleSheet.create({
+  hidden: { position: 'absolute', width: 0, height: 0 },
+});

package/src/components/StepHeader.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import type { SupportedCountry } from '../types/config';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { GlassIconButton } from './GlassIconButton';
+import { CountryFlag } from './CountryFlag';
+
+// Step title row — 1:1 with the Flutter SDK's StepHeader: optional back button,
+// 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
+
+export interface StepHeaderProps {
+  title: string;
+  description?: string | null;
+  onBack?: (() => void) | null;
+  country?: SupportedCountry | null;
+}
+
+export function StepHeader({ title, description, onBack, country }: StepHeaderProps): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {onBack ? (
+          <View style={{ marginRight: spacing.sm }}>
+            <GlassIconButton icon="back" onPress={onBack} size={28} iconSize={22} accessibilityLabel="Back" />
+          </View>
+        ) : null}
+        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+          <MyazaText variant="heading2" numberOfLines={2} style={{ flexShrink: 1 }}>
+            {title}
+          </MyazaText>
+          {country ? (
+            <View style={{ marginLeft: spacing.sm }}>
+              <CountryFlag country={country} size={20} />
+            </View>
+          ) : null}
+        </View>
+      </View>
+      {description ? (
+        <MyazaText
+          variant="bodyMedium"
+          color={colors.textSecondary}
+          style={{ marginTop: spacing.xs, marginLeft: onBack ? BACK_FOOTPRINT : 0 }}
+        >
+          {description}
+        </MyazaText>
+      ) : null}
+    </View>
+  );
+}

package/src/components/StepIndicator.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+// Segmented numbered step indicator — 1:1 with the Flutter SDK's _StepIndicator.
+// N circles connected by thin lines:
+//   • completed → filled primary + white check
+//   • active    → filled primary + white number
+//   • upcoming  → outlined (primary200) + muted number
+// activeIndex = round(progress * stepCount) - 1.
+
+export interface StepIndicatorProps {
+  /** 0.0–1.0 progress fraction. */
+  progress: number;
+  stepCount: number;
+}
+
+export function StepIndicator({ progress, stepCount }: StepIndicatorProps): React.ReactElement {
+  const { colors } = useTheme();
+  const active = Math.round(progress * stepCount) - 1;
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: spacing.md }}>
+      {Array.from({ length: stepCount }).map((_, i) => {
+        const completed = i < active;
+        const isActive = i === active;
+        const filled = completed || isActive;
+        return (
+          <React.Fragment key={i}>
+            <View
+              style={{
+                width: 26,
+                height: 26,
+                borderRadius: 13,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: filled ? colors.primary : 'transparent',
+                borderWidth: 1.5,
+                borderColor: filled ? colors.primary : colors.primary200,
+              }}
+            >
+              {completed ? (
+                <Icon name="check" size={14} color="#FFFFFF" />
+              ) : (
+                <MyazaText
+                  variant="bodySmall"
+                  color={isActive ? '#FFFFFF' : colors.textMuted}
+                  style={{ fontSize: 11, fontWeight: '700' }}
+                >
+                  {i + 1}
+                </MyazaText>
+              )}
+            </View>
+            {i < stepCount - 1 ? (
+              <View
+                style={{
+                  flex: 1,
+                  height: 2,
+                  marginHorizontal: 3,
+                  borderRadius: 1,
+                  backgroundColor: completed ? colors.primary : colors.primary200,
+                }}
+              />
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Typography.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet, Text, type TextProps, type TextStyle } from 'react-native';
+
+import { useTheme } from './runtime';
+import { fontFamilyFor } from './fonts';
+
+// Branded text. `variant` picks size/weight; headings render in Space Grotesk and
+// body/labels in Karla — the SAME families the Flutter SDK uses (google_fonts) —
+// resolved per weight by `fontFamilyFor` once expo-font has loaded them.
+
+export type TextVariant =
+  | 'heading1'
+  | 'heading2'
+  | 'heading3'
+  | 'body'
+  | 'bodyMedium'
+  | 'bodySmall'
+  | 'label'
+  | 'button';
+
+const VARIANTS: Record<TextVariant, TextStyle> = {
+  heading1: { fontSize: 24, fontWeight: '700' },
+  heading2: { fontSize: 20, fontWeight: '600' },
+  heading3: { fontSize: 16, fontWeight: '600' },
+  body: { fontSize: 16, fontWeight: '400' },
+  bodyMedium: { fontSize: 14, fontWeight: '400' },
+  bodySmall: { fontSize: 12, fontWeight: '400' },
+  label: { fontSize: 14, fontWeight: '500' },
+  button: { fontSize: 16, fontWeight: '600' },
+};
+
+const HEADINGS = new Set<TextVariant>(['heading1', 'heading2', 'heading3']);
+
+export interface MyazaTextProps extends TextProps {
+  variant?: TextVariant;
+  color?: string;
+}
+
+export function MyazaText({
+  variant = 'body',
+  color,
+  style,
+  ...rest
+}: MyazaTextProps): React.ReactElement {
+  const { colors, fontsLoaded } = useTheme();
+  const defaultColor =
+    variant === 'bodyMedium'
+      ? colors.textSecondary
+      : variant === 'bodySmall'
+        ? colors.textMuted
+        : colors.textDark;
+
+  // Flatten variant + caller style so an inline `fontWeight` override selects the
+  // right Space Grotesk / Karla weight (custom fonts ignore `fontWeight`, so the
+  // weight must be baked into the family).
+  const flat = (StyleSheet.flatten([VARIANTS[variant], style]) ?? {}) as TextStyle;
+  const family = fontFamilyFor(HEADINGS.has(variant), flat.fontWeight, fontsLoaded);
+
+  return (
+    <Text
+      style={[
+        flat,
+        { color: color ?? defaultColor },
+        family ? { fontFamily: family, fontWeight: undefined } : null,
+      ]}
+      {...rest}
+    />
+  );
+}

package/src/components/fonts.ts

@@ -0,0 +1,49 @@
+import { useFonts } from 'expo-font';
+import { SpaceGrotesk_500Medium, SpaceGrotesk_600SemiBold, SpaceGrotesk_700Bold } from '@expo-google-fonts/space-grotesk';
+import { Karla_400Regular, Karla_500Medium, Karla_600SemiBold, Karla_700Bold } from '@expo-google-fonts/karla';
+import type { TextStyle } from 'react-native';
+
+// Typography fonts — the SAME families the Flutter SDK uses via google_fonts:
+// Space Grotesk for headings, Karla for body. Loaded at runtime through
+// expo-font (already natively linked), so no native rebuild is needed. Each
+// weight is its own RN font family, so we resolve family-by-weight below.
+
+export const MYAZA_FONTS = {
+  SpaceGrotesk_500Medium,
+  SpaceGrotesk_600SemiBold,
+  SpaceGrotesk_700Bold,
+  Karla_400Regular,
+  Karla_500Medium,
+  Karla_600SemiBold,
+  Karla_700Bold,
+};
+
+/** Loads the Myaza fonts. Returns true once they're ready (system font until then). */
+export function useMyazaFonts(): boolean {
+  const [loaded] = useFonts(MYAZA_FONTS);
+  return loaded;
+}
+
+/**
+ * Resolves the concrete RN font family for a (heading vs body, weight) pair.
+ * Returns `undefined` until fonts are loaded so text falls back to the system
+ * font + `fontWeight` without triggering an "unrecognized font" warning.
+ */
+export function fontFamilyFor(
+  isHeading: boolean,
+  weight: TextStyle['fontWeight'],
+  loaded: boolean,
+): string | undefined {
+  if (!loaded) return undefined;
+  const w = String(weight ?? '400');
+  const bold = w === '700' || w === '800' || w === '900' || w === 'bold';
+  if (isHeading) {
+    if (bold) return 'SpaceGrotesk_700Bold';
+    if (w === '500') return 'SpaceGrotesk_500Medium';
+    return 'SpaceGrotesk_600SemiBold'; // 600 default for headings
+  }
+  if (bold) return 'Karla_700Bold';
+  if (w === '600') return 'Karla_600SemiBold';
+  if (w === '500') return 'Karla_500Medium';
+  return 'Karla_400Regular';
+}

package/src/components/glass/GlassGroup.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { radius } from '../../config/theme';
+import { GlassSurface, supportsLiquidGlass } from './GlassSurface';
+
+// GlassGroup — renders a set of header controls as a SINGLE Liquid Glass capsule
+// on iOS 26 (one clean pill behind both icons) rather than two separate glass
+// circles. The child icon buttons are passed `plain` so they don't draw their
+// own glass — the capsule is the only glass surface, giving a crisp grouped look
+// (like the iOS 26 navigation-bar control groups). On Android / iOS < 26 it's a
+// plain transparent row.
+
+export interface GlassGroupProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function GlassGroup({ children, style }: GlassGroupProps): React.ReactElement {
+  const row: ViewStyle = { flexDirection: 'row', alignItems: 'center' };
+
+  if (supportsLiquidGlass()) {
+    return (
+      <GlassSurface
+        glassStyle="regular"
+        interactive
+        style={[row, { borderRadius: radius.full, paddingHorizontal: 4 }, style]}
+      >
+        {children}
+      </GlassSurface>
+    );
+  }
+  return <View style={[row, style]}>{children}</View>;
+}

package/src/components/glass/GlassSurface.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
+import { GlassView, isLiquidGlassAvailable, type GlassStyle } from 'expo-glass-effect';
+
+import { useTheme } from '../runtime';
+
+// ---------------------------------------------------------------------------
+// GlassSurface — the single switch point for iOS 26 Liquid Glass.
+//
+// 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.
+// ---------------------------------------------------------------------------
+
+const liquidGlass = Platform.OS === 'ios' && isLiquidGlassAvailable();
+
+/** Whether the running device supports the Liquid Glass design. */
+export function supportsLiquidGlass(): boolean {
+  return liquidGlass;
+}
+
+export interface GlassSurfaceProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Glass intensity on capable devices. */
+  glassStyle?: GlassStyle;
+  /** Optional tint laid over the glass (brand color, low alpha). */
+  tintColor?: string;
+  /** Whether the glass reacts to touch (for interactive chrome like buttons). */
+  interactive?: boolean;
+  /**
+   * Background color used on the NON-glass fallback path. Defaults to the
+   * theme's elevated surface (`backgroundSecondary`).
+   */
+  fallbackColor?: string;
+}
+
+export function GlassSurface({
+  children,
+  style,
+  glassStyle = 'regular',
+  tintColor,
+  interactive = false,
+  fallbackColor,
+}: GlassSurfaceProps): React.ReactElement {
+  const { colors, mode } = useTheme();
+
+  if (liquidGlass) {
+    return (
+      <GlassView
+        style={style}
+        glassEffectStyle={glassStyle}
+        tintColor={tintColor}
+        isInteractive={interactive}
+        colorScheme={mode}
+      >
+        {children}
+      </GlassView>
+    );
+  }
+
+  return <View style={[{ backgroundColor: fallbackColor ?? colors.backgroundSecondary }, style]}>{children}</View>;
+}

package/src/components/runtime.tsx

@@ -0,0 +1,93 @@
+import React, { createContext, useContext, useMemo, useRef, useState } from 'react';
+import { useStore } from 'zustand';
+
+import { createKycStore, type KycState, type KycStore } from '../store/kycStore';
+import { resolveColors, type MyazaColorScheme, type ThemeMode } from '../config/theme';
+import type { MyazaKYCConfig } from '../types/config';
+import { useMyazaFonts } from './fonts';
+
+// ---------------------------------------------------------------------------
+// Runtime context — owns the per-instance zustand store + theme mode. Mirrors
+// the Flutter SDK's ProviderScope + theme provider wiring.
+// ---------------------------------------------------------------------------
+
+interface ThemeValue {
+  mode: ThemeMode;
+  colors: MyazaColorScheme;
+  setMode: (mode: ThemeMode) => void;
+  toggle: () => void;
+  /** True once Space Grotesk + Karla are loaded (system font until then). */
+  fontsLoaded: boolean;
+}
+
+interface RuntimeValue {
+  store: KycStore;
+  config: MyazaKYCConfig;
+  theme: ThemeValue;
+}
+
+const RuntimeContext = createContext<RuntimeValue | null>(null);
+
+function useRuntime(): RuntimeValue {
+  const ctx = useContext(RuntimeContext);
+  if (!ctx) {
+    throw new Error('Myaza KYC components must be rendered inside <KycRuntimeProvider>.');
+  }
+  return ctx;
+}
+
+export function KycRuntimeProvider({
+  config,
+  children,
+}: {
+  config: MyazaKYCConfig;
+  children: React.ReactNode;
+}): React.ReactElement {
+  // The store is created once per provider instance (per modal launch).
+  const storeRef = useRef<KycStore | null>(null);
+  if (storeRef.current === null) {
+    storeRef.current = createKycStore(config);
+  }
+  const store = storeRef.current;
+
+  const [mode, setMode] = useState<ThemeMode>(config.appearance?.theme ?? 'light');
+  const colors = useMemo(() => resolveColors(mode, config.appearance), [mode, config.appearance]);
+  const fontsLoaded = useMyazaFonts();
+
+  const value = useMemo<RuntimeValue>(
+    () => ({
+      store,
+      config,
+      theme: {
+        mode,
+        colors,
+        setMode,
+        toggle: () => setMode((m) => (m === 'dark' ? 'light' : 'dark')),
+        fontsLoaded,
+      },
+    }),
+    [store, config, mode, colors, fontsLoaded],
+  );
+
+  return <RuntimeContext.Provider value={value}>{children}</RuntimeContext.Provider>;
+}
+
+/** Selects from the KYC store (re-renders only on selected-slice changes). */
+export function useKyc<T>(selector: (state: KycState) => T): T {
+  return useStore(useRuntime().store, selector);
+}
+
+/** Returns the raw store (for actions / one-off reads). */
+export function useKycStore(): KycStore {
+  return useRuntime().store;
+}
+
+/** The resolved SDK config (props + callbacks) for this launch. */
+export function useKycConfig(): MyazaKYCConfig {
+  return useRuntime().config;
+}
+
+/** Theme colors + light/dark mode controls. */
+export function useTheme(): ThemeValue {
+  return useRuntime().theme;
+}