React Native Integration

Integrate SilentShield into React Native apps using a WebView-based wrapper. The widget runs inside a lightweight WebView and communicates with your app via the React Native message bridge.

Installation

npmbash

npm install @silentshield/react-native react-native-webview

yarnbash

yarn add @silentshield/react-native react-native-webview

iOS: Install CocoaPods

After installing, run cd ios && pod install to link the native WebView dependency.

Component Usage

The simplest way to integrate SilentShield is with the <SilentShield /> component:

ContactForm.tsxtsx

import { SilentShield } from '@silentshield/react-native';

function ContactForm() {
  const [token, setToken] = useState<string | null>(null);

  return (
    <View>
      {/* Your form fields */}
      <TextInput placeholder="Email" />
      <TextInput placeholder="Message" multiline />

      {/* SilentShield widget */}
      <SilentShield
        apiKey="sk_live_..."
        baseUrl="https://api.silentshield.com"
        onVerdict={(result) => {
          if (result.verdict === 'human') {
            setToken(result.token);
          }
        }}
        onError={(err) => console.error(err)}
        lang="en"
        theme="light"
      />

      <Button
        title="Submit"
        onPress={() => submitForm(token)}
        disabled={!token}
      />
    </View>
  );
}

Props Reference

Prop	Type	Required	Description
apiKey	string	Yes	Your SilentShield API key
baseUrl	string	Yes	Base URL of SilentShield API
onVerdict	(result) => void	Yes	Callback with verdict result
onError	(error) => void	No	Error callback
onReady	() => void	No	Called when widget is loaded
lang	string	No	Language code (default: "en")
zeroPii	boolean	No	Enable Zero-PII mode (no fingerprinting)
theme	"light" \| "dark" \| "auto"	No	Widget theme
invisible	boolean	No	Hide widget, verify programmatically

Hook Usage (Programmatic)

For invisible verification or custom UI flows, use the useSilentShield() hook:

LoginScreen.tsxtsx

import { useSilentShield } from '@silentshield/react-native';

function LoginScreen() {
  const { verify, reset, isReady, isVerifying, WebViewComponent } =
    useSilentShield({
      apiKey: 'sk_live_...',
      baseUrl: 'https://api.silentshield.com',
    });

  const handleLogin = async () => {
    const result = await verify();
    if (result.verdict === 'human') {
      // Submit login with result.token
    }
  };

  return (
    <View>
      {/* Hidden WebView for behavior tracking */}
      {WebViewComponent}

      <TextInput placeholder="Email" />
      <TextInput placeholder="Password" secureTextEntry />

      <Button
        title={isVerifying ? 'Verifying...' : 'Log In'}
        onPress={handleLogin}
        disabled={!isReady || isVerifying}
      />
    </View>
  );
}

Invisible Mode

In invisible mode, the WebView is rendered with zero height and opacity. Behavior tracking runs in the background, and you trigger verification programmatically via the verify() function. This is ideal for login screens and checkout flows.

CheckoutScreen.tsxtsx

<SilentShield
  apiKey="sk_live_..."
  baseUrl="https://api.silentshield.com"
  onVerdict={handleVerdict}
  invisible={true}  // No visible UI
/>

Recommended: Use Zero-PII Mode for Mobile

Browser fingerprints collected inside a WebView are less reliable than in a real browser. We recommend enabling zeroPii={true} for React Native apps, which disables fingerprinting and relies entirely on behavioral signals.