React Native Integration Guide

Importing DyScan
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 
Linking for Android
At this point, if you are using a React Native version that is 0.60 or higher Android should be usable.
DyScan is only supported for API 21+. If your minSDK is lower, you may get a build error. This can be changed by editing the build.gradle file in the android directory.
For lower versions, you will need to manually link the dependencies. Change MainActivity.java at android/app/src/main/java/com/ProjectName/ to match the following.
package com.reactnavigation.example;
​
import com.facebook.CallbackManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactPackage;
import com.dyneti.dyscan.reactnative.RNDyScanPackage;
​
public class MainApplication extends Application implements ReactApplication {
 
    private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
 
    protected static CallbackManager getCallbackManager() {
        return mCallbackManager;
    }
 
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
 
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(new RNDyScanPackage());
        }
 
        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };
 
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
 
    @Override
    public void onCreate() {
        super.onCreate();
        AppEventsLogger.activateApp(this);
        SoLoader.init(this, /* native exopackage */ false);
    }
}
Linking for iOS
Copy this podspec to your local machine. Then add the following line(s) to the Podfile in the ios directory. If you are unsure what Swift version you are using, use 5.0 and make sure you are using the latest (non-beta) version of Xcode.
If you do not have a Podfile in your ios directory, you will need to generate one. Follow the instructions here to do so. Make sure to remove the use_frameworks! line in the generated Podfile. If the generated Podfile contains two targets for ProjectName-tvOSTests,you should remove the first target.
RN 0.60 or higher, Swift 5.0
RN 0.60 or higher, Swift 4.2
RN 0.59 or lower, Swift 5.0
RN 0.59 or lower, Swift 4.2
pod 'DyScan/5.0', :podspec => '/path/to/file/DyScan.podspec' 
pod 'DyScan/4.2', :podspec => '/path/to/file/DyScan.podspec'
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
s.dependency "DyScan/4.2", '~> 0.8.11'
pod 'RNDyScan', :path => '../node_modules/@dyneti/react-native-dyscan'
pod 'DyScan/5.0', :podspec => '/path/to/file/DyScan.podspec'
Make sure that your Podfile contains all the dependencies here.
pod 'RNDyScan', :path => '../node_modules/@dyneti/react-native-dyscan'
pod 'DyScan/4.2', :podspec => '/path/to/file/DyScan.podspec'
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
  s.dependency "DyScan/4.2", '~> 0.8.11'
Make sure that your Podfile contains all the dependencies here.
In the ios directory, execute in terminal
$ pod install
If 2FA is set up on your GitHub 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.
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).
If you are getting an error like "DyScan/DyScan.h not found," you will need to remove DyScan as a library dependency. In the Xcode file tree, ctrl+click on RNDyScan.xcodeproj under Libraries to delete it. Xcode should prompt you to delete or remove the reference. Choose to remove the reference.
If you are getting an error like "Undefined symbols for architecture i386" when trying to run on simulator, you will need to build for the active architecture only. Do this by clicking on your project name next to a blue icon in the navigation bar on the top left of Xcode. Click on "Build Settings" and search for "Build Active Architecture Only." Set the value of this field from "No" to "Yes" and the app should now run.
If the app is compiling but you are getting an error when you try to initialize DyScan that says "undefined is not an object (evaluating 'RNDyScanModule.scanCard')," then you will need to add the DyScan iOS node module directory as a header search path. To do this, click on your project name next to a blue icon in the navigation bar on the top left of Xcode. In the middle of the screen, select "Build Settings" and search for "Header Search Paths" in the search bar. Add 
$(SRCROOT)/../node_modules/@dyneti/react-native-dyscan/ios to the search paths.
If you are getting an error like "dyld: Library not loaded: @rpath/libswift*.dylib," then you will need to force Xcode to embed Swift libraries. Do this by clicking on your project name next to a blue icon in the navigation bar on the top left of Xcode. Click on "Build Settings" and search for "Always Embed Swift Standard Libraries." Set the value of this field from "No" to "Yes" and the app should now run.
Interfacing DyScan
DyScanModule
The DyScanModule abstracts the DyScanViewController on iOS and the DyScanActivity on Android. It will open a separate screen where the user will scan their card and return a JavaScript Promise. 
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 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>
    );
  }
}
Android Integration Guide
Next - Migrating from card.io
Migrating from card.io (iOS)
Last updated Wed Aug 21 2019 17:48:51 GMT+0000 (UTC)