Skip to main content

Migrations

From 0.29.x to 1.0.0​

Version 1.0.0 brings full support for the React Native New Architecture (Fabric, Turbo Modules, Codegen) while retaining backward compatibility with the Old Architecture (Bridge, Paper).

Update Requirements and Native Setup​

Update your project dependencies and SDK versions according to How to get started:

  • React Native: 0.68+ (supports both New Architecture and Old Architecture; built on 0.86.0).
  • iOS: iOS 13.0+ (bundles native SDK InAppStory 1.29.5).
  • Android: minSdkVersion = 24, compileSdkVersion = 35, targetSdkVersion = 35 (bundles native SDK 1.25.4).
  • If using the New Architecture (default in React Native 0.76+), ensure newArchEnabled = true in gradle.properties.

Android native package and imports​

The Android package changed from com.inappstorysdk to com.inappstory.reactnativesdk. Update your imports in MainApplication and MainActivity:

1. In MainApplication:​

import com.inappstorysdk.InAppStory
import com.inappstory.reactnativesdk.InAppStory

class MainApplication : Application(), ReactApplication {
  override fun onCreate() {
    super.onCreate()
    InAppStory.initSDK(this)
    loadReactNative(this)
  }
}

2. In MainActivity:​

import com.inappstorysdk.InAppStoryActivity
import com.inappstory.reactnativesdk.activity.InAppStoryActivity

class MainActivity : InAppStoryActivity() {
  override fun getMainComponentName(): String = "your_app"
}

StoriesWidget → StoriesList​

StoriesWidget no longer exists. Render StoriesList and pass storyManager, appearanceManager, and feed:

<StoriesWidget feed="default" />
<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed="default"
/>

Prefer StoryManager.create​

new StoryManager(config) still works, but native initialization is asynchronous. Use await StoryManager.create(config) when you need the manager to be ready before the first UI or event subscription.

const storyManager = new StoryManager(config);
const storyManager = await StoryManager.create(config);

Replace generic event subscriptions​

The old on(eventName, listener) / once API was removed.

storyManager.on('showStory', (payload) => console.log(payload));
storyManager.onShowStory((event) => console.log(event.body));

Common replacements:

Old on(...) nameNew method
showStoryonShowStory
closeStoryonCloseStory
showSlideonShowSlide
clickOnButtononClickOnButton
likeStoryonLikeStory
dislikeStoryonDislikeStory
favoriteStoryonFavoriteStory
clickOnShareStoryonShareStory
storyWidgetEventonStoryWidgetEvent
bannerWidgetEventonBannerWidgetEvent
goodItemSelectedonGoodItemSelected
game eventsonGameEvent
IAM eventsonIamEvent
failure eventsonFailure

CTA handling​

CTA clicks are no longer subscribed with an event name. Assign the handler property instead.

storyManager.on('handleCTA', handler);
storyManager.storyLinkClickHandler = (payload) => {
  // payload.src, payload.srcRef, payload.data
};

Appearance APIs​

Reader appearance and custom icon methods moved from StoryManager to AppearanceManager.

storyManager.setOverScrollToClose(true);
storyManager.setScrollStyle(StoryReaderSwipeStyle.FLAT);
storyManager.setCloseButtonPosition(StoryReaderCloseButtonPosition.RIGHT);
appearanceManager.setOverScrollToClose(true);
appearanceManager.setStoryReaderOptions({
  closeButtonPosition: StoryReaderCloseButtonPosition.RIGHT,
  scrollStyle: StoryReaderSwipeStyle.FLAT,
});

Font settings for story cards​

The old CSS-like font string is not used by the current JS renderer. Configure the card title with individual style fields.

title: {
  font: 'bold normal 14px/16px "InternalPrimaryFont"',
}
title: {
  fontSize: 14,
  fontWeight: 600,
  fontFamily: Platform.select({ ios: 'Bradley Hand', android: 'Comic Sans' }),
  lineHeight: 16,
}

Clean up replaced managers​

If your app recreates StoryManager on login/logout, call destroy() on the old instance to remove native event subscriptions.

oldStoryManager.destroy();
const storyManager = await StoryManager.create(config);

From 0.28.x to 0.29.0​

Version 0.29.0 moves several APIs to their final place. Update the following.

StoriesList: viewModelExporter → ref​

StoriesList now exposes its imperative API (reload()) through a ref typed as StoriesListRef, instead of the viewModelExporter prop / StoriesListViewModel type.

import { type StoriesListViewModel } from '@inappstory/react-native-sdk';
import { type StoriesListRef } from '@inappstory/react-native-sdk';

