Quick Start

This walkthrough shows how to add Storyly Moments to your React application and forward your users to create their own stories.

📘

Before you begin

This walkthrough requires a user payload which is explained in user payload section and a Storyly Moments token which is retrieved from Storyly Dashboard.

Installation

Moments by Storyly React Native package is available through npm. Source code is also available through the Moments by Storyly React Native Github page., contributions are more than welcomed 🙂

yarn add storyly-moments-react-native

npm install --save storyly-moments-react-native

📘

Tip

You can find the latest version’s release notes here.

Android Installation

Storyly SDK is developed using Kotlin language. So, there are some requirements to use Kotlin plugin in the project. Especially if you're encountering a Plugin with id 'kotlin-android' not found. error, this part fixes that.

You need to add kotlin-gradle-plugin to Android project's main Gradle file (android/build.gradle)

buildscript {
    dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31")
    }
}

Moreover, Storyly SDK is developed using the AndroidX library package instead of the Support Library. So, you need to ensure that your project also supports these packages. You can do this check and add related lines if it's missing in the application's Android project's Gradle properties file (android/gradle.properties)

android.useAndroidX=true
android.enableJetifier=true

🚧

Warning

Storyly SDK targets Android API level 17 (Android 4.2, Jelly Bean) or higher.

iOS Installation

Storyly React Native contains platform-specific (native) code. Autolinking is needed to be done so that your project can discover and use this code.
If your application depends on react-native 0.60+, Autolinking is handled by react native as is mentioned in autolinking in react-native. Otherwise, react-native 0.60-, please refer for detailed explanation Linking Libraries in iOS for correct handling of autolinking.

// react-native 0.60-
react-native link storyly-moments-react-native

After linking, you need to update Pods of the app;

// this should be executed inside 'ios' folder
pod update 

npx pod-install

🚧

Warning

Moments by Storyly SDK targets iOS 11 or higher.

🚧

Warning

Please note that CocoaPods version should be 1.9+

Import StorylyMoments

Importing StorylyMoments in your React Native application is quite easy:

import StorylyMoments from 'storyly-moments-react-native';

Initialize Storyly

StorylyMoments extends NativeModules so that you can use inherited functionality as it is. You can add the following lines inside in your app;

StorylyMoments.initialize(
    [MOMENTS_TOKEN], 
    [MOMENTS_USER_PAYLOAD]
)  

MOMENTS_TOKEN: It's required for your app's correct initialization. You can get your Storyly Moments token from the Storyly Dashboard -> Settings -> App Settings.

For more information about the user payload please check User Payload section.

Main Functions

StorylyMoments presents two basic functions for your users. These are Create and Share Story and Open My Stories which will be explained below:

Create and Share Story

After StorylyMoments is initialized, you are ready to direct your users to create their first story by calling the following function using your StorylyMoments instance:

StorylyMoments.openStoryCreator()

Open My Stories

Using this function, you can let your users view their live stories by opening my stories screen. In my stories screen, your users are able to check who has seen or liked their stories. They can also delete their live stories. You can direct your users to this screen using the following function:

StorylyMoments.openUserStories()