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

package/src/screens/BusinessDetailsFields.tsx

@@ -26,6 +26,7 @@ export function BusinessDetailsFields({
   formatOk,
   requireName,
   country,
+  geoCountry,
   modes,
   showCompanyInfo,
   showContactEmail,
@@ -38,6 +39,7 @@ export function BusinessDetailsFields({
   formatOk: boolean;
   requireName: boolean;
   country: string;
+  geoCountry?: string | null;
   modes: Record<CompanyInfoField, CompanyInfoMode>;
   showCompanyInfo: boolean;
   showContactEmail: boolean;
@@ -84,6 +86,7 @@ export function BusinessDetailsFields({
             values={business}
             modes={modes}
             country={country}
+            geoCountry={geoCountry}
             onChange={(field, value) => onChange(field, value)}
           />
         </>

package/src/screens/BusinessDetailsStep.tsx

@@ -45,6 +45,7 @@ export function BusinessDetailsStep(): React.ReactElement {
   const [phase, setPhase] = useState<'pick' | 'details'>('pick');
   // Production never shows the test-result toggle, and never honours a pin.
   const isSandbox = useKyc((s) => s.serverConfig.environment) !== 'PRODUCTION';
+  const geoCountry = useKyc((s) => s.serverConfig.geoCountry);
 
   const workflowBusiness = config.business;
   const countries = useMemo(() => businessCountriesFor(workflowBusiness), [workflowBusiness]);
@@ -171,6 +172,7 @@ export function BusinessDetailsStep(): React.ReactElement {
           formatOk={formatOk}
           requireName={nameRequired}
           country={country}
+          geoCountry={geoCountry}
           modes={modes}
           showCompanyInfo={showCompanyInfo}
           showContactEmail={showContactEmail}

package/src/screens/BusinessDocumentSlot.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ActivityIndicator, Image, Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
+import { UPLOAD_HINT } from '../config/uploadLimits';
 import { useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { Icon } from '../components/Icon';
@@ -11,7 +12,7 @@ import { DashedBorder } from '../components/DashedBorder';
 // One business-document upload slot — mirrors the web SDK's
 // BusinessDocumentSlot 1:1: empty, it is a dashed full-width tap target
 // (upload glyph — a spinner while uploading — label with a red * when
-// required, "Photo or PDF, up to 20MB"); filled, a solid card showing a 48px
+// required, the shared upload hint); filled, a solid card showing a 48px
 // THUMBNAIL of what was actually picked (a muted file tile for PDFs, a check
 // when the preview didn't survive a remount — web's exact fallback ladder),
 // the file's name over the slot label, Replace, and remove. Showing the file
@@ -158,7 +159,7 @@ export function BusinessDocumentSlot({
           ) : null}
         </MyazaText>
         <MyazaText variant="bodySmall" color={colors.textMuted}>
-          {uploading ? 'Uploading…' : 'Photo or PDF, up to 20MB'}
+          {uploading ? 'Uploading…' : UPLOAD_HINT}
         </MyazaText>
       </View>
     </Pressable>

package/src/screens/BusinessDocumentsStep.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
-import * as ImagePicker from 'expo-image-picker';
 
 import { spacing } from '../config/theme';
 import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
@@ -11,8 +10,7 @@ import { BusinessDocumentSlot } from './BusinessDocumentSlot';
 import { withRetry } from '../services/retry';
 import { compressDocumentImage } from '../services/mediaCompress';
 import { resolveBusinessDocumentTypes, type ResolvedBusinessDocumentType } from '../config/businessSteps';
-import { isAcceptedPoaMimeType, POA_ACCEPTED_MIME_TYPES } from '../config/proofOfAddress';
-import { loadDocumentPicker } from '../services/documentPicker';
+import { useBusinessDocumentAttach } from './useBusinessDocumentAttach';
 
 // ---------------------------------------------------------------------------
 // Supporting company documents (certificate of incorporation, MEMART, …).
@@ -26,7 +24,8 @@ import { loadDocumentPicker } from '../services/documentPicker';
 // Layout mirrors the web SDK 1:1: the header carries the description, each
 // document is a dashed upload slot (see BusinessDocumentSlot), and Continue is
 // disabled until every required slot is filled. Tapping a slot opens the
-// photo/file source sheet — the mobile stand-in for web's file input.
+// photo/file source sheet — the mobile stand-in for web's file input; the
+// pickers themselves live in useBusinessDocumentAttach.
 // ---------------------------------------------------------------------------
 
 export const businessDocumentsMeta = {
@@ -79,57 +78,7 @@ export function BusinessDocumentsStep(): React.ReactElement {
     [store],
   );
 
-  const takePhoto = useCallback(
-    async (slot: ResolvedBusinessDocumentType) => {
-      const permission = await ImagePicker.requestCameraPermissionsAsync();
-      if (!permission.granted) {
-        setError('Camera access is needed to photograph the document.');
-        return;
-      }
-      const result = await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: 1 });
-      const asset = result.canceled ? undefined : result.assets[0];
-      if (asset) {
-        // A FRIENDLY name, not the picker's temp junk — camera/library assets
-        // carry generated names; the slot key says what the file IS.
-        await attach(slot, asset.uri, asset.mimeType ?? 'image/jpeg', `${slot.key}.jpg`);
-      }
-    },
-    [attach],
-  );
-
-  const choosePhoto = useCallback(
-    async (slot: ResolvedBusinessDocumentType) => {
-      const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], quality: 1 });
-      const asset = result.canceled ? undefined : result.assets[0];
-      if (asset) {
-        await attach(slot, asset.uri, asset.mimeType ?? 'image/jpeg', `${slot.key}.jpg`);
-      }
-    },
-    [attach],
-  );
-
-  const chooseFile = useCallback(
-    async (slot: ResolvedBusinessDocumentType) => {
-      const picker = loadDocumentPicker();
-      if (!picker) {
-        setError('Choosing a file is not available in this app. Please photograph the document.');
-        return;
-      }
-      const result = await picker.getDocumentAsync({
-        type: [...POA_ACCEPTED_MIME_TYPES],
-        copyToCacheDirectory: true,
-        multiple: false,
-      });
-      const asset = result.canceled ? undefined : result.assets?.[0];
-      if (!asset) return;
-      if (!isAcceptedPoaMimeType(asset.mimeType)) {
-        setError('Please choose a photo (JPEG, PNG or WebP) or a PDF.');
-        return;
-      }
-      await attach(slot, asset.uri, asset.mimeType, asset.name ?? slot.key);
-    },
-    [attach],
-  );
+  const { takePhoto, choosePhoto, chooseFile } = useBusinessDocumentAttach(attach, setError);
 
   const handleContinue = (): void => {
     if (missing.length > 0 || busySlot !== null) return;

package/src/screens/CompanyInfoFields.tsx

@@ -45,12 +45,16 @@ export function CompanyInfoFields({
   values,
   modes,
   country,
+  geoCountry,
   onChange,
 }: {
   values: BusinessState;
   modes: Record<CompanyInfoField, CompanyInfoMode>;
   /** Seeds the phone dial code: the company's country of registration. */
   country?: string;
+  /** The visitor's IP country: the dial-code seed of last resort, and the
+   *  row pinned to the top of the picker. */
+  geoCountry?: string | null;
   onChange: (field: CompanyInfoField, value: string) => void;
 }): React.ReactElement | null {
   const { colors } = useTheme();
@@ -88,7 +92,8 @@ export function CompanyInfoFields({
               // register's number when the lookup returned one.
               <PhoneNumberInput
                 value={value}
-                defaultCountry={country}
+                defaultCountry={country || geoCountry || undefined}
+                geoCountry={geoCountry}
                 onChange={({ e164 }) => onChange('phone', e164)}
               />
             ) : f.kind === 'date' ? (

package/src/screens/ConsentStep.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Linking, Pressable, View } from 'react-native';
-import Svg, { Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import Svg, { Circle } from 'react-native-svg';
 
 import { radius, spacing } from '../config/theme';
 import { PRIVACY_URL, TERMS_URL } from '../config/brand';
@@ -81,21 +81,10 @@ export function ConsentStep(): React.ReactElement {
               elevation: 6,
             }}
           >
-            {/* Top-left → bottom-right gradient badge, matching Flutter. A flat
-                fill was the last visual difference on this screen. The second
-                stop is the SAME primary at 70% opacity rather than a
-                pre-blended colour: composited over the sheet it produces
-                Flutter's `alphaBlend(primary@0.7, background)` exactly, and it
-                keeps working when the consumer overrides primaryColor or the
-                theme flips, which a hardcoded blend would not. */}
+            {/* Solid primary badge — no gradients in the flow (house rule
+                2026-08-29, applied across all three SDKs in lockstep). */}
             <Svg width={56} height={56} style={{ position: 'absolute' }}>
-              <Defs>
-                <LinearGradient id="myazaShieldHero" x1="0" y1="0" x2="1" y2="1">
-                  <Stop offset="0" stopColor={colors.primary} stopOpacity={1} />
-                  <Stop offset="1" stopColor={colors.primary} stopOpacity={0.7} />
-                </LinearGradient>
-              </Defs>
-              <Circle cx={28} cy={28} r={28} fill="url(#myazaShieldHero)" />
+              <Circle cx={28} cy={28} r={28} fill={colors.primary} />
             </Svg>
             <Icon name="shield" size={28} color={colors.onPrimary} />
           </View>
@@ -153,7 +142,7 @@ export function ConsentStep(): React.ReactElement {
         <MyazaText
           variant="bodySmall"
           color={colors.textDark}
-          style={{ fontWeight: '600', textDecorationLine: 'underline' }}
+          style={{ fontWeight: '500', textDecorationLine: 'underline' }}
           onPress={() => void Linking.openURL(TERMS_URL).catch(() => undefined)}
         >
           End User Terms
@@ -162,7 +151,7 @@ export function ConsentStep(): React.ReactElement {
         <MyazaText
           variant="bodySmall"
           color={colors.textDark}
-          style={{ fontWeight: '600', textDecorationLine: 'underline' }}
+          style={{ fontWeight: '500', textDecorationLine: 'underline' }}
           onPress={() => void Linking.openURL(PRIVACY_URL).catch(() => undefined)}
         >
           Privacy Policy

package/src/screens/ContactActions.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { MyazaButton } from '../components/MyazaButton';
+import { ContactFooterNote } from './ContactFooterNote';
+
+// ---------------------------------------------------------------------------
+// The contact step's footer: the one primary action (send, then verify), the
+// optional skip, and the reassurance note. Split from ContactVerificationStep
+// (200-line rule); the step owns every decision and this only renders them.
+// ---------------------------------------------------------------------------
+
+export function ContactActions({
+  hasChallenge,
+  busy,
+  disabled,
+  required,
+  isEmail,
+  onPrimary,
+  onSkip,
+}: {
+  /** A code is out: the button verifies instead of sending. */
+  hasChallenge: boolean;
+  busy: boolean;
+  disabled: boolean;
+  /** `required: false` adds the skip; the server enforces the rest. */
+  required: boolean;
+  isEmail: boolean;
+  onPrimary: () => void;
+  onSkip: () => void;
+}): React.ReactElement {
+  return (
+    <>
+      <View style={{ height: spacing.md }} />
+      <MyazaButton
+        label={hasChallenge ? 'Verify code' : 'Send code'}
+        loading={busy}
+        disabled={disabled}
+        onPress={onPrimary}
+      />
+
+      {!required ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <MyazaButton label="Skip for now" variant="ghost" disabled={busy} onPress={onSkip} />
+        </>
+      ) : null}
+
+      <View style={{ height: spacing.md }} />
+      <ContactFooterNote isEmail={isEmail} />
+    </>
+  );
+}

package/src/screens/ContactDestinationField.tsx

@@ -18,6 +18,7 @@ export function ContactDestinationField({
   onEmailChange,
   onPhoneChange,
   defaultCountry,
+  geoCountry,
   error,
   disabled,
 }: {
@@ -26,6 +27,8 @@ export function ContactDestinationField({
   onEmailChange: (value: string) => void;
   onPhoneChange: (value: { e164: string; isValid: boolean }) => void;
   defaultCountry?: string;
+  /** The visitor's IP country, pinned to the top of the dial-code picker. */
+  geoCountry?: string | null;
   error: string | null;
   disabled?: boolean;
 }): React.ReactElement {
@@ -52,6 +55,7 @@ export function ContactDestinationField({
       </MyazaText>
       <PhoneNumberInput
         defaultCountry={defaultCountry}
+        geoCountry={geoCountry}
         disabled={disabled}
         autoFocus
         onChange={onPhoneChange}

package/src/screens/ContactEntryPanel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { MyazaAlert } from '../components/MyazaAlert';
+import { ContactDestinationField } from './ContactDestinationField';
+import { ContactChannelChoice } from './ContactChannelChoice';
+import type { PhoneOtpChannel } from '../config/contact';
+
+// ---------------------------------------------------------------------------
+// The first half of the contact step: where to send the code, and (when the
+// workflow offers a choice) how. Composed as one widget so the step has a
+// single child per phase. Split from ContactVerificationStep (200-line rule);
+// mirrors Flutter's ContactEntryPanel.
+// ---------------------------------------------------------------------------
+
+export function ContactEntryPanel({
+  isEmail,
+  recovery,
+  email,
+  onEmailChange,
+  onPhoneChange,
+  defaultCountry,
+  geoCountry,
+  error,
+  disabled,
+  offeredChannels,
+  via,
+  onPickChannel,
+}: {
+  isEmail: boolean;
+  /** Entered via submit recovery: the server refused this channel's proof. */
+  recovery: boolean;
+  email: string;
+  onEmailChange: (value: string) => void;
+  onPhoneChange: (value: { e164: string; isValid: boolean }) => void;
+  defaultCountry?: string;
+  geoCountry?: string | null;
+  error: string | null;
+  disabled: boolean;
+  offeredChannels: PhoneOtpChannel[];
+  via: PhoneOtpChannel;
+  onPickChannel: (channel: PhoneOtpChannel) => void;
+}): React.ReactElement {
+  return (
+    <>
+      {recovery && (
+        <>
+          <MyazaAlert
+            variant="warning"
+            title="Please verify again"
+            message={`Your earlier confirmation has expired, so please verify ${isEmail ? 'your email' : 'your number'} once more. Everything else is saved, and we will submit again straight after.`}
+          />
+          <View style={{ height: spacing.md }} />
+        </>
+      )}
+      <ContactDestinationField
+        isEmail={isEmail}
+        email={email}
+        onEmailChange={onEmailChange}
+        onPhoneChange={onPhoneChange}
+        defaultCountry={defaultCountry}
+        geoCountry={geoCountry}
+        error={error}
+        disabled={disabled}
+      />
+      <ContactChannelChoice
+        offered={offeredChannels}
+        picked={via}
+        disabled={disabled}
+        onPick={onPickChannel}
+      />
+    </>
+  );
+}

package/src/screens/ContactVerificationStep.tsx

@@ -3,13 +3,10 @@ import { View } from 'react-native';
 
 import { spacing } from '../config/theme';
 import { useEffectiveCountry, useKyc, useKycConfig, useKycStore } from '../components/runtime';
-import { MyazaButton } from '../components/MyazaButton';
-import { MyazaAlert } from '../components/MyazaAlert';
-import { ContactDestinationField } from './ContactDestinationField';
+import { ContactActions } from './ContactActions';
+import { ContactEntryPanel } from './ContactEntryPanel';
 import { ContactVerifiedPanel } from './ContactVerifiedPanel';
 import { ContactCodeStep } from './ContactCodeStep';
-import { ContactChannelChoice } from './ContactChannelChoice';
-import { ContactFooterNote } from './ContactFooterNote';
 import {
   contactCodeLength,
   contactIsRequired,
@@ -57,10 +54,9 @@ export function ContactVerificationStep({
   const [destination, setDestination] = useState(contact.emailAddress ?? '');
   // The phone field emits E.164 + validity from libphonenumber, so the step no
   // longer guesses either from raw text.
-  const [phone, setPhone] = useState<{ e164: string; isValid: boolean }>({
-    e164: contact.phoneNumber ?? '',
-    isValid: false,
-  });
+  const [phone, setPhone] = useState<{ e164: string; isValid: boolean }>(
+    { e164: contact.phoneNumber ?? '', isValid: false },
+  );
   const [challengeId, setChallengeId] = useState<string | null>(null);
   const [expiresAt, setExpiresAt] = useState<string | null>(null);
   const [code, setCode] = useState('');
@@ -174,57 +170,31 @@ export function ContactVerificationStep({
           onResend={(switchTo) => void send(switchTo)}
         />
       ) : (
-        <>
-          {recovery && (
-            <>
-              <MyazaAlert
-                variant="warning"
-                title="Please verify again"
-                message={`Your earlier confirmation has expired, so please verify ${isEmail ? 'your email' : 'your number'} once more. Everything else is saved, and we will submit again straight after.`}
-              />
-              <View style={{ height: spacing.md }} />
-            </>
-          )}
-          <ContactDestinationField
-            isEmail={isEmail}
-            email={destination}
-            onEmailChange={setDestination}
-            onPhoneChange={setPhone}
-            defaultCountry={
-              config.phoneVerification?.defaultCountry ??
-              country ??
-              serverConfig.geoCountry ??
-              undefined
-            }
-            error={error}
-            disabled={busy}
-          />
-          <ContactChannelChoice
-            offered={offeredChannels}
-            picked={via}
-            disabled={busy}
-            onPick={setVia}
-          />
-        </>
+        <ContactEntryPanel
+          isEmail={isEmail}
+          recovery={recovery}
+          email={destination}
+          onEmailChange={setDestination}
+          onPhoneChange={setPhone}
+          defaultCountry={config.phoneVerification?.defaultCountry ?? country ?? serverConfig.geoCountry ?? undefined}
+          geoCountry={serverConfig.geoCountry}
+          error={error}
+          disabled={busy}
+          offeredChannels={offeredChannels}
+          via={via}
+          onPickChannel={setVia}
+        />
       )}
 
-      <View style={{ height: spacing.md }} />
-      <MyazaButton
-        label={challengeId ? 'Verify code' : 'Send code'}
-        loading={busy}
+      <ContactActions
+        hasChallenge={challengeId != null}
+        busy={busy}
         disabled={challengeId ? code.length !== codeLength : !canSend}
-        onPress={() => (challengeId ? void check(code) : void send())}
+        required={required}
+        isEmail={isEmail}
+        onPrimary={() => (challengeId ? void check(code) : void send())}
+        onSkip={advance}
       />
-
-      {!required ? (
-        <>
-          <View style={{ height: spacing.sm }} />
-          <MyazaButton label="Skip for now" variant="ghost" disabled={busy} onPress={advance} />
-        </>
-      ) : null}
-
-      <View style={{ height: spacing.md }} />
-      <ContactFooterNote isEmail={isEmail} />
     </View>
   );
 }

package/src/screens/CountrySelectStep.tsx

@@ -1,13 +1,9 @@
-import React, { useMemo, useState } from 'react';
-import { Pressable, ScrollView, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
 
-import { radius, spacing } from '../config/theme';
-import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
-import { MyazaText } from '../components/Typography';
-import { MyazaInput } from '../components/MyazaInput';
-import { CountryFlag } from '../components/CountryFlag';
-import { Icon } from '../components/Icon';
-import { groupCountriesByRegion, regionCountryName } from '../config/regions';
+import { useKyc, useKycConfig, useKycStore } from '../components/runtime';
+import { CountryRegionPicker, CountryRow } from '../components/CountryRegionPicker';
+import { regionCountryName } from '../config/regions';
 import { countrySelectOptions } from '../store/derive';
 
 // ---------------------------------------------------------------------------
@@ -54,7 +50,14 @@ export function CountrySelectStep(): React.ReactElement {
   };
 
   if (options.length > COUNTRY_SEARCH_THRESHOLD) {
-    return <CountryRegionPicker countries={options} selected={selected} onPick={pick} />;
+    return (
+      <CountryRegionPicker
+        countries={options}
+        selected={selected}
+        geoCountry={serverConfig.geoCountry}
+        onPick={pick}
+      />
+    );
   }
 
   return (
@@ -71,140 +74,3 @@ export function CountrySelectStep(): React.ReactElement {
     </View>
   );
 }
-
-function CountryRegionPicker({
-  countries,
-  selected,
-  onPick,
-}: {
-  countries: string[];
-  selected: string | null;
-  onPick: (country: string) => void;
-}): React.ReactElement {
-  const { colors } = useTheme();
-  const [query, setQuery] = useState('');
-
-  const groups = useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    const filtered = needle
-      ? countries.filter(
-          (code) =>
-            code.toLowerCase().includes(needle) ||
-            regionCountryName(code).toLowerCase().includes(needle),
-        )
-      : countries;
-    return groupCountriesByRegion(filtered);
-  }, [countries, query]);
-
-  const empty = groups.length === 0;
-
-  return (
-    // The search box stays put and the list owns its own scroll, so a
-    // ~240-country flow does not scroll the search field off the top. That
-    // relies on the SHEET rendering this step with `fillsViewport` — inside a
-    // scroll view the nested list below would take an unbounded height, outgrow
-    // the viewport, and drag the search box off the top with it.
-    <View style={{ flex: 1 }}>
-      <MyazaInput
-        value={query}
-        onChangeText={setQuery}
-        placeholder="Search countries…"
-        autoCapitalize="none"
-        prefix={<Icon name="search" size={18} color={colors.textSecondary} />}
-      />
-      <View style={{ height: spacing.md }} />
-
-      {empty ? (
-        <MyazaText variant="bodyMedium" style={{ textAlign: 'center', marginTop: spacing.lg }}>
-          No countries match your search.
-        </MyazaText>
-      ) : (
-        // `nestedScrollEnabled` stays: Android refuses to scroll a nested
-        // same-direction list without it, and this is still nested on the
-        // flat-list path and inside any future scrolling parent.
-        <ScrollView
-          nestedScrollEnabled
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator={false}
-        >
-          {groups.map((group) => (
-            <View key={group.region}>
-              {/* Uppercase, tracked-out section label — Flutter's region
-                  header. Lowercase text at the default weight read as another
-                  list row rather than a divider. */}
-              <MyazaText
-                variant="bodySmall"
-                color={colors.textSecondary}
-                style={{
-                  fontWeight: '700',
-                  letterSpacing: 0.6,
-                  paddingHorizontal: spacing.xs,
-                  paddingVertical: spacing.sm,
-                }}
-              >
-                {group.region.toUpperCase()}
-              </MyazaText>
-              {group.countries.map((entry) => (
-                <CountryRow
-                  key={entry.code}
-                  code={entry.code}
-                  name={entry.name}
-                  selected={entry.code === selected}
-                  onPress={() => onPick(entry.code)}
-                />
-              ))}
-            </View>
-          ))}
-        </ScrollView>
-      )}
-    </View>
-  );
-}
-
-function CountryRow({
-  code,
-  name,
-  selected,
-  onPress,
-}: {
-  code: string;
-  name: string;
-  selected: boolean;
-  onPress: () => void;
-}): React.ReactElement {
-  const { colors } = useTheme();
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityRole="radio"
-      accessibilityState={{ checked: selected }}
-      accessibilityLabel={name}
-      // Matches the Flutter SDK's CountryOptionTile exactly — the two had
-      // drifted (24px flag / 12px padding here vs 32 / 16 there), which is why
-      // the same screen looked like a different component on each platform. The
-      // spacing and radius scales are identical across the SDKs, so there is
-      // nothing platform-specific to reconcile: `md` means 16 on both.
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: spacing.md,
-        borderRadius: radius.md,
-        borderWidth: selected ? 1.5 : 1,
-        borderColor: selected ? colors.primary : colors.border,
-        backgroundColor: selected ? colors.primary50 : colors.background,
-        marginBottom: spacing.sm,
-      }}
-    >
-      <CountryFlag country={code} size={32} />
-      <View style={{ width: 12 }} />
-      <MyazaText variant="label" style={{ flex: 1, fontWeight: '500' }}>
-        {name}
-      </MyazaText>
-      <Icon
-        name="chevron-right"
-        size={18}
-        color={selected ? colors.primary : colors.textSecondary}
-      />
-    </Pressable>
-  );
-}