# React Native ⚛

Our `CardScanView` react component makes it easy to add insurance card scanning to any React Native application in **5 minutes or less.**

### Installation

```
$ npm i @cardscan.ai/insurance-cardscan-react-native
$ yarn add @cardscan.ai/insurance-cardscan-react-native
```

### Usage

Import the library widget into your project files:

```javascript
import { CardScanView } from "@cardscan.ai/insurance-cardscan-react-native";
```

### Basic Example

```jsx
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { CardScanView } from '@cardscan.ai/insurance-cardscan-react-native';

function onSuccess(card: any) {
  console.log('new card: ', card);
}

function onError(error) {
  console.error('Error occurred: ', error);
}

// See Authentication on where to get this sessionToken.
const sessionToken = 'JWT_TOKEN';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <CardScanView 
        live={false} 
        sessionToken={sessionToken} 
        onSuccess={onSuccess} 
        onError={onError}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

```

### Available Props

```jsx
<CardScanView
  // Required
  live={false}
  sessionToken={token}
  onSuccess={onSuccess}

  // Recommneded
  onCancel={onCancel}
  onError={onError}
  
  // Optional
  backsideSupport={scanBackside}
  onRetry={onRetry}

  // UI Customization
  messages={messages}
  messageStyle={messageStyle}
  autoSwitchActiveColor={autoSwitchActiveColor}
  autoSwitchInactiveColor={autoSwitchInactiveColor}
  progressBarColor={progressBarColor}
  widgetBackgroundColor={widgetBackgroundColor}
/>
```

### **Main Props**

<table><thead><tr><th width="289">Prop</th><th width="112">Required</th><th width="135">Type</th><th>Description</th></tr></thead><tbody><tr><td>live</td><td>false</td><td>Boolean</td><td>Toggle the production or sandbox version. <strong>Default</strong>: false</td></tr><tr><td>sessionToken</td><td>true</td><td>String</td><td>A JWT token for the current user, see <a href="/pages/-MfnTIPuqKcHV1TvM04w">Authentication</a></td></tr><tr><td>onSuccess</td><td>true</td><td>Function</td><td>Called on successful scan. The first argument is the scanned card.</td></tr><tr><td>onCancel</td><td>false</td><td>Function</td><td>Triggered when the user cancels the CardScanView UI.</td></tr><tr><td>onError</td><td>false</td><td>Function</td><td>Called when an error is returned by the API or the CardScanView fails to initialize.</td></tr><tr><td>backsideSupport</td><td>false</td><td>Boolean</td><td>Enable scanning of the front and back side of the card.<br><strong>Default</strong>: false</td></tr><tr><td>onRetry</td><td>false</td><td>Function</td><td>Called when a failed scan triggers a retry.</td></tr></tbody></table>

### UI/UX Customization Props

The react widget is designed to be highly customizable. Please see the [#customization](#customization "mention") section of UI Components to adjust these elements to match your application's branding and theme:

[Customization ⚙️](/ui-components/customization.md)

{% hint style="info" %}
**Note:** All UI/UX Props are optional
{% endhint %}

<table><thead><tr><th width="329.3333333333333">Prop</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>messages</td><td>Object</td><td>Customize the text displayed by the UI.</td></tr><tr><td>messageStyle</td><td>Object</td><td>Set the size, color and background color of the text displayed by the UI.</td></tr><tr><td>autoSwitchActiveColor</td><td>String</td><td>Set the color of the auto scan switch</td></tr><tr><td>autoSwitchInactiveColor</td><td>String</td><td>Set the color of the disabled auto scan switch</td></tr><tr><td>progressBarColor</td><td>String</td><td>Set the color of the progress bars or bounding box that surrounds the card scanning area.</td></tr><tr><td>widgetBackgroundColor</td><td>String</td><td>Set the main background color for the widget.</td></tr></tbody></table>

### onSuccess Callback

The `onSuccess` prop allows you to execute a custom function when the card scanning process is completed successfully. This function receives the scanned card data as an argument.

#### Usage

To use the `onSuccess` prop, pass a function that receives the scanned card data:

```jsx
const handleCardScanSuccess = (cardData) => {
  console.log('Card scanned successfully:', cardData);
};

<CardScanView
  sessionToken={token}
  onSuccess={handleCardScanSuccess}
/>
```

In this example, the `handleCardScanSuccess` function logs the scanned card data to the console when the scanning process is completed successfully.

### onError Callback

The `onError` prop allows you to execute a custom function when there's a failure during the card scanning process. This function receives an error object as an argument.

#### Usage

To use the `onError` prop, pass a function that receives the error object:

```jsx
const handleCardScanError = (error) => {
  console.error('Scanning failed:', error);
};

<CardScanView
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onError={handleCardScanError}
/>
```

In this example, the `handleCardScanError` function logs the error object to the console when a scanning failure occurs.

By using the `onSuccess` and `onError` props, you can handle successful and failed scanning events, allowing you to implement custom actions or display appropriate messages to the user.

### onCancel Callback

The `onCancel` prop enables you to execute a custom function when the user cancels the card scanning process. This can be useful for tracking user behavior, navigating to a different part of the application, or displaying an appropriate message.

#### Usage

To use the `onCancel` prop, pass a function that will be executed when the user cancels the scanning process:

```jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { CardScanView } from '@cardscan.ai/insurance-cardscan-react-native';



const App = () => {
  const [showCardScanView, setShowCardScanView] = useState(true);

  return (
    <View>
      {showCardScanView && (
        <CardScanView
          sessionToken={token}
          onSuccess={cardScanSuccess}
          onError={cardScanError}
          onCancel={() => setShowCardScanView(false)}
        />
      )}
    </View>
  );
};

export default App;

```

In this example, we initialize the `showCardScanView` state variable to `true`. Then, we conditionally render the `CardScanView` component based on the value of `showCardScanView`. We then use the `onCancel` prop to set the `showCardScanView` state variable to `false` when the user cancels the scanning process.

### onRetry Callback

The `onRetry` prop allows you to execute a custom function when a retry is triggered due to a scanning failure.

#### Usage

To use the `onRetry` prop, pass a function that receives the retry event as an argument:

```jsx
const handleRetry = (event) => {
  console.log('Retry triggered:', event);
};

<CardScanView
  sessionToken={token}
  onSuccess={cardScanSuccess}
  onRetry={handleRetry}
/>
```

In this example, the `handleRetry` function logs the retry event to the console when a retry is triggered.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cardscan.ai/ui-components/react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.