js-react-native

Get Started: React Native¶

Install React Native SDK¶

Note

This page describes how to install Expo without Expo and with Bare Workflow. See Get Started: React Native (Expo) for how to develop with Expo (Managed Workflow).

Note

Make sure you have a recent version of React Native, node and npm installed. For React Native a version equal or above 0.41.2 is recommended but you should be able to use Repro with versions below as well.

Note

Unlike react-native init, if you did create your project with create-react-native-app or expo init, then you will have to eject your project. Please refer to your build environment documentation on how to do that. Expo Example

Note

If you have New Architecture enabled, please use React Native SDK version 4.0.0 or higher.

Please make sure that your React Native project is structured like this:

<PROJECT_ROOT>
├── app.json
├── package.json
├── node_modules
│   └── ...
├── android
│   ├── ...
│   └── build.gradle
└── ios
    ├── ...
    └── <APP_NAME>.xcodeproj

Use the following commands to install Repro into your project:

React Native 0.60.0 and above¶

$ npm install react-native-repro --save

Specific instructions for the iOS platform¶

$ cd ios

$ pod install

Specific instructions for the Android platform¶

Please open your android/build.gradle and add the following repository URL:

 allprojects {
     repositories {
         ...
         maven {
             url "$rootDir/../node_modules/react-native-repro/sdk-android"
         }
     }
 }

React Native 0.60.0 below¶

$ npm install react-native-repro --save

$ react-native link repro-react-native

Add to iOS project (with CocoaPods)¶

$ cd ios

$ pod install

Add to iOS project (without CocoaPods)¶

Only if your project does not yet use Cocoa Pods, you will have to add Repro manually to your Xcode project. Follow the 2 steps below in order to do so.

Framework Path¶

Under Project Setting -> Your Target -> Build Settings search for Framework Search Path and add the following path:

$(PROJECT_DIR)/../node_modules/react-native-repro/sdk-ios/

Specific instructions for the Android platform¶

Please open your android/build.gradle and add the following repository URL:

 allprojects {
     repositories {
         ...
         maven {
             url "$rootDir/../node_modules/react-native-repro/sdk-android"
         }
     }
 }

Setup¶

iOS¶

Import Repro into your AppDelegate , and then start the session from the application:didFinishLaunchingWithOptions: delegate method. Repro setup should be called before the setup code of React Native.

You can find the YOUR_APP_TOKEN at SDK Token in SETTINGS > PROJECT SETTINGS > Credentials on the management screen.

#import <Repro/Repro.h>

...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Setup Repro
    [Repro setup:@"YOUR_APP_TOKEN"];

    // ... react-native javascript setup code ...
    return YES;
}

Android¶

In your Application's onCreate method you should start a new Repro session prior to the React Native initialization code.

You can find the YOUR_APP_TOKEN at SDK Token in SETTINGS > PROJECT SETTINGS > Credentials on the management screen.

import io.repro.android.Repro;

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        // Setup Repro
        Repro.setup(this, "YOUR_APP_TOKEN");

        // SoLoader.init(...) and other react-native javascript setup code ...
    }
}

Import Repro into React Native¶

On the JavaScript side of you project, import Repro like this:

import Repro from 'react-native-repro';

You then may call the methods of the Repro object.

Repro.track("user review", { rating: 3 });

Information collected by the SDK will be uploaded to the server periodically.

Track event¶

Targeting the right group of users is critical to effectively make analyses or marketing campaigns. By keeping track of user behavior as events, you will be able to choose the right group of users according to your purpose from the dashboard.

Example of targeting user group with events:

Specify the target group of users for the campaign using event and/or user profile filters

If you don't exactly know which events to track in your app, we recommend you to start from tracking the event when each view is displayed.

Example:

@implementation MainViewController

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    [Repro track:@"MainViewController" properties:nil];

    ...
}

class MainViewController: UIViewController {

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        Repro.track(event: "MainViewController", properties: [:])

        ...
    }

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onResume() {
        super.onResume();
        Repro.track("MainActivity");

        ...
    }
}

#include "ReproCpp.h"

...

ReproCpp::track("Initialized");

Repro.Track ("Initialized");

// Will be written later

class MainScreen extends React.Component {

    componentDidMount() {
        Repro.track("MainScreen", {});
    }

    ...
 }

import Repro from 'react-native-repro';

...

Repro.track("MainScreen", {});

import 'package:repro_flutter/repro.dart';

...

await Repro.track("Initialized");

Set User ID¶

The analytics results you will see in Repro are aggregated per each user. By setting the User ID, you gain the advantages below:

Identify the same user across multiple devices
Target campaigns more accurately

Please see here for more details.

Send push notifications¶

You can send push notifications from Repro's dashboard as well as using the API. Please refer to this document when implementing push notification.

Next...¶

For more details of other available features, please see below.