Integrating with your React Native App

The following documentation uses a project initialized with NPX. The React Native version used at the time of documentation was 0.62.0-rc.5.

React Project

You'll need to include the NativeModules library from react-native in the App.js file in your React Native project's root folder. The code below creates a button that triggers communication and starts the embed.

import React, {Component} from 'react';

import {
    View,
    Text,
    Button,
    NativeModules
} from 'react-native';

export default class App extends Component {

    render(){
        return(
            <View>
            <Button style={} onPress={
                () => { NativeModules.ZapparModule.startZappar(optionStr);
                }
            } title="Start Zappar!"></Button>
            </View>
        );
    }
}


Android

  1. The Android app embed download is a zip file that contains:

zappar-release.aar. This is the main library we will be adding into our project. ZapparEmbedTest. An example Android Studio project that demonstrates the integration.

Unzip the contents into a folder of your choice.

  1. Your project's main app module should have a libs folder, copy the zappar-release.aar file into this folder.

  1. In Android Studio, you'll need to add the Zappar component as a dependency of your app's module. Open your app module's build.gradle file from the project navigator. Add the following code before the dependencies section in the build.gradle file.

If a dependencies section isn't displayed, make sure that you're in your app module's build.gradle file rather than that of your entire project.

repositories {
    flatDir {
        dirs 'libs'
    }
}
  1. Add a new instance of the ZapparPackage class into the packages list within the existing MainApplication class. This class will be located at the following path:
<project root> ⁩ ▸ ⁨android⁩ ▸ ⁨app⁩ ▸ ⁨src⁩ ▸ ⁨main⁩ ▸ ⁨java⁩ ▸ ⁨com⁩ ▸ 
@Override
protected List<ReactPackage> getPackages() {
 @SuppressWarnings("UnnecessaryLocalVariable")
 List<ReactPackage> packages = new PackageList(this).getPackages();
   packages.add(new ZapparPackage()); //Add this line

 return packages;
}
  1. Add the three required dependencies.
dependencies {
    implementation 'com.google.ar:core:1.8.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])         
        compile(name:'zappar-release', ext:'aar')

    implementation "com.facebook.react:react-native:+"  // From node_modules
    compile project(':zappar-release')
    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}


iOS

  1. The iOS app embed download is a zip file that contains:

ZapparEmbed.include. The embed component itself - this is what will be integrated into your app.

ZapparEmbedTest. An example Xcode project that demonstrates the integration.

Unzip the contents into a folder of your choice.

  1. Copy the ZapparEmbed.include folder into your project directory.

The directory is ~400 MB because it contains bitcode – the compiled app will be much smaller in size.

  1. Add ZapparEmbed.include to your project. To do this in Xcode, right-click on your project name in the Project navigator and select Add Files to. Select ZapparEmbed.include and ensure that Create groups for any added folders is selected before clicking Add.

  2. Add permissions with descriptions into your project. Navigate to your project InfoPlist.strings. You'll also need to replace the embed key placeholder with the embed key provided to you on ZapWorks.

<key>ZapparEmbedKey</key>
<string><Your Embed key here></string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>NSAppleMusicUsageDescription</key>
<string>To add this item to your library.</string>
<key>NSCalendarsUsageDescription</key>
<string>To add this item to your calendar.</string>
<key>NSCameraUsageDescription</key>
<string>To provide augmented reality amazingness.</string>
<key>NSContactsUsageDescription</key>
<string>To add this item to your contacts.</string>
<key>NSMicrophoneUsageDescription</key>
<string>To record audio with your video.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>To add this item to your library.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>To add this item to your library.</string>
  1. Once the ZapparEmbed.include file has been imported to your project, you'll be able to import the necessary header files.
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#import <ZapparEmbed/ZapparEmbed.h>
#import <React/RCTLog.h>

@interface AppDelegate : UIResponder <ZapparEmbedFinished, UIApplicationDelegate, RCTBridgeDelegate>{
   UIViewController *viewController; 
}

With the steps above completed, the react native build process can be started. The build will display a user interface with a single button. Tapping the Start Embed button will launch Zappar's scanning component.

The Zappar embed component can be customized with the options covered in this article.

zapcode branded_zapcode i