Skip to main content

How to get started

Installation​

Add dependency via npm or yarn package managers:

npm install @inappstory/react-native-sdk

Requirements​

iOS​

Install pods with static frameworks, use USE_FRAMEWORKS = 'static' or have this in your Podfile:

use_frameworks! :linkage => :static

Android​

Step 1:​

Make sure to update your Android SDK versions in build.gradle:

minSdkVersion = 23
compileSdkVersion = 34
targetSdkVersion = 34

Step 2:​

Update MainApplication class:

package com.example.yourapp

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.inappstorysdk.InAppStory

class MainApplication : Application(), ReactApplication {

 override val reactHost: ReactHost by lazy {
    getDefaultReactHost(
      context = applicationContext,
      packageList =
        PackageList(this).packages.apply {
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // add(MyReactNativePackage())
        },
    )
  }

  override fun onCreate() {
    super.onCreate()
    InAppStory.initSDK(this as Application)
    loadReactNative(this)
  }
}

Step 3:​

Update MainActivity class:

package com.example.yourapp;

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import com.inappstorysdk.InAppStoryActivity

class MainActivity extends ReactActivity {
class MainActivity extends InAppStoryActivity {
    
    /**
     * Returns the name of the main component registered from JavaScript. This is used to schedule
     * rendering of the component.
     */
    override fun getMainComponentName(): String = "your_app"

    /**
     * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
     * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
     */
    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}
Why do I need this?

InAppStoryActivity extends ReactActivity and intercepts the Back button tap at the Android hardware/software level. This feature is only used when an In-App message (IAM) is shown. It first redirects the tap through the SDK, so pressing the Back button closes the In-App message within the app rather than navigating to another screen. If MainActivity continues to extend ReactActivity, the Back button bypasses the SDK, and the reader will not close correctly.

AppVersion override​

The app version is used by the platform to enable targeting of stories by app versions. By default, IAS-SDK uses appVersion and appBundle from the native part of the application. But you can override appVersion and appBundle via StoryManagerConfig. This might be useful for CodePush users.

const storyManagerConfig: StoryManagerConfig = {
  apiKey,
  appVersion: {
    version: '3.0.0',
    build: 777,
  },
};
const storyManager = new StoryManager(storyManagerConfig);

Migrating from the legacy React Native SDK​

Breaking changes
  1. Font settings are defined using separate variables (fontSize, fontWeight, fontFamily) instead of a String;
  2. If you used svgMask in appearanceManager, try to use custom cells to achieve same results.