React Native

The Hackle React Native SDK supports React 16.8 and above, and React Native 0.64.1 and above.

The React Native SDK is built on top of the Android SDK and iOS SDK. The following OS versions are supported.

• Android API 16 (4.1 Jelly Bean) and above

• iOS 13 and above

Starting from Hackle React Native SDK version 3.31.0, the minimum supported iOS version has been raised to iOS 13.

For versions below Hackle React Native SDK 3.31.0, the minimum supported version is iOS 10.

Add Dependency

After installing or updating the SDK, you must rebuild the app for the integration changes to take effect.

npm

npm install --save @hackler/react-native-sdk

yarn

iOS

cd ios
pod install

Adding Dependency with Expo

Expo is supported in React Native SDK version 3.17.0 and above.

The React Native SDK does not support the Expo Go environment. Please use expo prebuild.

npm

npm install --save @hackler/react-native-sdk

yarn

When using Expo, you do not need to run link or pod install.

Android Configuration

Only enter the code below manually for React Native SDK version 3.25.0 and below.

Starting from SDK version 3.26.0, the following configuration is applied automatically. Skip this step and proceed to the next.

Refer to the code below and add registerActivityLifecycleCallbacks.

If there is no Application class created, create a new one and register it in AndroidManifest.xml.

Add the following code to your Application class under the onCreate function.

Java

import android.app.Application;
import io.hackle.android.HackleApp;

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    ...
    HackleApp.registerActivityLifecycleCallbacks(this);
    ...
  }
}

Kotlin

SDK Initialization

To use the SDK, you must pass the SDK Key to createInstance() to create a HackleReactNativeSDKClient and pass it to the HackleProvider that wraps your React application.

• You can find the SDK Key in SDK Integration Info on the Hackle Dashboard.

At initialization, the SDK fetches necessary data from the Hackle server and stores it. This typically takes only a few milliseconds. Rendering begins immediately after synchronization is complete.

import { createInstance, HackleProvider } from "@hackler/react-native-sdk";

// YOUR_APP_SDK_KEY 자리에 SDK 키를 넣습니다.
const hackleClient = createInstance("YOUR_APP_SDK_KEY");

const App = () => {
  return (
    <HackleProvider hackleClient={hackleClient}>
      <YourApp />
    </HackleProvider>
  );
};

Injecting User at Initialization

This feature is supported in React Native SDK version 3.31.0 and above.

You can initialize the SDK with user information included.

• If no user information is provided, the user information stored in local storage is used.

• If user information is provided, the user information stored in local storage is not used.

• If no user is injected and there is no user information in local storage, a user with the Hackle Device ID as the device id is used.

You can freely update user information after SDK initialization using the user information setter functions.

The user information injected at initialization and the user information stored in local storage are not merged.

e.g.) If userId: A is stored in storage and you inject deviceId: B at initialization, the user is set to userId: null, deviceId: B.

import { createInstance, HackleProvider } from "@hackler/react-native-sdk";

const config = {
  debug: true
};

const user = {
  userId: "YOUR_USER_ID"
}

const hackleClient = createInstance("YOUR_APP_SDK_KEY", config, user);

const App = () => {
  return (
    <HackleProvider hackleClient={hackleClient}>
      <YourApp />
    </HackleProvider>
  );
};

SDK Initialization Config

You can initialize the SDK with configuration options.

import { createInstance, HackleProvider } from "@hackler/react-native-sdk";

const config = {
  debug: true
};

const hackleClient = createInstance("YOUR_APP_SDK_KEY", config);

const App = () => {
  return (
    <HackleProvider hackleClient={hackleClient}>
      <YourApp />
    </HackleProvider>
  );
};

Option	Description	Default	Supported Version
exposureEventDedupIntervalMillis	Removes duplicate exposure events for the same A/B Test or Feature Flag distribution result triggered by the same user consecutively. Minimum: 1000 (1 second) Maximum: 3600000 (1 hour)	-1 (no dedup)	3.3.1+
debug	Prints logs for all features to the console and sends events immediately.	false	3.4.1+
pollingIntervalMillis	Periodically updates the configuration set in the Dashboard. Minimum: 60000 (60 seconds)	-1 (no periodic update)	3.6.0+
automaticAppLifecycleTracking	Whether to enable automatic app start/end tracking	true	3.30.0+
automaticScreenTracking	Whether to enable automatic screen tracking	true	3.30.0+
sessionPolicy	Configures session persistence and expiration conditions.	persistCondition: alwaysNewSession, timeoutMillis: 1800000 (30 min)	3.32.0+
optOutTracking	Whether opt-out is enabled. When enabled, all event sending is stopped.	false	3.32.0+
sessionTimeoutMillis (deprecated)	Sets the session expiration time. Please use sessionPolicy instead.	1800000 (30 min)	3.11.0+

Session Policy Configuration

You can configure session persistence and expiration conditions using the session policy.

import { createInstance, HackleProvider } from "@hackler/react-native-sdk";

const config = {
    sessionPolicy: {
        timeoutMillis: 3600000,
        persistCondition: 'nullToUserId'
    }
};

const hackleClient = createInstance("YOUR_APP_SDK_KEY", config);

const App = () => {
  return (
    <HackleProvider hackleClient={hackleClient}>
      <YourApp />
    </HackleProvider>
  );
};

Refreshing Dashboard Configuration

You can explicitly refresh the Dashboard configuration.

This function can only be called once every 60 seconds.

hackleClient.fetch();