Credit Card Scanner


This library provides payment card scanning functionality for your react-native app



1. Install the library

using either Yarn:

yarn add rn-card-scanner

or npm:

npm install --save rn-card-scanner

2. Link

React Native 0.60 and above

CLI autolink feature links the module while building the app.

Note For iOS using cocoapods, run:

$ cd ios/ && pod install

React Native 0.59 and below

Run react-native link rn-card-scanner to link the rn-card-scanner library. After following the instructions for your platform to link rn-card-scanner into your project:

Manual Linking

iOS installation

iOS details

Using CocoaPods

Add the following to your Podfile and run pod install:

 pod 'RNCardScanner', :path => '../node_modules/rn-card-scanner'

Android installation

Android details

Run react-native link rn-card-scanner to link the rn-card-scanner library.


include ':reactnativecardscanner'
project(':reactnativecardscanner').projectDir = new File(rootProject.projectDir, '../node_modules/rn-card-scanner/android')


From version >= 5.0.0, you have to apply these changes:

dependencies {
+    implementation project(':reactnativecardscanner')


Migrating to AndroidX (needs version >= 5.0.0):


Then, in android/app/src/main/java/your/package/

On top, where imports are:

import com.reactnativecardscanner.CardScannerPackage;

protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new CardScannerPackage()


import CardScanner from 'rn-card-scanner';

  style={{ flex: 1 }}
  didCardScan={(response) => {
    console.log('Card info: ', response);

Run example project

Running the example project:

  1. Checkout this repository.
  2. Go to example directory and run yarn or npm i
  3. Go to example/ios and install Pods with pod install
  4. Run app
  • To run Android app: npx react-native run-android
  • To run iOS app: npx react-native run-ios

Available props

Prop Description Default Type
didCardScan This function will be called when the scan is completed and returns the CreditCard information. undefined Object
frameColor Recognizer frame color. undefined number or ColorValue
PermissionCheckingComponent Show when permission is checking. undefined ReactElement
NotAuthorizedComponent Show when permission is not authorized. undefined ReactElement
disabled Disable scanner. false boolean
  • Includes all React Native View props.


An object with the following keys:

  • cardNumber – Card number.
  • expiryMonth – Expiry month.
  • expiryYear – Expiry year.
  • holderName – Card holder name.


See the contributing guide to learn how to contribute to the repository and the development workflow.



Original SDK



View Github