1Flow’s React Native SDK works on:

✅ React Native

✅ React Native (Expo)

Get started

Here you will know how to set up the 1Flow library on React Native cross-platform apps. Setting up 1Flow for your React Native app is easy and you can do it by following steps.

Prerequisites

NodeJS, v8.3 or ulterior

React Native (react-native >= 0.60.0)

For Android:

A device or emulator with Google Play services installed and up-to-date.
Android Studio.

For iOS:

XCode
An iOS device such as an iPhone or an iPad

💡

Using React Native (Expo)? Check out our sample app for RN Expo here: https://github.com/1Flow-Inc/1flow-rn-expo-app

1. Add the SDK

Create your React Native application if you haven't already, see the official React Native guide and click React Native CLI Quickstart, for more details.

Add the 1Flow React Native SDK:

shell
npm install @1flow-inc/react-native-1flow-sdk@2023.9.19 --save

2. Setup

For iOS

Navigate to the ios directory and install pods

shell
cd ios
pod install

For Android

Include the below repository to your project's build.gradle file:

java
allprojects{
	repositories{
        google()
        jcenter()
        maven{url 'https://jitpack.io'}
    }
}

Add dependency to your app's build.gradle file:

java
defaultConfig {
				....
				minSdkVersion 21
    }

3. Configure

Open your React Native Application App.js and write the following code in componentDidMount()

javascript
// Add this line to import 1Flow at the top of the file
import OneFlow from '@1flow-inc/react-native-1flow-sdk';

componentDidMount() {
  // Add this line to configure 1Flow
    OneFlow.configure(
      'your-project-api-key',
      true, // true if want to enable surveys otherwise false.
    );
  }

Optional: If you want to configure 1Flow UI with non-system font then use below code to configure custom font for survey UI

javascript
// Add this line to import 1Flow at the top of the file
import OneFlow from '@1flow-inc/react-native-1flow-sdk';

componentDidMount() {
  // Add this line to configure 1Flow
    OneFlow.configure('your-project-api-key');

    //For iOS Only
    OneFlow.useFont('Courier New'); 

    // For Android Only (This font file should exist at "/android/app/src/main/assets/fonts/pacifico.ttf"
    OneFlow.useFont(null, 'fonts/pacifico.ttf'); 

    // For iOS & Android Both (This font file should exist at "/android/app/src/main/assets/fonts/pacifico.ttf"
    OneFlow.useFont('Courier New', 'fonts/pacifico.ttf'); 
  }

fontFamily and path are optional. you can pass null if you want to restore it to default system font.

💡

Note: you need to replace your-project-api-key with your actual project API key. Click here and navigate to Project Settings → API keys section.

4. Log user (optional)

If your app or website does not need the user to sign in, then you can skip to step 4 - Log events.

If your app requires the user to register an account and sign in, you can call a method to bind the user with 1Flow. This way, you'll be able to connect the data with your internal records.

Whenever the user has signed in, you can call OneFlow.logUser() to pass the user identifier, along with any other parameters you'd like to store with us (such as email, full name, etc.), to 1Flow.

javascript
// import 1Flow SDK
import OneFlow from '@1flow-inc/react-native-1flow-sdk';

await OneFlow.logUser('12345', {
      firstName: 'steve',
      lastName: 'jobs',
      number: 123456,
    });

Here, parameters is optional. pass nil if you don't want any parameters to send with the user.

5. Start Flow

You can manually start any active flow (published, currently turned on) in your project by calling the startFlow method. This wouldn’t work if you turn off the flow or haven’t published it yet.

💡

Advanced tip: Calling this manually would ignore any target audience filters you set for the survey or announcement flow. As long as the flow is found in your current project and is in active status, it will show immediately.

javascript
// import 1Flow SDK
import OneFlow from '@1flow-inc/react-native-1flow-sdk';

await OneFlow.startFlow("flow_id");

6. Track events

Events are central to 1Flow. An Event is a marker in the code to track a key moment in the user flow - like when the user just created an account, completed some action, made a purchase or rejected an offer. We recommend you track at least 4-5 events to better understand the user journey.

javascript
// import 1Flow SDK
import OneFlow from '@1flow-inc/react-native-1flow-sdk';

await OneFlow.recordEventName('product', {
      'param1': 'value1',
      'param2': 'value2',
    });

// OR

await OneFlow.recordEventName('product');

Here, parameters is optional. pass null if you don't want any parameters to send with event.

💡

Advanced tip: Events can be used to trigger surveys, and if you pass in relevant info about the user action (such as the id of the content they just consumed, name of the offer just shown to them, etc.), then you can enrich the survey response with valuable context using our webhooks.

📢

Notes: Parameters in Log User and Track Events will support the Dictionary of these Data Types: String, Int, Double and Float. To pass the Date, You may convert it to the String as expected format but We recommend using a timestamp. It will be more helpful to set up trigger rules for this parameter across all platforms on 1Flow Dashboard. Parameters other than these types will be skipped.

6. Check for success

Build and run your application. Go to 1Flow dashboard - if the implementation is successful, then this banner should disappear when we receive data from your device:

Show your first survey

Now that you've successfully installed 1Flow into your app, it's time to create your first survey.

If you've already created a survey and published it (survey shows up in the "In Progress" section of the dashboard), run the app and trigger the event to happen, you should see the survey show up when the event is fired.