# 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="../authentication">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](https://docs.cardscan.ai/ui-components/customization "mention")

{% 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.