Mobile SDKs

React Native

React Native SDK

Introduction

The React Native SDK is intended to be used by React Native mobile applications.

The minimum supported version of React Native is 0.75, and the minimum supported version of Expo is 52.

Installation

The SDK can be installed from NPM: https://www.npmjs.com/package/@configdirector/react-native-sdk

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

yarn add @configdirector/react-native-sdk

pnpm add @configdirector/react-native-sdk

bun add @configdirector/react-native-sdk

Configure and initialize the provider

Initialize the provider with your client SDK key:

main.tsx

import { View } from "react-native";
import AwesomeApp from "./AwesomeApp";
import { ConfigDirectorProvider } from "@configdirector/react-native-sdk";

export default function App() {
  return (
    <ConfigDirectorProvider
      sdkKey={"YOUR-CLIENT-SDK-KEY"}
      appName="MyAwesomeApp"
      appVersion="1.0.0">
      <View>
        <AwesomeApp />
      </View>
    </ConfigDirectorProvider>
  );
};

Additional configuration options

These configuration options can be passed in to the ConfigDirectorProvider.

`context`

The user context to be used during targeting rules evaluation:

main.tsx

import { View } from "react-native";
import AwesomeApp from "./AwesomeApp";
import { ConfigDirectorProvider } from "@configdirector/react-native-sdk";

export default function App() {
  return (
    <ConfigDirectorProvider
      sdkKey={"YOUR-CLIENT-SDK-KEY"}
      appName="MyAwesomeApp"
      appVersion="1.0.0"
      context={{ id: "12345", name: "Example User", traits: { region: "North America" } }}>
      <View>
        <AwesomeApp />
      </View>
    </ConfigDirectorProvider>
  );
}

By default, the SDK logs to the console and it is set to log warnings and errors only. You can configure a logger by either creating a ConfigDirector console logger with a different log level, or by implementing the ConfigDirectorLogger interface to provide your own logger. The interface can be used to create an adapter to another logging library.

Configure the ConfigDirector console logger to a different level:

main.tsx

import { View } from "react-native";
import AwesomeApp from "./AwesomeApp";
import { ConfigDirectorProvider, createConsoleLogger } from "@configdirector/react-native-sdk";

export default function App() {
  return (
    <ConfigDirectorProvider
      sdkKey={"YOUR-CLIENT-SDK-KEY"}
      appName="MyAwesomeApp"
      appVersion="1.0.0"
      logger={createConsoleLogger("debug")}>
      <View>
        <AwesomeApp />
      </View>
    </ConfigDirectorProvider>
  );
}

Implement your own logger adapter:

main.tsx

import { View } from "react-native";
import AwesomeApp from "./AwesomeApp";
import { ConfigDirectorProvider, ConfigDirectorLogger } from "@configdirector/react-native-sdk";

export default function App() {
  return (
    <ConfigDirectorProvider
      sdkKey={"YOUR-CLIENT-SDK-KEY"}
      appName="MyAwesomeApp"
      appVersion="1.0.0"
      logger={myLogger}>
      <View>
        <AwesomeApp />
      </View>
    </ConfigDirectorProvider>
  );
}

`netInfoSubscribe`

Allows providing a subscription function with the same signature as NetInfo.addEventListener from @react-native-community/netinfo. This options can be used to enable immediate reconnection when the device regains network connectivity instead of waiting for the next exponential-backoff retry.

For example, if a user lost network connectivity for several minutes, once they regain network connectivity there may still be a delay of minutes for the exponential backoff retry to catch up. In most cases, this is not needed and the standard retry with exponential backoff is sufficient. However, if your use case needs immediate reconnection, this can be a useful option.

main.tsx

import { View } from "react-native";
import AwesomeApp from "./AwesomeApp";
import { ConfigDirectorProvider, ConfigDirectorLogger } from "@configdirector/react-native-sdk";
import NetInfo from '@react-native-community/netinfo';

export default function App() {
  return (
    <ConfigDirectorProvider
      sdkKey={"YOUR-CLIENT-SDK-KEY"}
      appName="MyAwesomeApp"
      appVersion="1.0.0"
      netInfoSubscribe={NetInfo.addEventListener}>
      <View>
        <AwesomeApp />
      </View>
    </ConfigDirectorProvider>
  );
};

`url`

The base URL used to connect to ConfigDirector services. This should only be provided if your environment requires you to configure a proxy server in order to connect to ConfigDirector services.

Retrieve config values

Retrieve a config value with the useConfigValue hook:

YourComponent.tsx

import { useConfigValue } from "@configdirector/react-native-sdk";

function YourComponent() {
  const { value } = useConfigValue("my-config-key", false);

  return <p>my-config-key: {value}</p>;
}

export default YourComponent;

You can also determine if the client is still initializing. This can be useful in the event of a slow connection where retrieving the initial config values may be slow, so rather than transition from the in-code default value to the evaluated value, you can show a loading state until the client is ready and config values are evaluated:

YourComponent.tsx

import { useConfigValue } from "@configdirector/react-native-sdk";

function YourComponent() {
  const { value, loading } = useConfigValue("my-config", "default value");

  if (loading) {
    return <p>Loading...</p>;
  } else {
    return <p>My config value: {value}</p>;
  }
}

export default YourComponent;

Update the user context

A user context can be provided when initializing the provider:

main.tsx

import { View } from "react-native";
import AwesomeApp from "./AwesomeApp";
import { ConfigDirectorProvider } from "@configdirector/react-native-sdk";

export default function App() {
  return (
    <ConfigDirectorProvider
      sdkKey={"YOUR-CLIENT-SDK-KEY"}
      appName="MyAwesomeApp"
      appVersion="1.0.0"
      context={{ id: "12345", name: "Example User", traits: { region: "North America" } }}>
      <View>
        <AwesomeApp />
      </View>
    </ConfigDirectorProvider>
  );
};

The user context can also be updated with the useContext hook:

YourComponent.tsx

import { useConfigValue, useContext } from "@configdirector/react-native-sdk";

function YourComponent() {
  const { value } = useConfigValue("my-config-key", false);
  const { updateContext } = useContext();

  useEffect(() => {
    updateContext({
      id: "654321",
      name: "Another User",
      traits: {
        region: "Australia",
      },
    });
  }, []);

  return <p>my-config-key: {value}</p>;
}

export default YourComponent;

In client SDKs (browser and mobile), updating the user context re-establishes a new connection to ConfigDirector servers with the new context. While the new connection is in flight, config values will continue to evaluate to the currently cached values from the prior user context.

`useClient` hook

In the event that you need to have access to the underlying Javascript ConfigDirectorClient instance for more complex behaviors, you can access the instance via the useClient hook:

YourComponent.tsx

import { useClient } from "@configdirector/react-native-sdk";

function YourComponent() {
  const { client } = useClient();

  // Utilize the client for more involved logic

  return <p>A more complex component</p>;
}

export default YourComponent;

Proceed with caution when using the useClient hook. The useConfigValue and useContext hooks manage listeners and cleanup automatically. However, if you make use of the useClient hook, you must manage cleaning up any listeners yourself.
Additionally, any calls to dispose, unwatch, or unwatchAll on the client instance can have unintended side effects and may result in subtle bugs.

Vue

Vue SDK

Next.js

Next.js SDK