Menu

React Native Integration Guide (iOS)


  • Follow the steps in Part I of our General Integration Guide.
  • Enable camera usage in info.plist
  • In Xcode, include all the RCTDyScan* files provided by us
  • This should prompt you to make a bridging header. Do so and include the following:
    
    #import "React/RCTBridgeModule.h"
    #import "React/RCTViewManager.h"
    #import "React/RCTEventEmitter.h"
    #import "React/RCTView.h"
    #import "React/RCTBridge.h"
    
  • In RCTDyScanModule.m and RCTDyScanView.h, change #import "TestingDocs-Swift.h" to refer to your project name. That is, if your project name is "dyneti" the line should be #import "dyneti-Swift.h". Note that if there is a dash in your project name, it will get converted to an underscore. So, if your project name is "dyneti-dyscan" the line will be #import "dyneti_dyscan-Swift.h".

In React

There are two ways to interface with DyScan on iOS. If the RCTDyScanModule is used, the same code can be used for both iOS and android. However, the RCTDyScanView allows for more management of the scanning interface.

To use the module, include the following in your App.js file.


import { NativeModules } from 'react-native';

const DyScanModule = NativeModules.DyScanModule

const DyScanJSModule = {
  scanCard(config = {}) {
    return DyScanModule.scanCard(config)
  },
}

class ScanScreen extends React.Component {

  scanCard() {
    DyScanJSModule
      .scanCard()
      .then(card => {
          // Take actions when card is read, fields are stored in card.cardNumber,
          // card.expiryMonth, and card.expiryYear
      })
      .catch(() => {
          // Take actions when card is not read
      })
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={this.scanCard.bind(this)}>
          <Text>Scan card!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

To use the view, include the following in your App.js file.


import { requireNativeComponent, NativeAppEventEmitter } from 'react-native';

const RCTDyScanView = requireNativeComponent('RCTDyScanView')

class DyScanView extends Component {

  componentWillMount() {
    const { didScanCard } = this.props
    this.listener = NativeAppEventEmitter.addListener(
      'didScanCard',
      didScanCard,
    )
  }

  componentWillUnmount() {
    if (this.listener) {
      this.listener.remove()
    }
  }

  render() {
    return <RCTDyScanView style={{width: 200, height: 200}}/>
  }
}

export class DyScanExample extends React.Component {

  didScanCard = (card) => {
          // Take actions when card is read, fields are stored in card.cardNumber,
          // card.expiryMonth, and card.expiryYear
  }

  render() {
    return (
        <DyScanView
          didScanCard={this.didScanCard}
          style={{ flex: 1 }}
        />
    );
  }
}

The CardScanner class can then be used to show DyScan to your users

Get Started