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

package/src/screens/LivenessAvatar.tsx

@@ -1,29 +1,46 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Easing, Image } from 'react-native';
 
-import { useTheme } from '../components/runtime';
+import { useTheme, useKycConfig } from '../components/runtime';
 import { Icon } from '../components/Icon';
+import { livenessAvatarUrl } from '../liveness/avatarSource';
 import type { LivenessChallenge } from '../liveness/types';
 
 // Animated GIF avatar demonstrating the requested gesture — the RN mirror of the
-// web/Flutter `LivenessAvatar`. Shows the same Nod/Turn/Blink/Smile GIFs in a
-// circular badge (primary-tinted, like Flutter), sliding up + fading in when the
-// challenge changes. RN's <Image> animates GIFs natively.
+// web/Flutter `LivenessAvatar`. Shows the same Nod/Turn/Blink/Smile animations in
+// a circular badge (primary-tinted, like Flutter), sliding up + fading in when
+// the challenge changes. RN's <Image> animates GIFs natively.
+//
+// The animations are FETCHED (see liveness/avatarSource) rather than bundled.
+// They were 5.5 MB of this package, in every integrator's app, for a badge the
+// liveness step shows for a few seconds. The flow prefetches all four at open,
+// so by the time this renders the file is normally already on the device; when
+// it is not, `broken` renders the gesture icon exactly as it always did for a
+// failed decode.
 
-const GIFS: Record<LivenessChallenge, number> = {
-  nod: require('../assets/liveness/Nod.gif'),
-  turn: require('../assets/liveness/Turn.gif'),
-  blink: require('../assets/liveness/Blink.gif'),
-  smile: require('../assets/liveness/Smile.gif'),
-};
+/** The badge on a tall phone; the step hands a smaller size down on a short one
+ *  (lib/livenessLayout), so the gesture stays on screen beside the circle. */
+const DEFAULT_SIZE = 96;
+const DEFAULT_ICON = 40;
 
-const SIZE = 96;
-
-export function LivenessAvatar({ challenge }: { challenge: LivenessChallenge }): React.ReactElement {
+export function LivenessAvatar({
+  challenge,
+  size = DEFAULT_SIZE,
+  iconSize = DEFAULT_ICON,
+}: {
+  challenge: LivenessChallenge;
+  size?: number;
+  iconSize?: number;
+}): React.ReactElement {
+  const SIZE = size;
   const { colors } = useTheme();
+  const { apiKey, devUrl } = useKycConfig();
   const [displayed, setDisplayed] = useState<LivenessChallenge>(challenge);
   const [broken, setBroken] = useState(false);
   const anim = useRef(new Animated.Value(1)).current;
+  // `displayed`, not `challenge`: the badge cross-fades, so the image must keep
+  // showing the outgoing gesture until the transition swaps it.
+  const uri = livenessAvatarUrl(displayed, apiKey, devUrl);
 
   // Slide-up + fade transition when the challenge changes (mirrors Flutter's
   // AnimatedSwitcher: Offset(0, 0.4) → 0, easeOutCubic, ~350ms).
@@ -54,11 +71,11 @@ export function LivenessAvatar({ challenge }: { challenge: LivenessChallenge }):
         transform: [{ translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [SIZE * 0.4, 0] }) }],
       }}
     >
