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 Example 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

Unzip the App Embed Component

  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. Copy zappar-release.aar into the project folder as shown below.

  1. Copying the AAR file. Add the following lines:
android {
  packagingOptions {
   pickFirst 'lib/x86/libc++_shared.so'
   pickFirst 'lib/arm64-v8a/libc++_shared.so'
   pickFirst 'lib/x86_64/libc++_shared.so'
   pickFirst 'lib/armeabi-v7a/libc++_shared.so'
  }
}
dependencies {
...
    implementation 'com.google.ar:core:1.8.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
    compile project(':zappar-release')
    implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'

    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
    }
  1. Add in your API key to the manifest
<application ...   >

<meta-data android:name="com.zappar.embed.API_KEY" android:value=”API KEY HERE”/>

The api key is associated with the bundle id. Use the test program provided if you are only testing.

  1. On Android 10, when using SDK 29 it is necessary to include a configuration option to allow local saving of camera images eg for AR selfies or as part of an experience. Use the following configuration in the application tag in the manifest file : 
android:requestLegacyExternalStorage=“true”

Create the Bridge

  1. Within the existing MainApplication class add a new instance of the ZapparPackage class into the packages list. This class is located at the following filepath: 
<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. In the App.js in the root folder of the React Native project first we will include the NativeModules library from react-native. A button is created that will trigger communication and start the embed. 
import React from 'react';
import {
  NativeModules,
  Button,
  SafeAreaView
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
 <Button  onPress={
      () => {
               var options = {}
         options.barColor= '#000000';
         options.launchDeepLink = "z/Xtpd1c";
         NativeModules.ZapparModule.startZappar( JSON.stringify(options) );
      }
    } title="Start Zappar!"></Button>

    </SafeAreaView>

  );
};

export default App;


iOS

Unzip the IOS App Embed Component

  1. The App Embed Component 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.

3.Add the ZapparEmbed.include to your project. To import the ZapparEmbed.include in Xcode, do the following:

  • Right click on your project name in the Project navigator on the left of the screen
  • Select “Add Files to...”
  • Select ZapparEmbed.include
  • Ensure that “Create groups for any added folders” is selected
  • Press add

4.Add permissions with descriptions into your project. To do this first open Xcode and navigate to your project InfoPlist.strings.


Additionally replace the embed key placeholder with your embed key. Find out how to generate an embed key below. 

<key>ZapparEmbedKey</key>
<string>API 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. When we import the ZapparEmbed.include file into our project, we are then able to import the 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 all the steps completed now you could start the react native build process and a user interface with a single button should appear. By tapping “start embed” Zappar would launch.

Obtaining a key

To obtain a key for your embed:

  1. Navigate to Zapworks and visit the App Embed section of the page.
  2. Click add new build.
  3. Select the React Native option.


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

You can also contact Zappar the support team at support@zappar.com with queries related to the embed key.

zapcode branded_zapcode i