FeatBit React Native SDK

When to Use This Skill

Use for React Native mobile applications (iOS/Android) and Expo projects that evaluate feature flags on the client side.

Why client SDK: Connects from the mobile device via WebSocket, syncs flag data for the current user, and evaluates flags locally. Supports both React Native CLI and Expo Go.

Key difference from the React web SDK: initialization requires a mandatory buildConfig() call before the provider, and the initialization package (@featbit/react-native-sdk) is separate from the hooks package (@featbit/react-client-sdk). User fields are also different: keyId and name (not id and userName).

Do not use for React web browser apps (use featbit-sdks-react) or any server-side context.

Source

https://github.com/featbit/featbit-react-native-sdk

Setup Workflow

Copy and track progress:

Step 1: Install the package
Step 2: Build config and wrap the app with the provider
Step 3: Consume feature flags in a component

Step 1: Install the package

Run:

npm install @featbit/react-native-sdk

Step 2: Build config and wrap the app

Call buildConfig() with the options object, then pass the result to withFbProvider:

// App.tsx
import {buildConfig, withFbProvider} from '@featbit/react-native-sdk';

function App(): React.JSX.Element {
  // App component code
}

const options = {
  user: {
    name: 'the user name',
    keyId: 'fb-demo-user-key',
    customizedProperties: []
  },
  sdkKey: 'YOUR ENVIRONMENT SECRET',
  streamingUri: 'THE STREAMING URL',
  eventsUrl: 'THE EVENTS URL'
};

export default withFbProvider(buildConfig({options}))(App);

Why buildConfig: React Native requires this adapter step to normalize the config before passing it to the provider. Without it, the provider will not initialize correctly.

Step 3: Consume flags in a component

// src/TestComponent.tsx
import {useFlags} from '@featbit/react-client-sdk';

export default function TestComponent({isDarkMode}: {isDarkMode: boolean}) {
  const {robot} = useFlags();
  return robot === 'AlphaGo' ? <Text>AlphaGo</Text> : null;
}

Important: useFlags is imported from @featbit/react-client-sdk, not from @featbit/react-native-sdk.

If flags return fallback values unexpectedly, verify sdkKey, streamingUri, and eventsUrl.

Feature Flag Evaluation

import {useFlags, useFbClient} from '@featbit/react-client-sdk';

const MyComponent = () => {
  const {robot, flag1} = useFlags();

  // Or access all flags at once:
  // const flags = useFlags();
  // flags['my-flag-key']  // bracket notation for keys with dashes

  const fbClient = useFbClient();  // underlying JS client for advanced operations

  return <Text>{robot}</Text>;
};

useFlags() returns all flags — destructure for known keys or use bracket notation. Both hooks are from @featbit/react-client-sdk. Use useFbClient() when you need the underlying client (e.g., await fbClient.identify(user) to switch users after login).

User Custom Properties

React Native SDK uses keyId and name (not id and userName like the React web SDK). Add custom attributes in the customizedProperties array:

const options = {
  user: {
    keyId: 'user-key-123',
    name: 'Jane',
    customizedProperties: [
      { name: 'age', value: '25' },
      { name: 'country', value: 'US' }
    ]
  },
  sdkKey: 'YOUR ENVIRONMENT SECRET',
  streamingUri: 'THE STREAMING URL',
  eventsUrl: 'THE EVENTS URL'
};

To switch users after initialization, call await fbClient.identify(user) with an updated user object (via useFbClient()).