Storyteller Component

Props

The Storyteller can be customized using such props.

interface StorytellerSdkInterface {
  isInitialized(callback: (result: Boolean) => void): void;
  isPresentingStory(callback: (result: Boolean) => void): void;
  customInstanceHost(callback: (result: string) => void): void;
  currentUserId(callback: (result: string) => void): void;
  currentApiKey(callback: (result: string) => void): void;
  version(callback: (result: string) => void): void;

  setTheme(theme: Theme): void;
  setAdsResult(result: { ads: Array<ClientAd>; error: Error | null }): void;

  openDeeplink(url: string, callback: (result: Boolean) => void): void;
  openStory(id: string, errorCallback: (error: string) => void): void;
  openPage(id: string, errorCallback: (error: string) => void): void;

  initialize(
    apiKey: string,
    externalId: string,
    customInstanceHost: string,
    categoriesToPreload: Array<string>,
    callback: (result: Boolean, message: string) => void
  ): void;
}

Get-only Attributes

Those attributes reflect static properties from native Storyteller object.

• isInitialized - check if Storyteller has been successfully initialized
• isPresentingStory - check if Story is being presented at the moment
• customInstanceHost - custom instance hosting API
• currentUserId - current user id
• currentApiKey - current api key set by initialize(apiKey: String, onComplete: () -> Void, onError: (Error) -> Void)
• version - current SDK version

Theme

The appearance of the SDK can be customized by setting the theme property. For more information please read Theme.

• setTheme - sets default fallback theming style used to render story items in lists and activities launched from list.

Ads

Ads can be integrated through backend API or by integrating app. When it is done by integrating app user needs to call setAdsResult. For more information please read Ads.

• setAdsResult - set ads result after receiving callback from delegate method onGetAdsForList.

Deeplinks

Deeplinks opened by calling function on Storyteller object will open just one story independently from list component rendered on app.

• openDeeplink - open deeplink from url.
• openStory - open deeplink with story id.
• openPage - open deeplink with page id.

Initialize

initialize(apiKey: string, externalId: string, customInstanceHost: string, categoriesToPreload: Array<string>, callback: (result: Boolean, message: string) => void)

The initialize method is required to be called for Storyteller to work. It's recommended to fire this method as soon as possible in the app lifecycle.

Parameters:

• apiKey - api key provided by Storyteller team
• externalId - id of the user to be authorized
• customInstanceHost - custom instance hosting API
• categoriesToPreload - list of categories id to be preloaded. If array is empty the default category will be preloaded.
• callback - called when initialization has finish with either success or failure

StorytellerDelegate

A StorytellerDelegate has methods for managing Storyteller story events.

To recive events from delegate you need to subscribe following listeners ON_USER_ACTIVITY_OCCURED, USER_SWIPED_UP_TO_APP, GET_ADS_FOR_LIST. You can get those from constants published by Storyteller object.

import Storyteller from '@getstoryteller/react-native-storyteller-sdk';
const { ON_USER_ACTIVITY_OCCURED, USER_SWIPED_UP_TO_APP, GET_ADS_FOR_LIST } = Storyteller.getConstants();

Then attach listeners to appropriate events:

const storytellerEvt = new NativeEventEmitter(Storyteller);
storytellerEvt.addListener(ON_USER_ACTIVITY_OCCURED, this._onUserActivityOccurred);
storytellerEvt.addListener(USER_SWIPED_UP_TO_APP, this._onUserSwipedUpToApp);
storytellerEvt.addListener(GET_ADS_FOR_LIST, this._onGetAdsForList);

_onUserActivityOccurred = (body: { type: EventType; data: UserActivityData; }) => {
    console.log(`ActivityOccurred\n` + `type: ${body.type}, data: ${JSON.stringify(body.data)}`);
};

_onUserSwipedUpToApp = (body: { swipeUpUrl: string }) => {
    console.log(`UserSwipedUpToApp\n` + `swipeUpUrl: ${body.swipeUpUrl}`);
};

_onGetAdsForList = (body: { stories: [ClientStory] }) => {
    console.log(`GetAdsForList\n` + `stories: ${JSON.stringify(body.stories)}`);
    Storyteller.setAdsResult({ ads: [adExample], error: null });
};

You can find more information about Storyteller Delegate on iOS and Android