@velnai/form-rn

Drop a Velnai lead-capture form into any React Native or Expo app.

npm install @velnai/form-rn react-native-webview
# Expo:
npx expo install react-native-webview

Usage

import { VelnaiForm } from '@velnai/form-rn'

export function ContactScreen({ user, navigation }) {
  return (
    <VelnaiForm
      publicKey="frm_abc123"
      prefill={{ email: user.email, name: user.name }}
      onSubmit={() => navigation.navigate('Thanks')}
      style={{ flex: 1 }}
    />
  )
}

Props

| Prop | Type | What it does | |---|---|---| | publicKey | string | The form's public key. | | prefill | Record<string, unknown> | Field values to pre-populate, keyed by field name. | | lang | string | Locale code (e.g. 'es'). | | previewToken | string | Optional preview token for DRAFT forms. | | formsBase | string | Override the forms host. Default https://forms.velnai.com. | | onView | () => void | Fires once the form has booted. | | onSubmit | () => void | Fires when the visitor submits successfully. | | onClose | () => void | Fires when a modal-mode form requests close. | | onRedirect | (url) => void | Fires when the form wants to redirect. | | style | StyleProp<ViewStyle> | Style for the wrapping View. Default { flex: 1 }. |

Why WebView instead of native components?

The form has 30+ field types (signature, file upload, payment, scheduling, address autocomplete, etc.) with conditional logic, A/B variants, theming, and i18n. A native React Native port would have to re-implement those + stay in sync forever. WebView keeps you on the same renderer as everyone else — new features land in your app the day they ship on the web, with zero work on your side.

If you ever need to detect form events from the host side (analytics, navigation), use the onView / onSubmit / onClose / onRedirect callbacks. They're delivered via the WebView's postMessage bridge — no extra setup.

License

MIT