React Native Guide

Protect a critical screen (login, checkout) in a React Native app. Pure JS/TS — no native Android/iOS module setup required.

Install

bash

npm install @certilayer/react-native

1. Wrap your app root

React Native has no document-level touch listener, so touch capture is wired through this wrapper — the one structural change required.

App.tsx

import CertiLayer, { CertiLayerRoot } from '@certilayer/react-native'

CertiLayer.init({ apiKey: 'certilayer_live_pk_xxxx' }) // PUBLIC key

export default function App() {
  return (
    <CertiLayerRoot>
      <NavigationContainer onStateChange={(state) => {
        const route = state?.routes[state.index]
        if (route) CertiLayer.trackScreen(route.name)
      }}>
        {/* your app tree */}
      </NavigationContainer>
    </CertiLayerRoot>
  )
}

2. Verify before a critical action

CheckoutScreen.tsx

import CertiLayer from '@certilayer/react-native'

async function handleCheckout() {
  const sessionId = CertiLayer.getSessionId()

  await fetch('https://yourapi.com/checkout', {
    method: 'POST',
    headers: { 'X-CertiLayer-Session': sessionId },
    body: JSON.stringify(cart),
  })
}

Verify sessionId server-side with the Node.js SDK or Python SDK — same pattern as the Web SDK.

⚠️

Known limitation: touch pressure/contact-area data isn't exposed consistently across iOS and Android, so touch_area_variance stays at a neutral default. Keyboard capture isn't included in this version.