featbit-sdks-react-native

What this skill does

# 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:

```bash
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`:

```tsx
// 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**

```tsx
// 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

```tsx
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:

```tsx
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()`).

## Read Next Only When Needed

- Read [Initializing the SDK](https://github.com/featbit/featbit-react-native-sdk#initializing-the-sdk) when the user asks about `asyncWithFbProvider` vs `withFbProvider` or how `buildConfig` works in more detail.
- Read the [React Client SDK README — Consuming flags](https://github.com/featbit/featbit-react-client-sdk#consuming-flags) for full documentation on hooks, class components (`withFbConsumer`, `contextType`), `reactOptions.useCamelCaseFlagKeys`, and bootstrap values — the React Native SDK inherits all of this behavior.