Get started

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. Install package

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

Install the 1Flow React Native package:

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

2. Setup in iOS and Android

For iOS

Navigate to the ios directory and run pod install

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.
    );
  }

💡

Note: you need to replace your-project-api-key with your actual project API key. Click here and navigate to Settings → Project → API keys section. Copy your API key and paste it into the code snippet.

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.

4. Identify users

In every new session, 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.

To identify a user:

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. 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.

Parameters in Identify and Track calls support the following types: String, Int, Double, Float, URL, and Date. Unsupported data types will be ignored.

6. Announcement Inbox

To display the announcements inbox to the user, invoke the function await OneFlow.showInbox();. This action will render the announcements inbox at the top of the screen.

💡

Note: Until the Announcement inbox screen is presented, the system will bypass any surveys or in-app announcements associated with events triggered within that timeframe.

Launch 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, run the app and trigger the event. You should see the survey show up when the event is fired.