react-native-card-recognizer

A user-friendly yet highly customizable tool that lets you capture card details using the device camera, eliminating the need to manually enter long card numbers and other information.

It opens a native scanner screen, reads the text from the card, and returns a clean, predictable result for your React Native code.

Behind the scenes:

• Android uses the Lens24 scanner UI.
• iOS uses Apple Vision OCR to recognize text from the camera feed.

Installation

npm i react-native-card-recognizer
cd ios && pod install && cd ..

Requirements:

• React Native >= 0.60
• iOS deployment target >= 15.1
• Android minSdkVersion >= 21

react-native-permissions configuration

This library requests camera permission using react-native-permissions.

react-native-permissions is included as a dependency of this package, but you still need to do the native setup below (especially on iOS). If you already use react-native-permissions directly in your app, keep your existing setup.

How permission is handled:

• The library calls request(PERMISSIONS.*.CAMERA) before opening the scanner.
• If the user denies permission, it shows an alert and can take the user to device settings.

Please refer react-native-permissions for installation and uses.

Need to declare Camera Permission on Android and iOS native side

Android (android/app/src/main/AndroidManifest.xml)

This library declares camera permission in its own manifest and it should be merged into your app automatically. If your setup disables manifest merging or you want to be explicit, ensure your app has:

<uses-permission android:name="android.permission.CAMERA" />

iOS (ios/<YourApp>/Info.plist)

Apple requires a user-facing reason string for camera usage. Add:

<key>NSCameraUsageDescription</key>
<string>We need camera access to scan your payment card.</string>

Uses

Basic

import { scanPaymentCard } from 'react-native-card-recognizer';

try {
  const card = await scanPaymentCard();
} catch (e) {
  console.log('Scan failed:', e?.code, e?.message);
}

With permission-denied dialog customization

const card = await scanPaymentCard({
  permission: {
    title: 'Camera Permission',
    description: 'We need camera access to scan your payment card.',
  },
});

With scanner UI text customization

const card = await scanPaymentCard({
  // Shorthand (cross-platform):
  cardFrameColor: '#0A84FF',
  scannerText: {
    android: {
      hint: 'Align your card inside the frame',
      toolbarTitle: 'Scan card',
    },
    ios: {
      hint: 'Align your card inside the frame',
      statusLookingForCardNumber: 'Looking for card number…',
      statusReadingHoldSteady: 'Reading… hold steady (verifying number)',
      statusNumberFoundLookingForExpiry: 'Number found. Looking for expiry…',
      cancel: 'Cancel',
      done: 'Done',
      torch: 'Torch',
    },
  },
});

Customisation

scanPaymentCard(options?)

Pass an optional object to customize the permission dialog copy and/or the native scanner UI strings.

| Option | Default | Description | |---|---|---| | permission | { title: Camera Permission; description: This app would like to access your camera to scan a payment card. } | Text used for the alert shown when camera permission is denied. | cardFrameColor | (platform default) | Shorthand for scannerText.cardFrameColor. |

Scanner Text

Android & iOS

| Key | Default | Description | |---|---|---| | hint | Align your card inside the frame | Hint text shown on the scanner screen. | | cardFrameColor | (platform default) | Cross-platform shortcut for frame/accent color. |

Android

| Key | Default | Description | |---|---|---| | toolbarTitle | Scan card | Android Header title. | | manualInputButtonText | (hidden) | Shows the “Add manually” button. | | cardFrameColor | (green) | Android scanner accent color (card frame + “Add manually” button text). Hex like #RRGGBB / #AARRGGBB, or @color/.... |

iOS

| Key | Default | Description | |---|---|---| | hint | Align your card inside the frame | Hint text shown on the scanner screen. | | cardFrameColor | (white) | iOS card frame color (hex like #RRGGBB / #AARRGGBB). | | statusLookingForCardNumber | Looking for card number… | Status while searching for card number. | | statusReadingHoldSteady | Reading… hold steady (verifying number) | Status while reading/validating. | | statusNumberFoundLookingForExpiry | Number found. Looking for expiry… | Status after number found. | | cancel | Cancel | Cancel button label. | | done | Done | Done button label. | | torch | Torch | Torch button label. |

Response

scanPaymentCard() resolves to:

type ScanPaymentCardResult = {
  cardNumber: string;
  cardHolderName: string;
  expirationDate: string;
};

Conclusion

• cardNumber: only numbers (spaces/dashes removed) and validated, so it’s safer to use in your checkout flow.
• cardHolderName: best-effort name; some cards may not have a readable name, so it can be an empty string.
• expirationDate: best-effort parsing; if it can’t be confidently normalized, the raw value may be returned.