React Native SDK For Harness Feature Flags

Intro
Requirements
Quickstart
Further Reading
Build Instructions

Intro

Use this README to get started with our Feature Flags (FF) SDK for React Native. This guide outlines the basics of getting started with the SDK and provides a full code sample for you to try out. This sample doesn’t include configuration options, for in depth steps and configuring the SDK, for example, disabling streaming or using our Relay Proxy, see the React Native SDK Reference.

Requirements

React 16 or newer
React Native 0.63 or newer

Quickstart

To follow along with our test code sample, make sure you’ve:

Created a Feature Flag on the Harness Platform called harnessappdemodarkmode
Created a Client SDK key and made a copy of it

Install the SDK

Install the React Native SDK by adding it to your project's package.json file:

"@harnessio/ff-react-native-client-sdk": "^1.0.2"

Or install using npm:

$ npm install --save @harnessio/ff-react-native-client-sdk

For iOS, run the following commands from project root folder

$ cd ios
$ pod install

Code Sample

The following is a complete code example with a fresh React-Native project that you can use to test the harnessappdemodarkmode Flag you created on the Harness Platform. When you run the code it will:

Connect to the FF service.
Report the value of the Flag in the mobile simulator.

Install expo.

npm install -g expo-cli

Using Expo, initialize a project. For the best experience, select Minimal as the template when prompted.

expo init SampleProject
cd SampleProject

Add the Harness React Native SDK to the package.json under the dependencies section.

"@harnessio/ff-react-native-client-sdk": "^1.0.2"

Replace the code in App.js with the following Sample Code, and replace apiKey with your Client SDK Key.

import cfClientInstance, {CfConfiguration, CfTarget} from '@harnessio/ff-react-native-client-sdk';

export default function App() {
  const flagName = 'harnessappdemodarkmode';

  const [client, setClient] = useState(null);
  const [flagValue, setFlagValue] = useState(null);

  async function initializeClient() {
    let cfClient = cfClientInstance;
    let cfConfig = new CfConfiguration();
    cfConfig.streamEnabled = true;

    const cfTarget = new CfTarget();
    cfTarget.identifier = 'Harness RN Sample App'

    const apiKey = "your-client-sdk-key";

    try {
      await cfClientInstance.initialize(apiKey, cfConfig, cfTarget);
    } catch (err) {
      console.log(err);
    }
    setClient(cfClient);
  }

  async function evalFlag() {
    let res = await client.boolVariation(flagName, false);
    setFlagValue(res.value);
  }

  useEffect(() => {
    if (client == null) {
      initializeClient();
    } else {
      evalFlag();
    }
  });

  return (
    <View style={styles.container}>
      <Text>
        Feature flag '{flagName}' is {JSON.stringify(flagValue)}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Running the example

Start your desired simulator, either Android or iOS and run

yarn run ios

expo run:ios

Replace ios above with android if running on an Android simulator.

Additional Reading

For further examples and config options, see the React Native SDK Reference.

For more information about Feature Flags, see our Feature Flags documentation.

Harness is a feature management platform that helps teams to build better software and to test features quicker.

harness / ff-react-native-client-sdk