ConfigDirector React Native SDK

React Native SDK for ConfigDirector, remote config and feature flags with typed values, JSON Schema validation, and safe renames of live flags. Start free, no card required.

Install

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

Install @react-native-async-storage/async-storage as well, so the SDK recognizes the app install across app starts and keeps the last values it received on the device. For a context without an id, ConfigDirector derives an identifier from an ID the SDK stores for the install, so the context keeps that identifier, and counts as one monthly active user, however often the app is opened. The last values are served on the next app start of the same context until live values arrive, so an app opened without a network shows them instead of the in-code default values. It is an optional peer dependency and works in Expo Go. Without it, every app start looks like a new install, nothing is kept on the device, and the SDK logs a warning.

npm install --save @react-native-async-storage/async-storage
# or in an Expo project
npx expo install @react-native-async-storage/async-storage

Retrieve a value

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

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

function Home() {
  const { value: darkMode } = useConfigValue("dark-mode", false);
  return <Text>dark-mode: {String(darkMode)}</Text>;
}

Full details are in the official documentation.

Test your code

@configdirector/react-native-sdk/testing creates a real client connected to an in-memory server that your test controls. Render the production ConfigDirectorProvider with its client prop, or install the test client for components that render their own provider, such as App.

import { act, render } from "@testing-library/react-native";
import { ConfigDirectorProvider } from "@configdirector/react-native-sdk";
import { createTestClient, installTestClient } from "@configdirector/react-native-sdk/testing";

const testClient = createTestClient({ values: { "dark-mode": true } });

const view = await render(
  <ConfigDirectorProvider client={testClient.client}>
    <Home />
  </ConfigDirectorProvider>,
);
await view.findByText("dark-mode: true");

await act(() => testClient.setValue("dark-mode", false));
view.getByText("dark-mode: false");

const uninstall = installTestClient(testClient);
await render(<App />);
uninstall();

The provider renders its children before initialization completes, so the first assertion uses findBy…. Wrap setValue, removeValue, and replaceValues in act(). React Native Testing Library 14 made render, fireEvent, and act asynchronous, so the example awaits them; the same code works with version 13. The test client also holds or fails initialize and updateContext, and records every context in contextUpdates. A provider never disposes a client it was given, removes its handlers and its AppState and NetInfo subscriptions when it unmounts, and does not initialize a client that is ready or initializing. Under the React Native Jest preset, AppState.addEventListener never calls its listener, so the provider never pauses on its own; a test that calls the listener runs the production pause and resume against the test client. The package and its dependency @noble/hashes are ESM, and the package's files are .mjs files, which the jest-expo and @react-native/jest-preset presets do not transform, so a Jest setup must let transformIgnorePatterns transform both packages and add a transform entry for .mjs files; the documentation shows the configuration for both presets. jest-expo requires @react-native/jest-preset as a peer dependency, so install it in either case. The test client never touches AsyncStorage. A test that builds a real client instead, through createClient or a provider given an sdkKey, logs the warning that AsyncStorage is missing and connects as a new install under either preset; add @babel/plugin-transform-dynamic-import to the Babel test environment for that client to use the AsyncStorage Jest mock instead.

Documentation

Refer to the official documentation for the React Native SDK.

There is also a quickstart guide for ConfigDirector and any of our SDKs.

Getting Help

• Ask a question in Discussions
• Contact support