Quick Start

This walkthrough shows you how to add Unflow to your React Native application and add your first carousel

What is Unflow?

Unflow provides a collaborative editor where marketing teams at mobile apps can design and deliver engaging in-app content to their users instantly. With our SDK, there is no need to involve engineering or wait on app store release cycles to deliver content. You can read more about how Unflow fits into your app or you can register to start building.



1. Setting Up Your Account

Before you begin it is important that you have already spoken to our team and have setup your app. This is the only way to generate an API token that will be needed to authenticate requests from your app. Anyone in your company can setup your account but you may need a technical team member to help you set it up inside your app.

2. Installation

The Unflow React Native package can be installed either via npm or yarn. We recommend using the latest version of React Native, or making sure that the version is at least greater than 0.64.

Option 1: Automatic linking

Recent versions of React Native (0.60+) will automatically link the SDK, so all that's needed is to install the library.

NPM
Yarn



Option 2: Manual linking

NPM
Yarn

After that, you should link the library to the native projects by doing:

Bash



3. Configure the SDK

Only use your public API key to configure Unflow

You can get your public API key from the app settings on the dashboard.

You should only configure Unflow once, as early as possible. After that, the provider shares context throughout your app by accessing the shared instance in the SDK.

The provider makes sure that the data within the app is always up to date. It handles everything from fetching content to caching it for later use.

JS



4. Displaying Content

The SDK includes all the components needed to simply add them to your UI. If you would like to customize how Unflow appears within your app please read about Building Custom Openers

The default opener is a full-width 'banner' style horizontal stack of content that can be scrolled. An example of which is included below.

Default openers from Unflow
Default openers from Unflow



The code sample below shows how the Unflow opener can be easily interwoven as a plug-and-play component within your existing UI to display content.

JS

Make sure the banner is a child of the provider

Unflow relies on the provider to manage content. Therefore, it is important that the banner is nested within it to ensure it has the necessary context to show data.