React Native Integration Guide

Importing DyScan
After getting the access token for Dyneti's NPM repo access, go to your RN project root directory and set it up with the following terminal commands. 
If you are using ~/.zshrc:
1
echo "export DYSCAN_NPM_TOKEN=accessTokenHere" >> ~/.zshrc
2
source ~/.zshrc
3
echo "@dyneti:registry=https://registry.npmjs.org/" >> .npmrc
4
echo "//registry.npmjs.org/:_authToken=\${DYSCAN_NPM_TOKEN}" >> .npmrc
Copied!
If you are using ~/.bash_profile: 
1
echo "export DYSCAN_NPM_TOKEN=accessTokenHere" >> ~/.bash_profile
2
source ~/.bash_profile
3
echo "@dyneti:registry=https://registry.npmjs.org/" >> .npmrc
4
echo "//registry.npmjs.org/:_authToken=\${DYSCAN_NPM_TOKEN}" >> .npmrc
Copied!
Verify if the terminal can see the value of DYSCAN_NPM_TOKEN
1
echo $DYSCAN_NPM_TOKEN
Copied!
Install DyScan with the following terminal commands
1
npm install @dyneti/react-native-dyscan --save 
2
react-native link 
3
react-native link @dyneti/react-native-dyscan 
Copied!
Linking for Android
For version 1.1.15 and up: In the android-directory-level build.gradle add the Dyneti Maven repository (credentials provided during integration):
1
allprojects {
2
    repositories {
3
        // Other repositories are here
4
        maven {
5
            credentials  {
6
                username = "nexusUsername"
7
                password = "nexusPassword"
8
            }
9
            url "https://nexus.dyneti.com/repository/maven-releases/"
10
            authentication {
11
                basic(BasicAuthentication)
12
            }
13
        }
14
    }
15
}
Copied!
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.
1
package com.reactnavigation.example;
2
​
3
import com.facebook.CallbackManager;
4
import com.facebook.react.ReactNativeHost;
5
import com.facebook.react.ReactApplication;
6
import com.facebook.react.ReactPackage;
7
import com.dyneti.dyscan.reactnative.RNDyScanPackage;
8
​
9
public class MainApplication extends Application implements ReactApplication {
10
 
11
    private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
12
 
13
    protected static CallbackManager getCallbackManager() {
14
        return mCallbackManager;
15
    }
16
 
17
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
18
        @Override
19
        public boolean getUseDeveloperSupport() {
20
            return BuildConfig.DEBUG;
21
        }
22
 
23
        @Override
24
        protected List<ReactPackage> getPackages() {
25
            return Arrays.<ReactPackage>asList(new RNDyScanPackage());
26
        }
27
 
28
        @Override
29
        protected String getJSMainModuleName() {
30
            return "index";
31
        }
32
    };
33
 
34
    @Override
35
    public ReactNativeHost getReactNativeHost() {
36
        return mReactNativeHost;
37
    }
38
 
39
    @Override
40
    public void onCreate() {
41
        super.onCreate();
42
        AppEventsLogger.activateApp(this);
43
        SoLoader.init(this, /* native exopackage */ false);
44
    }
45
}
Copied!
If you are getting an error during building of the APK like:
Execution failed for task ':@dyneti_react-native-dyscan:bundleDebugAar'.
Direct local .aar file dependencies are not supported when building an AAR. The resulting AAR would be broken because the classes and Android resources from any local .aar file dependencies would not be packaged in the resulting AAR. Previous versions of the Android Gradle Plugin produce broken AARs in this case too (despite not throwing this error)."
Run one of these commands in terminal in the android subdirectory of your React Native project to build an APK:
for debug: ./gradlew app:assembleDebug
for release: ./gradlew app:assembleRelease
Linking for iOS
Add the following line(s) to the Podfile in the ios directory. If you are unsure what Swift version you are using, use Universal variant 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, Universal
RN 0.60 or higher, Swift 5.1
RN 0.60 or higher, Swift 5.0
RN 0.60 or higher, Swift 4.2
RN 0.59 or lower, Swift 5.1
RN 0.59 or lower, Swift 5.0
RN 0.59 or lower, Swift 4.2
1
pod 'DyScan', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
1
pod 'DyScan/5.1', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
1
s.dependency "DyScan/5.1", '~> 1.1.1'
Copied!
1
pod 'DyScan/5.0', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
1
s.dependency "DyScan/5.0", '~> 1.1.1'
Copied!
1
pod 'DyScan/4.2', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
1
s.dependency "DyScan/4.2", '~> 0.8.12'
Copied!
1
pod 'RNDyScan', :path => '../node_modules/@dyneti/react-native-dyscan'
2
pod 'DyScan/5.1', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
1
s.dependency "DyScan/5.1", '~> 1.1.1'
Copied!
Make sure that your Podfile contains all the dependencies here.
1
pod 'RNDyScan', :path => '../node_modules/@dyneti/react-native-dyscan'
2
pod 'DyScan/5.0', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
1
  s.dependency "DyScan/5.0", '~> 1.1.1'