-      {broken ? (
-        <Icon name="scan-face" size={40} color={colors.primary} />
+      {broken || uri == null ? (
+        <Icon name="scan-face" size={iconSize} color={colors.primary} />
       ) : (
         <Image
-          source={GIFS[displayed]}
+          source={{ uri }}
           style={{ width: '100%', height: '100%' }}
           resizeMode="cover"
           onError={() => setBroken(true)}

package/src/screens/LivenessStep.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Animated, Dimensions, Easing, Image, View } from 'react-native';
+import { Animated, Easing, Image, useWindowDimensions, View } from 'react-native';
 import Svg, { Ellipse, Path } from 'react-native-svg';
 import {
-  Camera,
   useCameraDevice,
   useCameraPermission,
   useFrameOutput,
@@ -15,6 +14,7 @@ import { radius, spacing } from '../config/theme';
 import { withRetry } from '../services/retry';
 import { mapToKycError, safeReportError } from '../services/errors';
 import { compressSelfieImage, compressVideo } from '../services/mediaCompress';
+import { isSelfieBlurry, measureSelfieSharpness } from '../lib/selfie-sharpness';
 import { KYCError } from '../types/verification';
 import { useStore } from 'zustand';
 import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
@@ -35,9 +35,11 @@ import { useFaceModelReady } from '../liveness/useModelReady';
 import { ReadyPrimer } from '../components/ReadyPrimer';
 import { READY_LIVENESS } from '../components/readyPrimerContent';
 import { LivenessAvatar } from './LivenessAvatar';
+import { livenessLayout } from '../lib/livenessLayout';
 import { detectFaceOnFrame } from '../liveness/visionCameraFaceDetector';
 import { buildLivenessIntegrity } from '../liveness/integritySignals';
 import { DEFAULT_LIVENESS_CONFIG } from '../liveness/types';
+import { livenessProgress } from '../lib/captureRing';
 import { useFlashSequence } from './useFlashSequence';
 import { useFlashHole } from './useFlashHole';
 import {
@@ -45,13 +47,19 @@ import {
   INSTRUCTION_HEIGHT,
   LightingBanner,
   ProgressDots,
+  CaptureRing,
+  ShutterFlash,
   SelfiePreview,
   StyleAbsFill,
   resolveGuidance,
   useSelfieUpload,
+  LivenessCamera,
   LivenessComplete,
   LivenessFailed,
+  LivenessHandover,
+  useSelfieAutoAdvance,
 } from './liveness';
+import { showsSelfieReview } from '../config/biometricOptions';
 import {
   lightingGuidanceText,
   positionGuidanceText,
@@ -85,6 +93,7 @@ export function LivenessStep(): React.ReactElement {
   const setMediaId = useKyc((s) => s.setMediaId);
   const setCaptureIntegrity = useKyc((s) => s.setCaptureIntegrity);
   const nextStep = useKyc((s) => s.nextStep);
+  const clearSelfie = useKyc((s) => s.clearSelfie);
 
   const device = useCameraDevice('front');
   const { hasPermission, requestPermission } = useCameraPermission();
@@ -176,6 +185,21 @@ export function LivenessStep(): React.ReactElement {
     uploadSelfieAndVideo,
   } = upload;
 
+  // The still the review should flag as soft, held BY URI, so a measurement
+  // that lands after a retake can never flag the next photo. A notice only,
+  // never a gate: see lib/selfie-sharpness.
+  const [softSelfieUri, setSoftSelfieUri] = useState<string | null>(null);
+
+  // A stored selfie with no uploaded mediaId is an interrupted upload (failed,
+  // or the user left mid-flight): resume it once on mount. Idempotent — with a
+  // mediaId there is nothing to do.
+  useEffect(() => {
+    if (selfieUri && !selfieIdRef.current && !uploading && !uploadError) {
+      void uploadSelfieAndVideo(selfieUri, videoPathRef.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // ── Liveness state machine ─────────────────────────────────────────────────
   // `handleCapture` is created after `liveness` (it calls liveness.markComplete),
   // so the machine gets it via a ref to avoid a definition cycle.
@@ -237,6 +261,11 @@ export function LivenessStep(): React.ReactElement {
       const raw = `file://${file.filePath}`;
       const compressed = await compressSelfieImage(raw).catch(() => raw);
       setSelfieUri(compressed);
+      // Measured on the still the applicant is about to see. It never holds
+      // the review back: the notice appears when the answer does.
+      void measureSelfieSharpness(compressed).then((score) => {
+        if (isSelfieBlurry(score)) setSoftSelfieUri(compressed);
+      });
       // Recorded at capture, not at submit: by then the liveness hook is gone
       // and its flash result with it.
       setCaptureIntegrity({
@@ -274,6 +303,66 @@ export function LivenessStep(): React.ReactElement {
   // always reads the latest state-machine callbacks.
   const livenessRef = useRef(liveness);
   livenessRef.current = liveness;
+
+  // The circle and the gesture avatar are sized from the WINDOW, not the width
+  // alone, so a short phone keeps the avatar on screen (lib/livenessLayout).
+  // A hook, so it lives up here with the ring refs, above the gates below.
+  const windowSize = useWindowDimensions();
+  const layout = livenessLayout(windowSize);
+
+  // Progress for the ring, read every frame from a ref — never from render.
+  // Declared HERE, above the early returns below: a hook after a conditional
+  // return renders "more hooks than during the previous render" the moment the
+  // gate dismisses, which is exactly what the ready primer does on its way out.
+  const phaseStartedRef = useRef(Date.now());
+  const phaseKeyRef = useRef(`${liveness.phase}:${liveness.completedCount}`);
+  const phaseKey = `${liveness.phase}:${liveness.completedCount}`;
+  if (phaseKeyRef.current !== phaseKey) {
+    phaseKeyRef.current = phaseKey;
+    phaseStartedRef.current = Date.now();
+  }
+  const timeoutRef = useRef(
+    liveness.timeoutRemaining || DEFAULT_LIVENESS_CONFIG.timeoutPerChallenge,
+  );
+  if (liveness.phase === 'challenge' && liveness.timeoutRemaining > timeoutRef.current) {
+    timeoutRef.current = liveness.timeoutRemaining;
+  }
+  const getRingTarget = useCallback(() => {
+    const l = livenessRef.current;
+    return livenessProgress({
+      phase: l.phase,
+      completedCount: l.completedCount,
+      totalCount: l.totalCount,
+      elapsedInPhase: (Date.now() - phaseStartedRef.current) / 1000,
+      challengeTimeout: timeoutRef.current,
+    });
+  }, []);
+
+  // The selfie URI lands BEFORE the machine reaches `complete` (capture →
+  // compress → setSelfieUri → markComplete), and the review is gated on that
+  // URI — so the camera circle used to unmount on the very frame the ring's
+  // target reached the end: the close, the green, the shutter, none of it
+  // was ever seen. Hold the frame for the closing beat, then hand over.
+  const [closeSeen, setCloseSeen] = useState(false);
+  useEffect(() => {
+    if (liveness.phase !== 'complete') return;
+    const t = setTimeout(() => setCloseSeen(true), 700);
+    return () => clearTimeout(t);
+  }, [liveness.phase]);
+  const holdingForClose =
+    (liveness.phase === 'capturing' || liveness.phase === 'complete') && !closeSeen;
+  // The biometric scopes skip the review by default: hand over the moment the
+  // ring has closed, WITHOUT waiting for the upload (see LivenessHandover).
+  // The upload reports to the store and the submitted step waits on it, so
+  // the person sees one loading screen rather than one per step. A restored
+  // selfie (media id, no local file) is ready at once; an upload that already
+  // failed keeps the review, whose Try Again is the recovery.
+  const selfieReview = showsSelfieReview(config);
+  useSelfieAutoAdvance({
+    enabled: !selfieReview,
+    ready: (!!selfieUri || !!selfieIdRef.current) && !holdingForClose && !uploadError,
+    onAdvance: nextStep,
+  });
   // A plain JS function the worklet hands the per-frame result to. It is wrapped
   // with `runOnJS(...)` INSIDE the worklet (the canonical react-native-worklets
   // pattern) rather than pre-wrapped — pre-wrapping produced a "non-worklet
@@ -353,6 +442,39 @@ export function LivenessStep(): React.ReactElement {
     },
   });
 
+  // ── Review (selfie already exists) ──────────────────────────────────────────
+  // Checked BEFORE every capture-flow gate (ready primer, permission, model):
+  // a selfie captured on an earlier visit — or a restored session where only
+  // the uploaded mediaId survived — means there is nothing to capture, so the
+  // step opens on review exactly as the document steps reopen on theirs.
+  // A restored selfie (earlier visit) opens straight on review; the one being
+  // captured RIGHT NOW waits for the ring to close first.
+  if (selfieIdRef.current || (selfieUri && !holdingForClose)) {
+    // Review hidden: the hook above advances on this render; the view is the
+    // submitted step's own loading screen, so the hand-over is invisible. A
+    // FAILED upload still gets the review, for its retry.
+    if (!selfieReview && !uploadError) {
+      return <LivenessHandover />;
+    }
+    return (
+      <LivenessComplete
+        selfieUri={selfieUri}
+        soft={!!selfieUri && softSelfieUri === selfieUri}
+        upload={upload}
+        onRetake={() => {
+          setSelfieUri(null);
+          setCloseSeen(false);
+          setUploadError(null);
+          selfieIdRef.current = null;
+          videoPathRef.current = null;
+          clearSelfie();
+          liveness.reset();
+        }}
+        onContinue={nextStep}
+      />
+    );
+  }
+
   // ── Error states ────────────────────────────────────────────────────────────
   if (cameraUnavailable) {
     return <CameraUnavailableView />;
@@ -382,22 +504,29 @@ export function LivenessStep(): React.ReactElement {
   if (permissionDenied) {
     return <CameraPermissionView onRetry={() => setPerm('requesting')} />;
   }
-
-  // ── Review (selfie captured) ─────────────────────────────────────────────────
-  if (liveness.phase === 'complete' && selfieUri) {
+  // The model is still arriving. Measured at ~9s on a freshly installed device
+  // over fast wifi, and the connections this SDK actually serves are slower, so
+  // the head start from opening the flow does not always win the race.
+  //
+  // Without this the camera opened anyway and `detectFace` returned
+  // `faceCount: 0` for every frame, which is indistinguishable from "no face in
+  // shot" — so the user was told to position a face that was never going to
+  // register, for as long as the download took. That is the exact failure the
+  // readiness gate exists to prevent, and MrzScanView already answers it this
+  // way; only this screen was missing it.
+  //
+  // Deliberately AFTER the primer and the permission prompt: those need no
+  // model, so letting them run first keeps the download overlapping something
+  // the user is already reading. Only the camera itself waits.
+  if (modelState === 'preparing') {
     return (
-      <LivenessComplete
-        selfieUri={selfieUri}
-        upload={upload}
-        onRetake={() => {
-          setSelfieUri(null);
-          setUploadError(null);
-          selfieIdRef.current = null;
-          videoPathRef.current = null;
-          liveness.reset();
-        }}
-        onContinue={nextStep}
-      />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: spacing.lg }}>
+        <MyazaPulseLoader size={24} />
+        <View style={{ height: spacing.md }} />
+        <MyazaText variant="bodyMedium" style={{ textAlign: 'center' }}>
+          Getting face verification ready. This only happens once.
+        </MyazaText>
+      </View>
     );
   }
 
@@ -416,31 +545,32 @@ export function LivenessStep(): React.ReactElement {
     liveness.lightingGuidance != null;
   const isCamLoading = phase === 'loading';
 
+  // The ring is on the frame from positioning to the shutter, so for that whole
+  // stretch the border is its TRACK. Phase colour stays on the instruction text
+  // and the passed flash; a warning still turns the track red under the arc.
+  // `failed` has already returned above, so loading is the only phase without it.
+  const ringOnFrame = !isCamLoading;
   const ringColor = isCamLoading
     ? colors.gray300
     : hasWarning
       ? colors.error
-      : phase === 'challenge_passed' || phase === 'capturing'
-        ? colors.success
-        : phase === 'challenge'
-          ? colors.warning
-          : liveness.faceDetected
-            ? colors.primary
-            : colors.gray300;
+      : ringOnFrame
+        ? `${colors.primary}33`
+        : colors.gray300;
 
   const guidance = resolveGuidance(liveness);
   const instrColor = isCamLoading
     ? colors.textMuted
     : guidance.tone === 'error'
       ? colors.error
-      : phase === 'challenge_passed'
+      : phase === 'challenge_passed' || phase === 'complete'
         ? colors.success
         : phase === 'challenge'
           ? colors.warning
           : colors.textDark;
 
   // Fixed circle, sized to fit the sheet width (caps at 300).
-  const CIRCLE = Math.min(Dimensions.get('window').width - spacing.md * 4, 300);
+  const CIRCLE = layout.circle;
   const lighting = liveness.lightingGuidance;
 
   // Rendered INSIDE the sheet, so the SDK header and the "powered by" footer
@@ -456,7 +586,10 @@ export function LivenessStep(): React.ReactElement {
         {phase === 'flash' ? '' : guidance.text}
       </MyazaText>
 
-      {/* Circular camera with a thick colour-state ring */}
+      {/* Circular camera. Two boxes: the inner one CLIPS the preview to a circle,
+          the outer one lets the progress ring sit on that border rather than be
+          clipped by it. */}
+      <View style={{ width: CIRCLE, height: CIRCLE }}>
       <View
         ref={flashHoleRef}
         collapsable={false}
@@ -470,21 +603,14 @@ export function LivenessStep(): React.ReactElement {
           backgroundColor: '#111111',
         }}
       >
-        {device ? (
-          <Camera
-            style={{ flex: 1 }}
-            device={device}
-            isActive={perm === 'granted'}
-            outputs={[photoOutput, videoOutput, frameOutput]}
-            // Mirror the front-camera preview + capture so it reads like a
-            // mirror (matches the web SDK's scaleX(-1) video).
-            mirrorMode="on"
-          />
-        ) : (
-          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <ActivityIndicator color="#FFFFFF" />
-          </View>
-        )}
+        {/* The Camera lives in its own borderless wrapper — see LivenessCamera
+            for why a bordered parent shifts the Android preview by one border. */}
+        <LivenessCamera
+          device={device}
+          active={perm === 'granted'}
+          outputs={[photoOutput, videoOutput, frameOutput]}
+          circle={CIRCLE}
+        />
 
         {/* Dashed face-guide ellipse (taller than wide) */}
         <Svg style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} width={CIRCLE} height={CIRCLE}>
@@ -519,12 +645,9 @@ export function LivenessStep(): React.ReactElement {
           </View>
         ) : null}
 
-        {/* Capturing flash — white wash + "Got it!" */}
-        {phase === 'capturing' ? (
-          <View style={[StyleAbsFill, { backgroundColor: 'rgba(255,255,255,0.3)', alignItems: 'center', justifyContent: 'center' }]}>
-            <MyazaText variant="heading3" color="#FFFFFF">Got it!</MyazaText>
-          </View>
-        ) : null}
+        {/* The shutter: a white flash as the still is taken. It used to sit on
+            `capturing` reading "Got it!", announcing a photo not yet taken. */}
+        {phase === 'complete' ? <ShutterFlash /> : null}
 
         {/* Timeout countdown */}
         {phase === 'challenge' && liveness.timeoutRemaining > 0 ? (
@@ -534,6 +657,20 @@ export function LivenessStep(): React.ReactElement {
         ) : null}
       </View>
 
+      {/* The ring — outside the clipping box, on the frame's own edge. One line,
+          building one way for the whole test; primary while it builds, green
+          only as it closes, on the same frame as the shutter. */}
+      {ringOnFrame ? (
+        <CaptureRing
+          size={CIRCLE}
+          getTarget={getRingTarget}
+          color={colors.primary}
+          successColor={colors.success}
+          complete={phase === 'complete'}
+        />
+      ) : null}
+      </View>
+
       {/* Lighting warning banner — mirrors Flutter (amber-50/200/800 + lightbulb) */}
       {lighting ? <LightingBanner text={lightingGuidanceText(lighting)} /> : null}
 
@@ -541,7 +678,9 @@ export function LivenessStep(): React.ReactElement {
       <ProgressDots total={liveness.totalCount} completed={liveness.completedCount} active={phase === 'challenge' || phase === 'positioning' || phase === 'flash'} />
 
       {/* Gesture demo avatar */}
-      {liveness.activeChallenge ? <LivenessAvatar challenge={liveness.activeChallenge} /> : null}
+      {liveness.activeChallenge ? (
+        <LivenessAvatar challenge={liveness.activeChallenge} size={layout.avatar} iconSize={layout.avatarIcon} />
+      ) : null}
     </View>
   );
 }

package/src/screens/MrzScanView.tsx

@@ -15,6 +15,7 @@ import { MyazaButton } from '../components/MyazaButton';
 import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
 import { extractMrz } from '../mrz/extract';
 import { recognizeMrzLines, MRZ_BAND_FRACTION } from '../mrz/textRecognizer';
+import { useTextModelReady } from '../mrz/useTextModelReady';
 import type { MrzScan } from '../mrz/parse';
 
 // ---------------------------------------------------------------------------
@@ -45,6 +46,11 @@ export function MrzScanView({
   const device = useCameraDevice('back');
   const { hasPermission, requestPermission } = useCameraPermission();
   const [denied, setDenied] = useState(false);
+  // Android fetches the text model through Play Services rather than bundling
+  // it. A recogniser that cannot run reports exactly what a blank page reports
+  // — no lines — so without this the user would aim at their passport while a
+  // scanner that can never read sat there pulsing. iOS is always ready.
+  const modelState = useTextModelReady();
 
   // A ref, not state: the worklet callback lands on the JS thread after the
   // frame that found the MRZ, and a stale render would let a second frame
@@ -113,6 +119,33 @@ export function MrzScanView({
     );
   }
 
+  // Worded like the camera-denied case above, and for the same reason: the chip
+  // is optional, so the honest thing is to say the code cannot be read and let
+  // the user carry on rather than leave them waiting on something that will not
+  // arrive.
+  if (modelState === 'unavailable') {
+    return (
+      <Centered>
+        <MyazaText variant="bodyMedium" style={{ textAlign: 'center' }}>
+          The text reader could not be set up on this device, so the printed code
+          cannot be read. You can still continue without the chip.
+        </MyazaText>
+      </Centered>
+    );
+  }
+
+  if (modelState === 'preparing') {
+    return (
+      <Centered>
+        <MyazaPulseLoader size={24} />
+        <View style={{ height: spacing.md }} />
+        <MyazaText variant="bodyMedium" style={{ textAlign: 'center' }}>
+          Getting the text reader ready. This only happens once.
+        </MyazaText>
+      </Centered>
+    );
+  }
+
   return (
     <View
       style={{

package/src/screens/PoaDocumentTypeList.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../components/runtime';
+import { Icon, type IconName } from '../components/Icon';
+import { OptionRow } from '../components/OptionRow';
+import type { PoaDocumentType } from '../types/workflow';
+
+// ---------------------------------------------------------------------------
+// The document kinds LISTED OUT as the questionnaire's multi-select cards (a
+// square check, primary when picked, an icon beside the label) rather than
+// hidden behind a select — the options are the information, and a sheet makes
+// the person open it to find out what is on offer (user decision 2026-09-05).
+// ONE kind is picked, because one document is uploaded: the cards are radios
+// wearing the multi-select's square check. Locked once a file is attached, so
+// the kind cannot drift from the document already uploaded. Mirrors the web
+// SDK's steps/PoaDocumentTypeList and Flutter's proof_of_address_kinds.
+// ---------------------------------------------------------------------------
+
+/** One glyph per kind — the SAME Lucide names the web and Flutter maps carry. */
+export const POA_TYPE_ICONS: Record<PoaDocumentType, IconName> = {
+  utility_bill: 'zap',
+  bank_statement: 'landmark',
+  tenancy_agreement: 'house',
+  government_document: 'stamp',
+  other: 'file-text',
+};
+
+export function PoaDocumentTypeList({
+  options,
+  value,
+  disabled,
+  onChange,
+}: {
+  options: Array<{ value: PoaDocumentType; label: string }>;
+  value: PoaDocumentType;
+  disabled?: boolean;
+  onChange: (value: PoaDocumentType) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View>
+      {options.map((opt) => {
+        const selected = opt.value === value;
+        return (
+          <OptionRow
+            key={opt.value}
+            label={opt.label}
+            selected={selected}
+            multi
+            role="radio"
+            disabled={disabled}
+            icon={
+              <Icon
+                name={POA_TYPE_ICONS[opt.value]}
+                size={20}
+                color={selected ? colors.primary : colors.textSecondary}
+              />
+            }
+            onPress={() => onChange(opt.value)}
+          />
+        );
+      })}
+    </View>
+  );
+}