Guides integration of FeatBit React Native SDK for client-side feature flag evaluation in React Native CLI and Expo mobile apps, covering installation, buildConfig, provider setup, and hook usage.
npx claudepluginhub joshuarweaver/cascade-code-devops-misc-1 --plugin featbit-featbit-skillsThis skill uses the workspace's default tool permissions.
Use for React Native mobile applications (iOS/Android) and Expo projects that evaluate feature flags on the client side.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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.
https://github.com/featbit/featbit-react-native-sdk
Copy and track progress:
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.
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).
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()).
asyncWithFbProvider vs withFbProvider or how buildConfig works in more detail.withFbConsumer, contextType), reactOptions.useCamelCaseFlagKeys, and bootstrap values — the React Native SDK inherits all of this behavior.