React Native component for

Usage no npm install needed!

<script type="module">
  import reactNativeCardIo from '';

README component for React Native

A fully featured implementation of for iOS and Android.

Screenshot of in action

Installation iOS

  1. Run npm install react-native-card-io --save in your project directory.
  2. Open your project in XCode (make sure to open .xcworkspace NOT .xcproject), right click on Libraries and click Add Files to "Your Project Name".
  3. Within node_modules, find react-native-card-io/ios and add RCTCardIO.xcodeproj to your project.
  4. Add libRCTCardIO.a to Build Phases -> Link Binary With Libraries.
  5. Add the -lc++ flag to Build Settings -> Other Linker Flags.

Installation Android

TODO: Currently building a react-native app for iOS and Android, so this will be done soon :)


import {CardIOView, CardIOUtilities} from 'react-native-card-io'


componentDidMount() {
  // The preload method prepares to launch faster. Calling preload is optional but suggested.
  // On an iPhone 5S, for example, preloading makes launch ~400ms faster.
  // The best time to call preload is when displaying a view from which might be launched;
  // e.g., inside your view controller's componentDidMount method.
  // preload works in the background; the call to preload returns immediately.

render() {
  if (CardIOUtilities.canReadCardWithCamera) {
    return (
          scanInstructions={'Hold card here. It will scan automatically.'}
          didScanCard={result => console.log(result)} />      
  return (
    <View style={styles.noCamera}>
      <Text> requires a camera</Text>



See card_io_view.js for all React.PropTypes. All props are optional and the view can be used with simply:

<CardIOView style={{flex: 1}} />


The didScanCard function returns the following object:

  cardNumber: string,
  redactedCardNumber: string,
  expiryMonth: number, // January == 1
  expiryYear: number,
  cvv: string,
  postalCode: string,
  scanned: boolean,
  cardImage: string, // base64
  cardType: string,
  logoForCardType: string, // base64

To display the images returned by didScanCard use the following:

<Image source={{uri: 'data:image/png;base64,'+ cardImage, isStatic: true}} />


  • Android implementation
  • implement CardIOPaymentViewController
  • add rotation notifications

Secure does not store or transmit credit card numbers. Recommend using the Privacy Snapshot react-native component if using with iOS to blur the screen when the app is backgrounded.