React Native Cross-Platform SDK

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

5. Optional: Managing Identity

1. Adding the Nami SDK

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

1. Installing the React Native SDK bridge

2. Configuring the Nami SDK for your projects

Let's walk through each step.

Installing React Native SDK Bridge

SDK on GitHub

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

yarn add react-native-nami-sdk

npm

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 .

Configure for Apple

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

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

Podfile

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

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

1. Run cd ios && pod update

Configure for Play Store-only

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

build.gradle

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

1. Edit android/app/build.gradle to default to the Play Store build of the Nami SDK

app/build.gradle

android {
    defaultConfig {
        missingDimensionStrategy 'store', 'play'
    }
}

Configure for Play Store + Amazon Appstore

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.

build.gradle

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.

index.js

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.

3. 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.

launchLaunch a live campaign in your app and show the assigned paywall

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

isCampaignAvailableReturns a boolean if a matching campaign is available on the device.

4. 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.

Nami Subscription Management

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.

Bring your Own Payment Code

5. 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.

Accounts and Login/Logout