React Native SDK Setup

Please make sure you have completed the setup of your app on the Nami Control Center for all these steps to be successful.

Basic Steps

Adding Nami to your app has a few steps for a basic app.

1. Add the SDK to your project
2. Configure the SDK
3. Show a paywall in your app
4. React to a purchase to grant access to paid content or features

We'll run through each of these below.

Setting up the Nami SDK

In React Native apps, the Nami SDK setup consists of two parts.

1. Installing the React Native bridge
2. Configuring the Nami SDK for your Apple and Android projects.

Let's walk through each step.

Installing Nami SDK Bridge

The Nami SDK for React Native is available as a NPM bridge module and supports supports Apple iOS, iPadOS, and tvOS published on the App Store, Android and Android TV published on Google Play, and Amazon FireTV apps published on the Amazon Appstore.

To add Nami to your React Native project, start by adding the React Native bridge to your project with yarn or npm.

yarn add react-native-nami-sdk

npm install react-native-nami-sdk --save

The code for the React Native bridge is also available on our Github.

If you need help setting up your React Native development environment, you can find instructions here:
https://reactnative.dev/docs/environment-setup
.

Apple Projects

Complete the following steps to prepare your React Native app for using Nami.

1. Edit ios/Podfile
   1. Confirm for each target, the the minimum versions match Nami's native Apple SDK.

target 'TestApp' do
  platform :ios, '14.0'
  # ...
end

target 'TestApp-tvOS' do
  platform :tvos, '15.0'
  # ...
end

2. Run cd ios && pod update

Android Projects

Complete the following steps

1. Edit android/build.gradle and add the native Nami SDK for Android maven repository.

allprojects {
    repositories {
        google()
        mavenLocal()
        maven { url "https://packages.namiml.com/NamiSDK/Android/"}
        maven { url 'https://jitpack.io' }
    }
}

Android & Amazon Projects

If your projects is also available on the Amazon Appstore, you will need to change the way you include the the Nami SDK maven repository. Nami publishes two flavors of the Android SDK -- one for Google Play, and one for Amazon Appstore.

As a result you will need to edit android/app/build.gradle instead and use build flavors to pull in the correct Android maven repository.

productFlavors {
    amazon {
        dimension "store"
        repositories {
            maven { url "https://packages.namiml.com/NamiSDK/Amazon/"}
        }
    }
    play {
        dimension "store"
        repositories {
            maven { url "https://packages.namiml.com/NamiSDK/Android/"}
        }
    }
}

Also, for Amazon FireTV devices or other devices targeting minSdkVersion 25 or lower, see this document for two additional steps to enable the Nami SDK to work properly. Nami supports down to minSdkVersion 22.

Configure the SDK

We recommend that you configure the Nami SDK as early in your app's index.js.

To initialize the Nami SDK, you'll call the configure method with App Platform IDs for both Apple and Android.

import {AppRegistry, Platform} from 'react-native';
import {Nami} from 'react-native-nami-sdk';
import App from './App';

let appPlatformIDAndroid = 'YOUR_GOOGLE_PLAY_APP_PLATFORM_ID';

if (Platform.OS == 'android' && Platform.constants.Manufacturer == 'Amazon') {
  appPlatformIDAndroid = YOUR_AMAZON_APPSTORE_APP_PLATFORM_ID';
};

let configDict = {
  'appPlatformID-apple': 'YOUR-APPLE_APP-PLATFORM-ID',
  'appPlatformID-android': appPlatformIDAndroid,
  logLevel: 'DEBUG'
};

Nami.configure(configDict);

AppRegistry.registerComponent('YourAppName', () => App);

Nami recommends setting the log level to WARN for apps on the store. INFO may be helpful during development to better understand what is going on. DEBUG level has a lot of information and is likely only helpful to the Nami support team.

For more on configuring the Nami SDK, see the recipe below.

Launch a campaign to show a paywall

Now that you have the SDK configured, let's show a paywall by launching a campaign. This step requires that you have a live campaign configured in the Nami Control Center.

It's easily to launch a campaign, as well as receive granular callbacks about what's happening on the paywall. This can be used to provide error handling UI or even send data to your analytics platform.

You can also check if a campaign is available before launch.

Managing purchases

If you are using Nami's subscription management features, you can ask the SDK whether or not a user has access to an entitlement.

Grant access to paid app features

Once a user has made a purchase, you'll need to make sure to give them access to the content and features in your app that require a purchase. This is managed on the Nami platform through our entitlement engine.

Using your own subscription management

If you have your own subscription management or in-app purchase code or are using another third-party solution, no problem! Nami will call back to you when a user initiates the purchase flow on a Nami paywall. It's then your responsibility to process the purchase and notify Nami when the purchase completes successfully.

Managing identity

Provide your customer identifier to link one or more devices to a known customer. It's best to do this when a user registers or signs-in to their account in your app.

If provided, the customer id (which we refer to as the external id) will be returned in any individual level data from Nami web hooks or REST API. Nami also uses customer id to establish a cross-platform view of a subscriber for analytics reporting.