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 19+. 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, or if other dependencies are manually linked, you may 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 5.1
RN 0.60 or higher, Swift 4.2
RN 0.59 or lower, Swift 5.0
RN 0.59 or lower, Swift 5.1
RN 0.59 or lower, Swift 4.2
pod 'DyScan/5.0', :podspec => '/path/to/file/DyScan.podspec' 
pod 'DyScan/5.1', :podspec => '/path/to/file/DyScan.podspec'
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
s.dependency "DyScan/5.1", '~> 0.8.12'
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.12'
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/5.1', :podspec => '/path/to/file/DyScan.podspec'
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
  s.dependency "DyScan/5.1", '~> 0.8.12'
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.12'
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 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
        // Access the fields cardNumber, expiryMonth, or expiryYear
      })
      .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>
    );
  }
}
If you have been migrating from native Android to using React Native (or otherwise created a custom Activity to contain your react screens), you must be sure that you are passing calls to onActivityResult on to the ReactInstanceManager; otherwise neither callback will be called. For more details on how to do this, see the React Native documentation.
DyScanView
This component allows the scanning view to be placed on a screen with other components. You must be sure that the view gets unmounted when it is no longer needed.
import React, { Component } from 'react';
import { View } from 'react-native';
import { DyScanView } from '@dyneti/react-native-dyscan';
​
export default class DyScanExample extends Component {
​
  onCardScanned = (card) => {
    // the scanned card (can be null)
    // Access the fields cardNumber, expiryMonth, or expiryYear
  }
​
  render() {
    return (
      <View>
        <DyScanView
          onCardScanned={this.onCardScanned}
          apiKey={'YOUR_API_KEY'}
        />
      </View>
    );
  }
}
When you are using the View, we cannot determine for ourselves whether our View is still needed at any given point in time. You should ensure that the View gets unmounted when it is no longer needed since otherwise our code will continue to run in the background, wasting your users' resources. For example, with react-native-navigation, if in onCardScanned you immediately navigate to a results screen, the screen containing our view will be persisted on the stack and so will not be unmounted. In order to ensure it is unmounted, you should make a call to navigation.goBack() prior to making the call to navigation.navigate().
Customization
Both the module and the view support customization. For the module, you pass the parameters into the scanCard function along with the API key; for the view, you supply them as props on the view. The set of props supported by the view is a strict superset of the parameters supported by the module.
Supported by both
Parameter
Description
Type
apiKey
The API key we provided for you to use.
string
showCorners
Whether to show the scan area outline.
boolean
cornerThickness
How thick to make the lines outlining the scan area, indicating to the user where to place their credit card.
number
cornerInactiveColor
The color to use in drawing the outline of the scan region when nothing of interest is detected.
​color*​
cornerCompletedColor
The color to use in drawing the outline of the scan region when we have successfully scanned a card.
​color*​
bgColor
The color to use to obscure everything outside the scan region in order to draw the user’s attention to the scan region.
​color*​
bgOpacity
The opacity to use when obscuring everything outside the scan region, as an integer ranging from 0.0 (transparent) to 1.0 (opaque).
number
lightTorchWhenDark
Whether the phone will turn on the flashlight if multiple frames have appeared to be too dark.
boolean
vibrateOnCompletion
Whether the device will vibrate once it has successfully extracted the credit card data from the images provided by the camera.
boolean
DyScanView
Prop
Description
Type
onCardScanned
A callback for receiving results from the scanning process. card will be undefined on failure.
(card: CreditCard) => void
showHelperText
Whether to show the helper text on screen.
boolean
helperTextString
What to text to display to the user to guide them in scanning their card.
string
helperTextColor
The color to use to display the helper text.
​color*​
showRotateButton
Whether to show the button which allows the user to rotate the scan region by 90 degrees, facilitating the scanning of vertical cards.
boolean
Color Representation
Colors are inputted as hex-encoded strings representing the RGB values with a '#' at the front, the so-called 'HTML Color Codes.' For example, #ff0000 is red. The representation must be exactly 7 characters long; otherwise we will ignore it when trying to convert the strings to the native representations.
TypeScript
We also provide TypeScript bindings in our package. If you use TypeScript no additional steps will be required to start using the types we provide. 

Android Integration Guide

Next - Migrating from card.io

Migrating from card.io (iOS)

Last updated 1 month ago

Prop	Description	Type
`onCardScanned`	A callback for receiving results from the scanning process. `card` will be undefined on failure.	`(card: CreditCard) => void`
`showHelperText`	Whether to show the helper text on screen.	`boolean`
`helperTextString`	What to text to display to the user to guide them in scanning their card.	`string`
`helperTextColor`	The color to use to display the helper text.	color*
`showRotateButton`	Whether to show the button which allows the user to rotate the scan region by 90 degrees, facilitating the scanning of vertical cards.	`boolean`

Parameter	Description	Type
`apiKey`	The API key we provided for you to use.	`string`
`showCorners`	Whether to show the scan area outline.	`boolean`
`cornerThickness`	How thick to make the lines outlining the scan area, indicating to the user where to place their credit card.	`number`
`cornerInactiveColor`	The color to use in drawing the outline of the scan region when nothing of interest is detected.	color*
`cornerCompletedColor`	The color to use in drawing the outline of the scan region when we have successfully scanned a card.	color*
`bgColor`	The color to use to obscure everything outside the scan region in order to draw the user’s attention to the scan region.	color*
`bgOpacity`	The opacity to use when obscuring everything outside the scan region, as an integer ranging from 0.0 (transparent) to 1.0 (opaque).	`number`
`lightTorchWhenDark`	Whether the phone will turn on the flashlight if multiple frames have appeared to be too dark.	`boolean`
`vibrateOnCompletion`	Whether the device will vibrate once it has successfully extracted the credit card data from the images provided by the camera.	`boolean`