---
Source: https://docs.microblink.com/blinkcard/quickstart-react-native
Title: Quickstart (React Native)
Description: Step-by-step guide to integrate BlinkCard React Native SDK for credit card scanning in React Native applications
---

# Quickstart (React Native)

## Prerequisites

- License key: Get a trial or production key from the [Microblink Developer Hub](https://developer.microblink.com).
  Keys are bound to Android's Application ID, and iOS's Bundle Identifier.

### React Native requirements
- **React Native**: 0.68 and newer

**Note:** The BlinkCard React Native SDK support both the legacy and (Native module) the new (Turbo module) architecture.

### iOS requirements
- **iOS version**: 16.0 and newer

### Android requirements
  - **Minimum SDK**: Android 7.0 (API 24)
  - **Kotlin version**: 2.1.20
  - **Android Gradle Plugin**: Requires AGP 8.0+

## Fast track: try the example app

Before you start, make sure you have Node & Watchman installed before running the example application:

```bash
# install Watcman
brew install watchman

# install Node
brew install node
```

You can try the SDK by cloning the [blinkcard-react-native](https://github.com/BlinkCard/blinkcard-react-native) repository and running the BlinkCard example app.

From the repo root, execute the example app script:
```bash
git clone https://github.com/BlinkCard/blinkcard-react-native.git
cd blinkcard-react-native
./initBlinkCardReactNativeSample.sh
```

After the script has finished executing, go to the `BlinkCardSample` folder. 

### Running the application on Android
Run the following command to run the application on Android:

```bash
npx react-native run-android
```
**Note**: the plugin can be run directly via Android Studio as well:

1. Execute the following command:
```bash
npx react-native start
```
2. Open the `android` folder via Android Studio in the `BlinkCardSample` folder to run the Android sample application.

### Running the sample application on iOS

1. For running the sample application on iOS, execute the following command:
```bash
npx react-native start
```
2. Open the `BlinkCardSample.xcworkspace` located in the `ios` folder
3. Set your development team
4. Press run

### Example application use-cases
The example application demonstrates how the BlinkCard plugin is implemented, used and shows how to obtain the scanned results. It contains the implementation for:

- The default implementation with the **default BlinkCard UX** scanning experience.
- **Multiside DirectAPI scanning** - extracting the document information from multiple static images (from the gallery).
- **Singleside DirectAPI scanning** - extracting the document information from a single static images (from the gallery).

## Install the SDK

1. To add the BlinkCard plugin to a React Native project, first create empty project if needed:
```bash
npx @react-native-community/cli init YourAppName --package-name YourPackageName --title YourAppTitle --version "React Native version"
```

2. Install the `@microblink/blinkcard-react-native` dependency:
```bash
  npm install @microblink/blinkcard-react-native
```

## Initialize and scan

### Import and create

1. Import the neccessary methods from the SDK:
```typescript
  import { performScan } from '@microblink/blinkcard-react-native';
```

2. Add the license keys:
```typescript
/**
* Set your license key, depending on the platform
*/
const blinkCardLicenseKey = Platform.select({
ios: 'your-ios-license-key',
android: 'your-android-license-key',
});
```

**You can get the license key on our [Developer Hub](https://developer.microblink.com) account.**

3. Pass the neccessary SDK settings:
```typescript
const sdkSettings = new BlinkCardSdkSettings({
    licenseKey: blinkCardLicenseKey
});
sdkSettings.downloadResources = true;

/**
* Create and modify the Session Settings
*/
const sessionSettings = new BlinkCardSessionSettings();

/**
* Create and modify the scanning settings
*/
const scanningSettings = new ScanningSettings();
scanningSettings.skipImagesWithBlur = true;
scanningSettings.tiltDetectionLevel = DetectionLevel.Mid;

/**
* Create and modify the liveness settings
*/
const livenessSettings = new LivenessSettings();
livenessSettings.enableCardHelpInHandCheck = true;
livenessSettings.photocopyCheckStrictnessLevel = StrictnessLevel.Level5;

/**
* Create and modify the extraction settings
*/
const extractionSettings = new ExtractionSettings();
extractionSettings.extractCardholderName = true;
extractionSettings.extractCvv = true;
extractionSettings.extractInvalidCardNumber = false;

/**
* Create and modify the anonymization settings
*/
const anonymizationSettings = new AnonymizationSettings();
anonymizationSettings.cardholderNameAnonymizationMode = AnonymizationMode.ImageOnly;
anonymizationSettings.cvvAnonymizationMode = AnonymizationMode.FullResult;
anonymizationSettings.cardNumberAnonymizationSettings =
    new CardNumberAnonymizationSettings({
        prefixDigitsVisible: 1,
        suffixDigitsVisible: 2,
    });

/**
* Create and modify the cropped image settings
*/
const croppedImageSettings = new CroppedImageSettings();
croppedImageSettings.returnCardImage = true;

/**
* Place the above defined settings in the Scanning settings
*/
scanningSettings.extractionSettings = extractionSettings;
scanningSettings.livenessSettings = livenessSettings;
scanningSettings.anonymizationSettings = anonymizationSettings;
scanningSettings.croppedImageSettings = croppedImageSettings;

/**
* Place the Scanning settings in the Session settings
*/
sessionSettings.scanningSettings = scanningSettings;

/**
* Create and modify the UX settings
* This paramater is optional
*/
const scanningUxSettings = new ScanningUxSettings();
scanningUxSettings.showHelpButton = true;
scanningUxSettings.showIntroductionAlert = false;
scanningUxSettings.preferredCameraPosition = CameraPosition.Back;
scanningUxSettings.allowHapticFeedback = true;
```

4. Call the appropriate scanning method (with the default UX, or DirectAPI for static images), handle the results and catch any errors:
```typescript
/**
 * Call the performScan method, where the SDK and session 
 * settings need to be passed
 * Here, you can also pass the optional ScanningUX object from step 3.
 */ 
const blinkCardResult = await performScan(
    sdkSettings,
    sessionSettings,
    scanningUxSettings,
);

console.log(`${blinkCardResult?.cardholderName}`)
```

### DirectAPI implementation

For the DirectAPI (static image upload) implementation, see the example application [here](https://github.com/blinkcard/blinkcard-react-native/blob/main/sample_files/App.tsx#L160).

## Additional documentation
- Additional documentation for BlinkCard React Native can be found in the README file on the official GitHub repository [here](https://github.com/blinkcard/blinkcard-react-native/blob/main/README.md).


Last updated on Apr 16, 2026