Skip to content

React Native Components

The @moveris/react-native package provides 7 UI components for building native liveness verification flows. All components use React Native StyleSheet and accept style overrides.

In plain terms

Mobile-ready UI components: camera view, face overlay, capture button, result display. Use LivenessView for a complete flow on iOS and Android, or combine individual components for custom layouts.

Import

import {
  LivenessView,
  LivenessOverlay,
  LivenessButton,
  LivenessResult,
  FrameCounter,
  CameraCapture,
  ErrorBoundary,
} from '@moveris/react-native';

LivenessView

The main all-in-one component that provides camera preview, face guide overlay, capture controls, and result display. Uses react-native-vision-camera internally.

This is the recommended starting point for most integrations.

<LivenessView
  onResult={(result) => console.log(result.verdict)}
  onError={(error) => console.error(error)}
  enableFaceDetection={false}
  showFrameCounter={true}
/>

Props

Prop Type Default Description
onResult (result: LivenessResult) => void -- Called when verification completes
onError (error: Error) => void -- Called on error
sessionId string auto-generated Optional. Session ID for all API calls. If omitted, a UUID v4 is generated per start().
enableFaceDetection boolean false Enable smart face detection
faceDetectorAdapter FaceDetectorAdapter -- Face detector (e.g., createMLKitAdapter())
showFrameCounter boolean true Show frame progress counter
style ViewStyle -- Container style overrides

LivenessOverlay

Face guide oval overlay that provides visual feedback on face alignment. Rendered on top of the camera preview.

<LivenessOverlay
  state="aligning"
  feedbackMessage="Center your face in the oval"
/>

Props

Prop Type Default Description
state 'searching' \| 'aligning' \| 'ready' \| 'capturing' 'searching' Visual state of the oval guide
feedbackMessage string -- Message displayed below the oval
style ViewStyle -- Overlay style overrides

LivenessButton

Styled action button for start, stop, and retry actions.

<LivenessButton
  label="Start Verification"
  onPress={handleStart}
  variant="primary"
  disabled={isProcessing}
/>

Props

Prop Type Default Description
label string -- Button text
onPress () => void -- Press handler
variant 'primary' \| 'secondary' \| 'danger' 'primary' Visual style
disabled boolean false Disable the button
loading boolean false Show loading indicator
style ViewStyle -- Button style overrides

LivenessResult

Displays the verification result with verdict, score, and realScore (use for decision-making).

<LivenessResult
  result={livenessResult}
  onRetry={handleRetry}
/>

Props

Prop Type Default Description
result LivenessResult -- Required. The verification result
onRetry () => void -- Called when user taps retry
showDetails boolean true Show score and confidence details
style ViewStyle -- Container style overrides

FrameCounter

Displays frame capture progress (e.g., "3/10" or "15/30" depending on model).

<FrameCounter
  current={framesReceived}
  total={framesRequired}
/>

Props

Prop Type Default Description
current number -- Frames captured so far
total number -- Total frames required
style ViewStyle -- Style overrides

CameraCapture

Native camera capture component using react-native-vision-camera. Provides direct control over frame capture from the camera feed.

import { useRef } from 'react';
import { CameraCapture } from '@moveris/react-native';

function MyCapture() {
  const cameraRef = useRef(null);

  const capture = async () => {
    const frame = await cameraRef.current?.captureFrame();
    console.log('Captured:', frame);
  };

  return (
    <View style={{ flex: 1 }}>
      <CameraCapture ref={cameraRef} facing="front" />
      <Pressable onPress={capture}>
        <Text>Capture Frame</Text>
      </Pressable>
    </View>
  );
}

Props

Prop Type Default Description
facing 'front' \| 'back' 'front' Camera facing direction
onReady () => void -- Called when camera is initialized
onError (error: Error) => void -- Called on camera error
style ViewStyle -- Camera view style

ErrorBoundary

Error boundary wrapper that catches rendering errors in child components.

<ErrorBoundary
  fallback={
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Something went wrong. Please restart.</Text>
    </View>
  }
  onError={(error) => logError(error)}
>
  <LivenessView onResult={handleResult} />
</ErrorBoundary>

Props

Prop Type Default Description
children ReactNode -- Components to wrap
fallback ReactNode -- UI to show when an error occurs
onError (error: Error) => void -- Error callback

Context Provider

MoverisProvider

Provides SDK configuration to all child components and hooks. Wrap your app or navigation root with this provider.

import { MoverisProvider } from '@moveris/react-native';

function App() {
  return (
    <MoverisProvider
      config={{
        apiKey: 'sk-your-api-key',
        baseUrl: 'https://api.moveris.com',
        timeout: 30000,
        enableRetry: true,
      }}
    >
      <NavigationContainer>
        {/* Your screens */}
      </NavigationContainer>
    </MoverisProvider>
  );
}

useMoverisContext()

Access the provider configuration from any child component:

import { useMoverisContext } from '@moveris/react-native';

const { config } = useMoverisContext();

useLivenessClient()

Access the LivenessClient instance for direct API calls:

import { useLivenessClient } from '@moveris/react-native';

const client = useLivenessClient();
const health = await client.health();

Style Utilities

import {
  mergeNativeStyles,
  containerStyles,
  overlayStyles,
  buttonStyles,
  resultStyles,
  controlsStyles,
} from '@moveris/react-native';

// Merge custom styles with defaults
const customContainer = mergeNativeStyles(containerStyles, {
  backgroundColor: '#1a1a2e',
  borderRadius: 12,
});