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

package/src/components/MyazaSelect.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { Modal, Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
+import { Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { useTheme } from './runtime';
 import { useInputFontFamily } from './fonts';
 import { MyazaText } from './Typography';
 import { Icon } from './Icon';
+import { FloatingSheet } from './glass/FloatingSheet';
 
 // ---------------------------------------------------------------------------
 // The select field — a collapsed value that opens a sheet of options.
@@ -131,45 +132,16 @@ export function MyazaSelect<T extends string | number>({
         <Icon name="chevron-down" size={18} color={colors.textSecondary} />
       </Pressable>
 
-      <Modal
+      <FloatingSheet
         visible={open}
-        transparent
-        animationType="slide"
-        onRequestClose={() => {
+        onClose={() => {
           setOpen(false);
           setQuery('');
         }}
+        // Long option lists stay inside the sheet and scroll.
+        maxHeight={windowHeight * 0.6}
+        closeLabel={`Close ${sheetTitle ?? hint}`}
       >
-        {/* Tapping the backdrop dismisses, matching the platform sheet. */}
-        <Pressable
-          onPress={() => {
-            setOpen(false);
-            setQuery('');
-          }}
-          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}
-        >
-          {/* Stops a tap inside the sheet from closing it. */}
-          <Pressable
-            onPress={() => {}}
-            style={{
-              backgroundColor: colors.background,
-              borderTopLeftRadius: radius.lg,
-              borderTopRightRadius: radius.lg,
-              paddingBottom: spacing.lg,
-              // Long option lists stay inside the sheet and scroll.
-              maxHeight: windowHeight * 0.6,
-            }}
-          >
-            <View
-              style={{
-                alignSelf: 'center',
-                width: 36,
-                height: 4,
-                borderRadius: radius.full,
-                backgroundColor: colors.border,
-                marginTop: spacing.sm,
-              }}
-            />
             <MyazaText
               variant="body"
               style={{
@@ -222,7 +194,13 @@ export function MyazaSelect<T extends string | number>({
               </View>
             ) : null}
 
-            <ScrollView bounces={false} keyboardShouldPersistTaps="handled">
+            <ScrollView
+              bounces={false}
+              keyboardShouldPersistTaps="handled"
+              // The floating shell has no bottom padding of its own, so the
+              // last option must not sit flush against the rounded corner.
+              contentContainerStyle={{ paddingBottom: spacing.lg }}
+            >
               {visible.length === 0 ? (
                 <MyazaText
                   variant="bodySmall"
@@ -280,9 +258,7 @@ export function MyazaSelect<T extends string | number>({
                 );
               })}
             </ScrollView>
-          </Pressable>
-        </Pressable>
-      </Modal>
+      </FloatingSheet>
     </>
   );
 }

package/src/components/SandboxBanner.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import type { KycState } from '../store/state';
+import { useKyc } from './runtime';
+import { Icon } from './Icon';
+import { MyazaText } from './Typography';
+
+/**
+ * "You are not in production" strip, shown above the sheet's header.
+ *
+ * A sandbox flow is pixel-identical to a live one, which is the point — you are
+ * testing the real thing — and also the hazard: screenshots get mistaken for
+ * production incidents, testers wonder why a real passport was rejected, and a
+ * `pk_test_` key shipped to production looks like it works right up until
+ * nobody is actually verified.
+ *
+ * Environment comes from the SERVER (`/config`), not the API key prefix. Hosted
+ * sessions authenticate with an `hs_` handoff token that carries no environment
+ * slot, so key-sniffing would leave exactly the surface an end user sees
+ * unlabelled.
+ *
+ * DEVELOPMENT is labelled too, and differently: it runs the real pipeline
+ * against staging provider credentials, so "test data only" would be a lie
+ * there. 1:1 with the web and Flutter SDKs.
+ */
+/**
+ * Whether the banner will render. The sheet needs this to decide who owns the
+ * safe-area top inset: the banner sits ABOVE the header, so when it shows it is
+ * the topmost element and must clear the status bar itself — otherwise the
+ * header pads for an inset the banner already crossed, and the strip is drawn
+ * under the clock on Android's edge-to-edge modals.
+ */
+export function useSandboxBannerVisible(): boolean {
+  const environment = useKyc((s: KycState) => s.serverConfig.environment);
+  return environment === 'SANDBOX' || environment === 'DEVELOPMENT';
+}
+
+export function SandboxBanner({
+  topInset = 0,
+}: {
+  /** Safe-area top inset to absorb, when the banner is the topmost element. */
+  topInset?: number;
+}): React.ReactElement | null {
+  const environment = useKyc((s: KycState) => s.serverConfig.environment);
+  if (environment !== 'SANDBOX' && environment !== 'DEVELOPMENT') return null;
+
+  const sandbox = environment === 'SANDBOX';
+
+  return (
+    <View
+      accessibilityRole="alert"
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: spacing.xs + 2,
+        // Amber, not the brand colour: this is an out-of-band status about the
+        // session, and the org's palette would read as part of their flow.
+        backgroundColor: AMBER_TINT,
+        paddingHorizontal: spacing.md,
+        // The tint extends up through the status bar so the strip reads as one
+        // band rather than floating below a bare gap.
+        paddingTop: topInset + spacing.xs + 2,
+        paddingBottom: spacing.xs + 2,
+      }}
+    >
+      {/* Flask, not an alert mark: nothing is wrong — this is a statement about
+          WHICH environment you are in ("test environment", "test data only").
+          An alert glyph reads as a fault and sends testers hunting for one.
+          Same lucide icon the web SDK uses; Flutter mirrors it with
+          Icons.science_outlined. */}
+      <Icon name="flask" size={13} color={AMBER_INK} />
+      <MyazaText
+        variant="bodySmall"
+        color={AMBER_INK}
+        style={{ fontSize: 11, fontWeight: '700', letterSpacing: 1, textTransform: 'uppercase' }}
+      >
+        {sandbox ? 'Sandbox' : 'Development'}
+      </MyazaText>
+      <MyazaText variant="bodySmall" color={AMBER_INK} style={{ fontSize: 11, flexShrink: 1 }}>
+        {sandbox ? 'Test data only, no real checks run' : 'Test environment, results are not live'}
+      </MyazaText>
+    </View>
+  );
+}
+
+// Fixed rather than themed: the strip must read identically in light and dark,
+// and it deliberately does not belong to the org's palette.
+const AMBER_TINT = 'rgba(245, 158, 11, 0.18)';
+const AMBER_INK = '#B45309';

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/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,190 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  Modal,
+  PanResponder,
+  Pressable,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../runtime';
+import { GlassIconButton } from '../GlassIconButton';
+import { GlassSheet } from './GlassSheet';
+
+// ---------------------------------------------------------------------------
+// FloatingSheet — the shell every bottom sheet in the SDK sits in.
+//
+// It floats: inset from all three edges and rounded on every corner, rather
+// than welded to the bottom of the screen. That is what the glass is for. A
+// panel flush to the edge reads as part of the screen, so seeing through it
+// says nothing; a detached one reads as a layer that has risen above the flow.
+//
+// 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.
+// ---------------------------------------------------------------------------
+
+/** 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;
+
+  // Read once at module init like the rest of the SDK: these sheets are modal,
+  // so there is no provider above them to read live insets from.
+  const safeBottom = initialWindowMetrics?.insets?.bottom ?? 0;
+
+  const panel: ViewStyle = {
+    marginHorizontal: spacing.md,
+    // Clear the home indicator, and never sit flush even where there is none.
+    marginBottom: bottomOffset + Math.max(safeBottom, spacing.md),
+  };
+
+  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={{ borderRadius: radius.xl, maxHeight, 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',
+                  alignItems: 'center',
+                  paddingTop: spacing.sm,
+                  paddingHorizontal: spacing.sm,
+                }}
+              >
+                <View style={{ flex: 1 }} />
+                {/* Grab handle — says "draggable" without a caption. */}
+                <View
+                  style={{
+                    width: 36,
+                    height: 4,
+                    borderRadius: 2,
+                    backgroundColor: colors.border,
+                  }}
+                />
+                <View style={{ flex: 1, alignItems: 'flex-end' }}>
+                  <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,38 @@
+import React from 'react';
+import { 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 } = useTheme();
+  return (
+    <GlassSurface glassStyle="regular" fallbackColor={colors.background} style={style}>
+      {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/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>