Alameda Dev.
Published in

Alameda Dev.

How to integrate Storyly in your React Native app

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')
}}
/>

Hey, we now have our first Storyly created story in out React Native application.

Viewing the Storyly story on the application looks like this:

Don’t forget to check the documentation where you can change the UI and have associated methods for Storly integration.

Hello! If you want to contact us, you can use our form on the web, if you want to see more of us you can also access it at -> www.alamedadev.com

If you prefer to write to us -> hello@alamedadev.com

--

--

--

We are a small agency 100% Remote. Specialized in Design and Development of Mobile Apps, Web and advanced software with React Ecosystem.

Recommended from Medium

5 Beginner Interview Questions in Javascript

How To Create A Splash Screen In Our React-App

Refreshing Authentication Token with Apollo client using RxJS — React

React + Rxjs + apollo client

Javascript Delegation and why you should use it

Linked List in JavaScript: How to Create Double and Sorted Lists

Writing Scalable Architecture For Nodejs

A simple explanation of JavaScript’s weird bits: Closures and This

How to Use Airtable as a Cloud-Based Database for a React App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alameda Dev.

Alameda Dev.

¡Hola! We are a team 100% Remote. Specialized Development of Mobile Apps, Web and advanced software with React and ReactNative. www.alamedadev.com

More from Medium

Make a product card with Firebase

Deploy your React App with Firebase Hosting

Deploy a React Native App to the Apple Play Store

Why Use React Native for Your Project