How to integrate Storyly in your React Native app

Published in

AlamedaDev

5 min readAug 10, 2020

DISCLAIMER: This is not ad paid article, we just wanted to experiment with Storyly because we keep seeing the ads on Instagram about it every day and we wanted to take a look at the possibilities this tool has.

With Storyly you can create stories for your users where you can showcase your content in the most stylish way and track results.

The concept of stories is a solution for visual experience in mobile. Designed for the vertical mobile screen, stories enhance the overall user experience with mobile-specific interactions like tap and swipe-up.

1 in 4 millennials looks for Stories of the products and services they want to buy. More than 50% of people open a brand’s story, and more than 85% of them watch the entire story.

Use cases

So, what kind of contact can we create for our users in the form of stories?

Best Sellers & Featured Content: Showcase your featured content and best sellers to attract your users’ attention. Offer them your newest collections, latest promotions, and hottest items with an immersive experience to drive greater conversion.
Listen to the Voice of Your Users: Gather your users’ thoughts about your campaigns, let them know you hear their voice, and support your important decisions with their opinions.
Engaging Feedback: Provide your users with an emoji rating slider to rate your offerings or changes you made about your products/services. Let your users review in the most engaging and fun way
Power up Conversions: Share your stories with CTA buttons to inspire your users to take action. Drive greater business results by enhancing your users’ journey.
Personal Products: Personalisation is the most meaningful way to build relationships with your users. Create personalized stories based on your users’ behaviors and priorities. Help them to navigate the products they need and convert your users in the most personal way.
Promote your partners & suppliers: Stories can be a placement for you to monetize your partner's and supplier's content. Also, you can use it for cross-promotion if you have multiple apps.
Effective Onboarding Tool: Introduce new features to your users in a more fashionable way. Redirect them to certain new actions to teach them how they can get more benefits out of your app.
Improve Your Push Notifications: Deep-link to your stories in your push notifications to enrich your users’ journey that contains immersive and personal stories.

Let's begin with the integration

Create a Storyly account.

You will need to create a Storyly account at their website https://storyly.io/.

After that you also need to create:

A new app inside your Storyly dashboard. Ours is “com.bouncingshield.storylytest”

You need to create a new Storyly group. Ours is called “Bouncing Shield”

After that, you are asked to create your first story. Note you have many options for the duration of the story, Click limit, Segments, Start and End date, etc.

You can use the Storyly Studio for designing the story. You will see a basic editor where you can upload images or videos, add text on top of the image/video, change the colors, add CTAs, Polls, Countdown, Ratings, etc. It looks something like this:

Now we have our first story with a CTA created and we are going to integrate it on a. Basic React Native app with Storyly SDK.

Creating a basic React Native app

Let's go to our terminal and create a brand new React Native Application

> react-native init RNStoryly
> cd RNStoryly
> react-native run-ios

Now we have or React Native app.

Before we begin integrating Storyly SDK, let's change the design to be very simple:

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView>
          <View style={styles.body}>
            <View style={styles.storylyContainer}>  
              <Text style={styles.sectionTitle}>Storyly content will go here</Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Integrate Storyly SDK
              </Text>
            </View>
            <View style={styles.sectionContainer}>  
              <Text style={styles.sectionTitle}>Step Two</Text>
              <Text style={styles.sectionDescription}>
                Add Storyly code to the app
              </Text>
            </View>
            <View style={styles.sectionContainer}>  
              <Text style={styles.sectionTitle}>Step Three</Text>
              <Text style={styles.sectionDescription}>
                Profit!!
              </Text>
            </View>
            
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};const styles = StyleSheet.create({
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  storylyContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
    borderBottomColor: '#cccccc',
    borderBottomWidth: 2,
    paddingBottom: 30
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  }
});export default App;

Let’s install now the Storyly SDK fro React Native: You can find the repo and documentation in this link https://github.com/Netvent/storyly-mobile/tree/master/react-native/storyly-react-native

yarn add storyly-react-native

Remember to execute the installation of the pods: cd ios; pod install

Add the import to the code

You will need you Storyly token to be able to connect the two, you can find your token on https://dashboard.storyly.io/settings/apps

import { Storyly } from ‘storyly-react-native’;`
...
<Storyly
    style={{ width: '100%', height: 120 }}
    storylyId=[YOUR_APP_ID_FROM_DASHBOARD]
   onLoad={storyGroupList => {
                console.log('All stories are loaded now')
              }}
              onFail={errorMessage => {
                console.log('Error loading stories')
              }}
              onPress={story => {
                console.log('The SWIPE UP has been triggered')
              }}
              onStoryOpen={e => {
                console.log('The Story is opened and is been viewed')
              }}
              onStoryClose={e => {
                console.log('The Story is closed')
              }}
/>