Get Started: React Native (Expo)¶
Note
This page describes how to introduce Expo (Managed Workflow) when used.If you do not use Expo with React Native or if you develop with Bare Workflow, please refer to Get Started: React Native .
Install Expo plugin¶
Install the following packages for your project.
npx expo install react-native-repro
npx expo install expo-repro
Edit the app.json file¶
Describe the settings in the project's app.json file as follows
{
"expo": {
"plugins": [
[
"expo-repro",
{
"sdkToken": "00000000-0000-0000-0000-000000000000"
}
]
]
}
}
Key |
Data types |
Overview |
Details |
---|---|---|---|
sdkToken |
String | SDK token to be used in the application |
Set the SDK token as listed in Configuration > Project Settings on the Administration page. The setting is required. |
log_level |
String | Log Level |
The info level is set by default. Only if you want to change it, you need to specify it. Possible values are “debug”, “info”, “warn”, or “error“. |
endUserOptInDefault |
Boolean | Specify opt-in/opt-out initial state |
The default setting is “true” (opt-in by default). You need to specify only if you want to change it. |
advertisingIdentifierCollectionEnabled |
Boolean | Settings regarding the collection of advertiser IDs |
“false” (do not retrieve) is set by default. Specify “true” only when acquiring ad IDs (AAID and IDFA). |
openUrlFilterRegExList |
Array(String) | URL Patterns for Universal Links |
Set the URL pattern that must be specified when using the universal link function. This should be specified only when this feature is used. See Push Notification for iOS for details. |
androidPushNotificationChannelId |
String | Channel ID for push notifications |
Set the channel ID for push notification. Specify only when using the push notification function. (If you do not use the push notification function, do not set this item.) |
androidPushNotificationChannelName |
String | For Android Channel name for push notifications |
Set the channel name for push notification. Specify only when using the push notification function. |
androidPushNotificationChannelDescription |
String | For Android Push Notification Channel Description |
Set the channel description for push notification. Specify only when using the push notification function. |
androidPushNotificationShowBadge |
Boolean | For Android Specify whether to use the badge function when receiving push notifications |
Specify whether or not to display the push notification badge. Specify only if you want to use the push notification function. The default setting is “true”. |
Generate native code for your application¶
Execute the following command to build the application.
npx expo prebuild --clean
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:
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.