12min

React Native

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. Adding the package

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
|

On iOS you will need to run pod install

iOS only
|

Option 2: Manual linking

NPM
Yarn
|

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

Bash
|



2. 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 SDK shares context throughout your app by accessing the shared instance in the SDK.

JS
|



3. Displaying Content

The SDK includes all the components needed to simply add them to your UI. 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 inserted after initialization

Unflow relies on initialization to manage and show content. Therefore, it is important that the banner is instansiated after the client is initialized (and the user set). We suggest initializing Unflow as early in your app as possible.



Updated 16 Mar 2022
Did this page help?
Yes
No