FeatBit Client-Side SDK for React Native

Introduction

This is the React Native SDK for the feature management platform FeatBit.

Be aware, this is a client side SDK, it is intended for use in a single-user context, which can be mobile, desktop or embeded applications. This SDK is designed to be used for React Native projects.

The React Native SDK is based on the React Client SDK
The React Native SDK builds on FeatBit's React Client SDK (the latter depends on the JavaScript client SDK) to provide a better integration for use in React Native applications. As a result, much of the React Client SDK and JavaScript SDK functionality is also available for the React Native SDK to use.

Getting started

Install

npm install @featbit/react-native-sdk

Prerequisite

Before using the SDK, you need to obtain the environment secret and SDK URLs.

Follow the documentation below to retrieve these values

• How to get the environment secret
• How to get the SDK URLs

Quick Start

The following code demonstrates:

1. Initialize the SDK
2. Evaluate flag with userFlags hook

// src/TestComponent.tsx
import React from 'react';
import {Text, View} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {useFlags} from '@featbit/react-client-sdk';

export default function TestCompoment({isDarkMode}: {isDarkMode: boolean}) {
    const {robot} = useFlags();
    return (
        <View
            style={[
                {
                    marginTop: 32,
                    paddingHorizontal: 24,
                },
            ]}>
            {robot === 'AlphaGo' && (
                <Text
                    style={[
                        {
                            color: isDarkMode ? Colors.white : Colors.black,
                            textAlign: 'center',
                            fontSize: 30,
                            fontWeight: '700',
                        },
                    ]}>
                    AlphaGo 🤖
                </Text>
            )}
        </View>
    );
}

// App.tsx
import React from 'react';
import {
    SafeAreaView,
    useColorScheme
} from 'react-native';
import type { PropsWithChildren } from 'react';
import {buildConfig, withFbProvider} from '@featbit/react-native-sdk';
import TestCompoment from './src/TestComponent.tsx';

function App(): React.JSX.Element {
    const isDarkMode = useColorScheme() === 'dark';

    const backgroundStyle = {
        backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
        <SafeAreaView style={backgroundStyle}>
            <TestCompoment isDarkMode={isDarkMode} />
        </SafeAreaView>
    )
}

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);

Examples

• React Native APP
• Expo Go APP

SDK

The React Native SDK depends on the React Client SDK, please refer to the React Client SDK for more information. The Main difference between the React Client SDK and the React Native SDK is the way the SDK is initialized.

Initializing the SDK

After you install the dependency, initialize the React SDK. You can do this in one of two ways:

• Using the asyncWithFbProvider function
• Using the withFbProvider function

Before using either of the above ways, you need to create a IOption object and please make sure that you have called the buildConfig function with the IOption object as an argument.

function App(): React.JSX.Element {
    // The 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'
};

// This line is needed to initialize the SDK
const config = buildConfig({options});

export default withFbProvider(config)(App);

Lifecycle-aware streaming

When using streaming (dataSyncMode: 'streaming'), the SDK is lifecycle-aware out of the box. A WebSocket does not survive iOS background suspension or Android doze, and the OS may never deliver a clean close, so a naive client keeps pinging a dead socket and reconnects blindly on resume. To avoid this, the SDK drops the connection shortly after the app is backgrounded or goes offline and re-establishes it — with an immediate resync — on foreground / when connectivity returns.

This is driven by React Native's AppState and is enabled automatically; there is nothing to wire up. Brief interruptions (the iOS app switcher, momentary network blips) are debounced so they don't churn the connection. If the app never backgrounds and never reports a network change, behaviour is identical to an always-on connection.

Network-loss detection is optional. If you also install @react-native-community/netinfo, the stream additionally pauses on network loss and resumes on reconnect; without it, AppState alone drives the behaviour.

npm install @react-native-community/netinfo