Copied!
Make sure that your Podfile contains all the dependencies here.
1
pod 'RNDyScan', :path => '../node_modules/@dyneti/react-native-dyscan'
2
pod 'DyScan/4.2', :podspec => '../node_modules/@dyneti/react-native-dyscan/specs/DyScan.podspec'
Copied!
In node_modules/@dyneti/react-native-dyscan/RNDyScan.podspec change the DyScan dependency to
1
  s.dependency "DyScan/4.2", '~> 0.8.12'
Copied!
Make sure that your Podfile contains all the dependencies here.
If your linking does not work for some reason (most common if you've added React Native to a native project), you may have to add a pod for RNDyScan which points to the RNDyScan.podspec included in the npm package
In the ios directory, execute in terminal
1
$ pod install
Copied!
When asked for a password for user "dyscan", paste the GitHub access token that we provided during integration.
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
Initializing DyScan (only for version 1.1.1 and up)
In your App.js  add the following line to configure DyScan.
1
import React from 'react';
2
import {DyScan} from '@dyneti/react-native-dyscan';
3
​
4
const App: () => React$Node = () => {
5
​
6
  DyScan.init({
7
    apiKey: 'YOUR_API_KEY',
8
  });
9
​
10
  // some code here
11
};
12
​
13
export default App;
Copied!
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. 
1
import React, { Component } from 'react';
2
import { View, TouchableOpacity, Text, Platform } from 'react-native';
3
import { DyScanModule } from '@dyneti/react-native-dyscan';
4
​
5
export default class DyScanExample extends Component {
6
​
7
  scanCard() {
8
    DyScanModule
9
      .scanCard({
10
        apiKey:'YOUR_API_KEY' // for version lower than 1.1.1
11
      })
12
      .then(card => {
13
        // the scanned card
14
        // Access the fields cardNumber, expiryMonth, or expiryYear
15
      })
16
      .catch(() => {
17
        // the user cancelled
18
      })
19
  }
20
​
21
  render() {
22
    return (
23
      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
24
        <TouchableOpacity onPress={this.scanCard.bind(this)}>
25
          <Text>Scan card!</Text>
26
        </TouchableOpacity>
27
      </View>
28
    );
29
  }
30
}
Copied!
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.
1
import React, { Component } from 'react';
2
import { View } from 'react-native';
3
import { DyScanView } from '@dyneti/react-native-dyscan';
4
​
5
export default class DyScanExample extends Component {
6
​
7
  onCardScanned = (card) => {
8
    // the scanned card (can be null)
9
    // Access the fields cardNumber, expiryMonth, or expiryYear
10
  }
11
​
12
  render() {
13
    return (
14
      <View>
15
        <DyScanView
16
          onCardScanned={this.onCardScanned}
17
          apiKey={'YOUR_API_KEY'} // for version lower than 1.1.1
18
        />
19
      </View>
20
    );
21
  }
22
}
Copied!
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. 
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. If set to false, torch toggle button will appear.
boolean
vibrateOnCompletion
Whether the device will vibrate once it has successfully extracted the credit card data from the images provided by the camera.
boolean
showDynetiLogo
Whether to show the Dyneti logo above the scan region
boolean
showCardOverlay
Whether to show the overlay displaying a sample card number and expiration date hinting at the user to place their card in the scan region.
boolean
DyScanModule
Prop
Description
Type
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*​
helperTextSize
The font size of the helper text.
number
helperTextFontFamily
The font family name of the helper text. The font needs to be placed in assets first.
string
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
iosHelperTextPosition
The preset position of the helper text. Available values: top, center, bottom. Default: bottom
string
DyScanView
Prop
Description
Type
onCardScanned
A callback for receiving results from the scanning process. card will be undefined on failure.
(card: CreditCard) => void
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
Cordova Integration Guide
Last modified 1mo ago
Copy link
Contents
Initializing DyScan (only for version 1.1.1 and up)