Menu

React Native Integration Guide (iOS)


  • Follow the steps in Part I of our General Integration Guide.
  • Enable camera usage in info.plist
  • In Xcode, include files DyScanView.m, DyScanView.h, and DyScanView.swift (also provided by us)
  • This should prompt you to make a bridging header. Do so and include the following:
    
    #import "React/RCTBridgeModule.h"
    #import "React/RCTViewManager.h"
    #import "React/RCTEventEmitter.h"
    
  • In DyScanView.m, in line 15 change #import "TestingDocs-Swift.h" to refer to your project name. That is, if your project name is "dyneti" the line should be #import "dyneti-Swift.h". Note that if there is a dash in your project name, it will get converted to an underscore. So, if your project name is "dyneti-dyscan" the line will be #import "dyneti_dyscan-Swift.h".

In React

Include the following in your App.js file


import {requireNativeComponent} from 'react-native';

DyScanView = requireNativeComponent('DyScanView', CardScanner);


class DetailsScreen extends React.Component {
  render() {

    const { navigation } = this.props;
    const cardNumber = navigation.getParam('cardNumber', '');
    const expiryMonth = navigation.getParam('expiryMonth', '00');
    const expiryYear = navigation.getParam('expiryYear', '1900');


    return (

      // Do stuff with card number and expiration date
      
    );
  }
}

class CardScanner extends React.PureComponent {
  update = e => {
    this.props.navigation.navigate('Details', {
              cardNumber: e.nativeEvent.cardNumber,
              expiryMonth: e.nativeEvent.expiryMonth,
              expiryYear: e.nativeEvent.expiryYear,});
  }

  render() {
    return (
      <View>
       <DyScanView
          onUpdate={this.update}
          style={{flex: 1}}
        />
      </View>
    )
  }
}


CardScanner.propTypes = {
  /**
   *  Callback that is called when the current player item ends.
   */
  onEnd: PropTypes.func,
}

The CardScanner class can then be used to show DyScan to your users

Get Started