This document provides steps for integrating your application with Hackle React Native SDK. SDK Integration is a must in order to use the functions we provide.

Follow these steps to quickly integrate the SDK:

1. Add Dependencies
2. Initialize the SDK
3. User Configuration
4. Event Tracking
5. A/B Testing
6. Feature Flags

1. Add Dependencies

Think of this step as importing and installing our SDK into your codebase. To use our Hackle services add the following dependency code and import our SDK.

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

react-native link

cd ios
pod install

yarn add @hackler/react-native-sdk

react-native link

cd ios
pod install

📘

Rebuild your app after Step 1

React Native SDK includes Android and iOS SDKs.
The app that is being tested has to be newly built in order to complete the Step 1.

2. Initialize the SDK

Once you have imported the dependencies, in order to start using the Hackle SDK you must initialize the SDK. During this step, we get the information needed for SDK integration from the Hackle Server and store it in the SDK.

You need to pass the SDK key to createInstance() to create a HackleReactNativeSDKClient and pass it on to the HackleProvider that wraps the React application.

• The SDK key can be found in the SDK integration in the dashboard of Hackle service.
• Communication for data synchronization with the Hackle server is carried out during the application initialization stage. Typically, this only takes a few milliseconds. Rendering begins immediately after synchronization is complete.

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

// Enter the SDK Key in the YOUR_APP_SDK_KEY.
const hackleClient = createInstance("YOUR_APP_SDK_KEY");

const App: () => React$Node = () => {
  return (
		<HackleProvider hackleClient={hackleClient}>
		  <YourApp />
		</HackleProvider>
	);
};

Add Settings

You can add additional settings in SDK initialization

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

// intialize with configs
const config = {
  debug: true
};

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

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

3. User Configuration

You can configure user information in the SDK.

Setting User ID

If the user logs in, you can call setUserId to set the ID of the logged-in user.

• You only need to set it once when the user logs in.
• For users who are already logged in, you can call it when retrieving their login information.

const userId = ... // ID of the logged-in user (e.g., member number, user ID)
hackleClient.setUserId(userId);

Setting User Properties

You can use user properties such as email address, location, age, and membership level. You can use the setUserProperty and setUserProperties methods to set user properties.

import { PropertyOperationsBuilder } from "@hackler/react-native-sdk"

const operations = new PropertyOperationsBuilder()
    .set("age", 42)
    .set("grade", "GOLD")
    .build();

hackleClient.updateUserProperties(operations);

Resetting User Configuration on Logout

If the user logs out, you can call resetUser to reset the previously set user information. The following information will be reset:

• User ID
• User properties

hackleClient.resetUser();

4. Event Tracking

You can send user actions as events. The sent events are used for A/B test analysis, data analysis, etc. For example, if a user performs a purchase action, you can send an event as follows:

// Collecting an event
const track = useTrack()
const event = { key: "purchase" }

<Button onClick={() => track(event)}>구매</Button>


// Collecting an event with properties
const track = useTrack()
const event = {
  key: "purchase",
  properties: {
    amount: 4200,
    pay_method: "CARD",
    is_discount: false
  }
}

<Button onClick={() => track(event)}>purchase</Button>

Viewing Sent Events

You can view the sent events in the Event Management menu on the dashboard. It typically takes around 60 seconds for the events to appear on the dashboard after being sent.

5. A/B Testing

To implement A/B testing, you can distribute users into test groups and write logic based on the assigned group. You can achieve this by using the HackleExperiment component or the useVariation hook, where you pass the experiment key to retrieve the distribution result.

Experiment Key: A unique identifier for each A/B test. It is automatically assigned when creating an A/B test.

function App() {
  return (
  // Determines the test group to be exposed to the user in an A/B test with variation key 42.
  // If unable to determine, it returns test group A.
    <HackleExperiment experimentKey={42}> 
      <HackleVariation variation={"A"}>  // logic for assigned group
        <AwesomeFeature />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <SuperAwesomeFeature />
      </HackleVariation>
    </HackleExperiment>
  )
}

function App() {
  // Determines the test group to be exposed to the user in an A/B test with variation key 42.
  // If unable to determine, it returns test group A.
  const variation = useVariation(42)
  
  // logic for assigned group
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}

Viewing Distribution Results

You can check the distribution results in the Real-Time Status tab on the A/B test's details page. It typically takes around 60 seconds for the distribution results to appear on the dashboard after being distributed.

6. Feature Flags

To implement feature flags where you can write different logic based on the on/off state, you can use the HackleFeature component or the useFeature hook. By passing the feature flag key, you can retrieve the on/off status.

Feature Flag Key: A unique identifier for each feature flag. It is automatically assigned when creating a feature flag.

function App() {
  return (
  // Determines the user's status in a feature flag with key 42.
  // If unable to determine, it returns false (off state).
    <Feature featureKey={42}>
      {(featureOn) =>
        featureOn ? (
          <SuperAwesomeFeature /> // On state logic
        ) : (
          <AwesomeFeature /> // Off state logic
        )
      }
    </Feature>
  )
}

function App() {
  // Determines the user's status in a feature flag with key 42.
  // If unable to determine, it returns false (off state).
  const featureOn = useFeature(42)
  return (
    <>
    {
      featureOn ? (
        <SuperAwesomeFeature /> // On state logic
      ) : (
        <AwesomeFeature /> // Off state logic
      )
    }
    </>
  )
}