const storiesListViewModel = React.useRef<StoriesListViewModel>();
const viewModelExporter = React.useCallback(
  (viewModel: StoriesListViewModel) => (storiesListViewModel.current = viewModel),
  []
);
const storiesListRef = React.useRef<StoriesListRef>(null);

<StoriesList
  storyManager={storyManager}
  appearanceManager={appearanceManager}
  feed={feedId}
  viewModelExporter={viewModelExporter}
  ref={storiesListRef}
/>;

// reload the feed
storiesListViewModel.current?.reload();
storiesListRef.current?.reload();

Reader appearance and custom icons moved to AppearanceManager​

Reader-appearance and custom-icon setters are now methods of AppearanceManager, not StoryManager. Like / dislike / favorite / share visibility is configured via setCommonOptions, and the close-button position / scroll style via setStoryReaderOptions.

storyManager.setOverScrollToClose(true);
storyManager.setScrollStyle(StoryReaderSwipeStyle.FLAT);
storyManager.setCloseButtonPosition(StoryReaderCloseButtonPosition.RIGHT);
storyManager.setHasLike(true);
storyManager.setLikeImage('like', 'likeSelected');
appearanceManager.setOverScrollToClose(true);
appearanceManager.setLikeImage('like', 'likeSelected');
appearanceManager.setCommonOptions({ hasLike: true, hasLikeButton: true });
appearanceManager.setStoryReaderOptions({
  closeButtonPosition: StoryReaderCloseButtonPosition.RIGHT,
  scrollStyle: StoryReaderSwipeStyle.FLAT,
});

showOnboardingStories → showOnboardings​

The method was renamed and its arguments reshaped to showOnboardings(feed?, limit?, tags?, signal?).

storyManager.showOnboardingStories(appearanceManager, abortController.signal, {
  feed: '<feedID>',
  limit: 10,
  customTags: [],
});
storyManager.showOnboardings('<feedID>', 10, [], abortController.signal);

Per-list tags prop removed​

The old StoriesWidget component and its per-list tags prop were removed. Filter content globally with setTags / addTags before rendering the list.

<StoriesWidget feed="default" tags={['tag1', 'tag2']} />
storyManager.setTags(['tag1', 'tag2']);
<StoriesList feed="default" storyManager={storyManager} appearanceManager={appearanceManager} />

setUserId signature​

userIdSign is now an explicit second argument — pass null when you don't sign the user.

storyManager.setUserId(userId);
storyManager.setUserId(userId, userIdSign ?? null);

Event subscription: on → dedicated onXxx methods​

The generic storyManager.on(eventName, listener) / once API was removed. Subscribe with the dedicated method for each event; the payload now arrives in event.body.

storyManager.on('showStory', (payload) => console.log(payload));
storyManager.onShowStory((event) => console.log(event.body));

Mapping of the common events:

Old on(...) nameNew method
showStoryonShowStory
closeStoryonCloseStory
showSlideonShowSlide
clickOnButtononClickOnButton
likeStoryonLikeStory
dislikeStoryonDislikeStory
favoriteStoryonFavoriteStory
clickOnShareStoryonShareStory
storyWidgetEventonStoryWidgetEvent
bannerWidgetEventonBannerWidgetEvent
goodItemSelectedonGoodItemSelected
game eventsonGameEvent
IAM eventsonIamEvent
failure eventsonFailure
handleCTAstoryLinkClickHandler (see Call To Action)

clickOnStory no longer has a public subscription method.

From 0.27.x to 0.28.0​

In version 0.28.0, Android's native initialization was changed. In the MainApplication class, change the following code:

/// this example uses a New architecture
package com.example

// other imports
import android.app.Application
import com.inappstory.reactnativesdk.InAppStory

class MainApplication : Application(), ReactApplication {

    // ...

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

To 0.27.x​

Starting from 0.27 version, In-app messages was added. To handle the back button press on Android, SDK integration needs to be updated.

  1. Update MainActivity class:
package com.example.yourapp;

import com.inappstorysdk.InAppStoryActivity;

// You need to extend class from InAppStoryActivity
class MainActivity extends ReactActivity {
class MainActivity extends InAppStoryActivity {
    /// ...
}
  1. Update AndroidManifest.xml file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:name=".MainApplication"
        ...
        >
        <activity
            android:name=".MainActivity"
            ...
            android:enableOnBackInvokedCallback="true"
            ...
            >
            <intent-filter>
             ...
            </intent-filter>
         </activity>
  </application>
</manifest>