@velion-la/onboarding-sdk-react-native 1.0.0-beta.2

package/lib/typescript/utils/taxInfoConfig.d.ts

@@ -0,0 +1,7 @@
+import type { TaxInfoConfig } from '../types';
+/**
+ * Normalizes selectable lists for TAX_INFO. Options come only from the backend
+ * `current_step.config.accepted_tax_information` (see TaxInfoModule); there are no SDK defaults.
+ */
+export declare function resolveTaxInfoConfig(config: Partial<TaxInfoConfig> | undefined): TaxInfoConfig;
+//# sourceMappingURL=taxInfoConfig.d.ts.map

package/lib/typescript/utils/taxInfoConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"taxInfoConfig.d.ts","sourceRoot":"","sources":["../../../src/utils/taxInfoConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,SAAS,GAAG,aAAa,CAO9F"}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@velion-la/onboarding-sdk-react-native",
+  "version": "1.0.0-beta.2",
+  "description": "Native React Native SDK for the Velion Onboarding (KYC) flow: ID document OCR, passive + active liveness, device fingerprint, OTP verification, address picker, and personal / legal information forms.",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "echo 'eslint not configured yet'",
+    "clean": "del-cli lib",
+    "prepack": "bob build",
+    "build": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "kyc",
+    "onboarding",
+    "liveness",
+    "ocr",
+    "velion"
+  ],
+  "homepage": "https://developers.velion.la",
+  "bugs": {
+    "email": "dev@velion.la"
+  },
+  "author": "Velion <dev@velion.la>",
+  "license": "SEE LICENSE IN LICENSE",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@noble/hashes": "^1.5.0",
+    "expo-application": "~7.0.0",
+    "expo-constants": "~18.0.0",
+    "expo-crypto": "~15.0.0",
+    "expo-device": "~8.0.0",
+    "expo-file-system": "~19.0.0",
+    "expo-image-manipulator": "~14.0.0",
+    "expo-keep-awake": "~15.0.0",
+    "expo-location": "~19.0.0",
+    "react-native-sse": "^1.2.1"
+  },
+  "peerDependencies": {
+    "@fingerprintjs/fingerprintjs-pro-react-native": ">=3.0.0",
+    "expo": ">=54.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-maps": ">=1.20.0",
+    "react-native-svg": ">=15.0.0",
+    "react-native-vision-camera": ">=4.6.0"
+  },
+  "peerDependenciesMeta": {
+    "@fingerprintjs/fingerprintjs-pro-react-native": {
+      "optional": true
+    },
+    "react-native-maps": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "del-cli": "^6.0.0",
+    "react-native-builder-bob": "^0.40.0",
+    "typescript": "~5.8.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/src/camera/AddressSearchBar.tsx

@@ -0,0 +1,363 @@
+/**
+ * Address search bar for the assisted ADDRESS_INFO flow.
+ *
+ * Uses the OS-native forward geocoder (`expo-location.geocodeAsync`) with a
+ * debounced TextInput. No Google REST calls, no API key, no native bridges.
+ *
+ * `geocodeAsync` returns coordinates only, so for each candidate we run a
+ * reverse geocode in parallel to produce a human-readable label (and the
+ * parsed address structure used by the rest of the flow). Limited to the
+ * top 5 candidates to bound the work per query.
+ *
+ * Trade-off vs Google Places autocomplete: this suggests when the user
+ * pauses typing (~400ms), not on every keystroke. Quality on Apple Maps
+ * (iOS) and Google Play Services geocoder (Android) is enough for urban
+ * LATAM addresses — for KYC the user usually knows their full address.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ActivityIndicator,
+  Keyboard,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import * as Location from 'expo-location';
+import { useTheme } from '../ui/theme';
+import { log } from '../utils/log';
+import type { ParsedAddressFields } from '../utils/parseGoogleAddressComponents';
+
+const DEBOUNCE_MS = 400;
+const MAX_RESULTS = 5;
+
+export interface AddressSuggestion {
+  label: string;
+  latitude: number;
+  longitude: number;
+  parsed: ParsedAddressFields & { latitude: number; longitude: number };
+}
+
+export interface AddressSearchBarProps {
+  placeholder: string;
+  searchingLabel: string;
+  noResultsLabel: string;
+  /** Called when the user picks a suggestion. */
+  onSelect: (suggestion: AddressSuggestion) => void;
+  /** Restrict matches to these ISO 3166-1 alpha-2 codes (best-effort filter). */
+  countryAllow?: ReadonlyArray<string> | undefined;
+}
+
+export function AddressSearchBar({
+  placeholder,
+  searchingLabel,
+  noResultsLabel,
+  onSelect,
+  countryAllow,
+}: AddressSearchBarProps) {
+  const theme = useTheme();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<AddressSuggestion[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [touched, setTouched] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const requestId = useRef(0);
+
+  // Normalise the allow-list once.
+  const allowSet = useMemo(
+    () =>
+      countryAllow && countryAllow.length > 0
+        ? new Set(countryAllow.map((c) => c.toUpperCase()))
+        : null,
+    [countryAllow],
+  );
+
+  // Run a debounced search whenever `query` changes.
+  useEffect(() => {
+    const text = query.trim();
+    if (text.length < 3) {
+      setResults([]);
+      setSearching(false);
+      return;
+    }
+    setSearching(true);
+    const myReq = ++requestId.current;
+    const handle = setTimeout(async () => {
+      try {
+        const coords = await Location.geocodeAsync(text);
+        if (myReq !== requestId.current) return; // stale
+        const top = coords.slice(0, MAX_RESULTS);
+        const suggestions = await Promise.all(
+          top.map(async (c): Promise<AddressSuggestion | null> => {
+            try {
+              const [addr] = await Location.reverseGeocodeAsync({
+                latitude: c.latitude,
+                longitude: c.longitude,
+              });
+              if (!addr) return null;
+              const isoCc = (addr.isoCountryCode ?? '').toUpperCase();
+              if (allowSet && isoCc && !allowSet.has(isoCc)) return null;
+              return {
+                label: formatLabel(addr),
+                latitude: c.latitude,
+                longitude: c.longitude,
+                parsed: {
+                  country: isoCc,
+                  state: addr.region ?? '',
+                  city: addr.city ?? '',
+                  district: addr.district ?? addr.subregion ?? '',
+                  neighborhood: '',
+                  street: addr.street ?? '',
+                  number: addr.streetNumber ?? '',
+                  zip_code: addr.postalCode ?? '',
+                  latitude: c.latitude,
+                  longitude: c.longitude,
+                },
+              };
+            } catch (err) {
+              log.warn('[AddressSearchBar] reverse failed for candidate', err);
+              return null;
+            }
+          }),
+        );
+        if (myReq !== requestId.current) return;
+        const clean = suggestions.filter(
+          (s): s is AddressSuggestion => s !== null && s.label.length > 0,
+        );
+        // De-dup by label so we don't show "Av Corrientes 1234, CABA" twice
+        // when the forward geocoder returns two coords for the same address.
+        const seen = new Set<string>();
+        const deduped = clean.filter((s) => {
+          if (seen.has(s.label)) return false;
+          seen.add(s.label);
+          return true;
+        });
+        setResults(deduped);
+        setSearching(false);
+      } catch (err) {
+        if (myReq !== requestId.current) return;
+        log.warn('[AddressSearchBar] geocode failed', err);
+        setResults([]);
+        setSearching(false);
+      }
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(handle);
+  }, [query, allowSet]);
+
+  const handlePick = useCallback(
+    (s: AddressSuggestion) => {
+      setQuery(s.label);
+      setResults([]);
+      setFocused(false);
+      Keyboard.dismiss();
+      onSelect(s);
+    },
+    [onSelect],
+  );
+
+  const handleClear = useCallback(() => {
+    setQuery('');
+    setResults([]);
+    setTouched(false);
+    setFocused(false);
+    Keyboard.dismiss();
+  }, []);
+
+  const showDropdown = focused && touched && query.trim().length >= 3;
+  const showClearBtn = query.length > 0;
+
+  return (
+    <View>
+      <View
+        style={[
+          styles.inputWrap,
+          {
+            backgroundColor: theme.backgroundColor,
+            borderColor: theme.borderColor,
+            borderRadius: theme.borderRadiusPx,
+          },
+        ]}
+      >
+        <TextInput
+          style={[styles.input, { color: theme.textColor }]}
+          placeholder={placeholder}
+          placeholderTextColor={theme.textSecondaryColor}
+          value={query}
+          onChangeText={(t) => {
+            setTouched(true);
+            setQuery(t);
+          }}
+          onFocus={() => setFocused(true)}
+          onBlur={() => {
+            // Delay so a tap on a suggestion still registers before we collapse.
+            setTimeout(() => setFocused(false), 150);
+          }}
+          autoCorrect={false}
+          autoCapitalize="words"
+          returnKeyType="search"
+        />
+        {showClearBtn ? (
+          <Pressable
+            onPress={handleClear}
+            accessibilityRole="button"
+            accessibilityLabel="Clear search"
+            hitSlop={8}
+            style={({ pressed }) => [
+              styles.clearBtn,
+              { opacity: pressed ? 0.6 : 1 },
+            ]}
+          >
+            <Text style={[styles.clearText, { color: theme.textSecondaryColor }]}>
+              ✕
+            </Text>
+          </Pressable>
+        ) : null}
+      </View>
+
+      {showDropdown ? (
+        <View
+          style={[
+            styles.dropdown,
+            {
+              backgroundColor: theme.backgroundColor,
+              borderColor: theme.borderColor,
+              borderRadius: theme.borderRadiusPx,
+            },
+          ]}
+        >
+          {searching ? (
+            <View style={styles.dropdownRow}>
+              <ActivityIndicator color={theme.primaryColor} size="small" />
+              <Text style={[styles.dropdownText, { color: theme.textSecondaryColor }]}>
+                {searchingLabel}
+              </Text>
+            </View>
+          ) : results.length === 0 ? (
+            <View style={styles.dropdownRow}>
+              <Text style={[styles.dropdownText, { color: theme.textSecondaryColor }]}>
+                {noResultsLabel}
+              </Text>
+            </View>
+          ) : (
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              style={styles.dropdownScroll}
+            >
+              {results.map((s, i) => (
+                <Pressable
+                  key={`${s.latitude},${s.longitude},${i}`}
+                  onPress={() => handlePick(s)}
+                  style={({ pressed }) => [
+                    styles.suggestion,
+                    {
+                      backgroundColor: pressed
+                        ? theme.primaryColor + '14'
+                        : 'transparent',
+                    },
+                  ]}
+                >
+                  <Text
+                    style={[styles.suggestionText, { color: theme.textColor }]}
+                    numberOfLines={2}
+                  >
+                    {s.label}
+                  </Text>
+                </Pressable>
+              ))}
+            </ScrollView>
+          )}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function formatLabel(addr: Location.LocationGeocodedAddress): string {
+  const streetLine =
+    addr.street && addr.streetNumber
+      ? `${addr.street} ${addr.streetNumber}`
+      : addr.street ?? addr.name ?? '';
+  const parts = [streetLine, addr.city, addr.region, addr.country]
+    .filter((s): s is string => Boolean(s && s.trim().length))
+    .map((s) => s.trim());
+  // De-dup adjacent identical tokens (Apple sometimes returns city == region).
+  const out: string[] = [];
+  for (const p of parts) {
+    if (out[out.length - 1] !== p) out.push(p);
+  }
+  return out.join(', ');
+}
+
+const styles = StyleSheet.create({
+  inputWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 44,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+    // Float over the map — sombra propia para que se "levante" sin
+    // necesitar un card wrapper detrás.
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 10,
+    fontSize: 15,
+  },
+  clearBtn: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 4,
+  },
+  clearText: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 18,
+  },
+  dropdown: {
+    marginTop: 4,
+    borderWidth: 1,
+    overflow: 'hidden',
+    maxHeight: 240,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  dropdownScroll: {
+    maxHeight: 240,
+  },
+  dropdownRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    padding: 12,
+  },
+  dropdownText: {
+    fontSize: 13,
+  },
+  suggestion: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  suggestionText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});