Menu

React Native Integration Guide


Getting Started

After getting access to Dyneti's private npm repo, install DyScan with the following terminal commands:

$ npm install @dyneti/react-native-dyscan --save
$ react-native link
$ react-native link @dyneti/react-native-dyscan


At this point, Android should be usable, but iOS will require a few more steps. Copy this podspec to your local machine. Then add the following line to the Podfile in the ios directory, replacing X.X with the Swift version you are using. If you do not know what Swift version you are using, replace X.X with 5.0 and make sure you are using the latest (non-beta) version of Xcode.

pod 'DyScan/X.X', :podspec => '/path/to/file/DyScan.podspec'


In the ios directory, execute in terminal

$ pod install


Note, if 2FA is set up on your GithHub account, this step may fail. To rectify this, you will need to generate a personal access token in Github. This can be done by logging into Github and following the directions by navigating to Settings > Developer settings > Personal access tokens.

Open up ProjectName.xcworkspace in the ios directory in Xcode. On the left-hand side, you should see a folder with your project name, with files such as main.jsbundle and AppDelegate.h. Control-click or use File > New to add a new file to this folder. In the dialog box that pops up choose "Swift file," and give it a name link Blank.swift. Even though the file will be empty, this file ensures that Xcode will compile Swift. Adding this file should prompt you to make a bridging header, and you should do so. The bridging header is also empty but ensures that Xcode compiles everything properly.

If you have not previously asked for camera permissions in the app, you will need to add the “NSCameraUsageDescription” (Privacy - Camera Usage Description) to your Info.plist file. To do this in Xcode, navigate to Info.plist. When you hover over any of the fields in the file, a small plus icon should show up next to the field. Click on the plus sign and type in “NSCameraUsageDescription” into the new field. You should set the value to be the string a user sees when they are prompted for the camera permission (e.g. To scan credit cards).

Usage

DyScanModule


This module abstracts the DyScanViewController on iOS and the DyScanActivity on Android.


import React, { Component } from 'react';
import { View, TouchableOpacity, Text, Platform } from 'react-native';
import { DyScanModule } from '@dyneti/react-native-dyscan';

export default class DyScanExample extends Component {

  scanCard() {
    DyScanModule
      .scanCard({'apiKey':'YOUR_API_KEY'})
      .then(card => {
        // the scanned card
      })
      .catch(() => {
        // the user cancelled
      })
  }

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

DyScanView


This component is iOS-only as the DyScan Android SDK does not offer this functionality.


import React, { Component } from 'react';
import { View } from 'react-native';
import { DyScanView } from '@dyneti/react-native-dyscan';

export default class DyScanExample extends Component {

  didScanCard = (card) => {
    // the scanned card
  }

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

Get Started