Menu

React Native Integration Guide (Android)


  • Follow the steps in Part I of our General Integration Guide.
  • In android code, include files RNDyScan* provided by us. You will need to rename “package com.testingdocs;” that appears at the top of these java files. In RNDyScanModule.java, look for the api-key putExtra and add your API key there.
  • In the AndroidManifest.xml file add the following permissions:
    
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    
    
  • In the MainApplication.java file, adjust the getPackages() function to include the RNDyScanPackage()
    
    @Override
    protected List<ReactPackage/> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RNGestureHandlerPackage(),
            new RNDyScanPackage()
          );
    }
    

In React

Include the following in your App.js file (the code should be the same as iOS)


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>
    );
  }
}

Get Started