FFL-908 Implement Flags OpenFeature provider for React Native

LICENSE-3rdparty.csv

@@ -32,6 +32,8 @@ dev,react-native-webview,MIT,"Copyright (c) 2015-present, Facebook, Inc."
 dev,react-test-renderer,MIT,"Copyright (c) Facebook, Inc. and its affiliates."
 dev,typescript,Apache-2.0,"Copyright Microsoft Corporation"
 dev,genversion,MIT,"Copyright (c) 2021 Akseli Palén"
+dev,@openfeature/core,Apache-2.0,"Copyright (c) The OpenFeature Authors"
+prod,@openfeature/web-sdk,Apache-2.0,"Copyright (c) The OpenFeature Authors"
 prod,chokidar,MIT,"Copyright (c) 2012 Paul Miller (https://paulmillr.com), Elan Shanker"
 prod,fast-glob,MIT,"Copyright (c) Denis Malinochkin"
 prod,svgo,MIT,"Copyright (c) Kir Belevich"

example-new-architecture/App.tsx

@@ -11,7 +11,13 @@ import {
   RumConfiguration,
   DdFlags,
 } from '@datadog/mobile-react-native';
-import React from 'react';
+import {DatadogProvider} from '@datadog/mobile-react-native-openfeature';
+import {
+  OpenFeature,
+  OpenFeatureProvider,
+  useObjectFlagDetails,
+} from '@openfeature/react-sdk';
+import React, {Suspense} from 'react';
 import type {PropsWithChildren} from 'react';
 import {
   ActivityIndicator,
@@ -35,119 +41,102 @@ import {
 import {APPLICATION_ID, CLIENT_TOKEN, ENVIRONMENT} from './ddCredentials';
 
 (async () => {
-  const config = new CoreConfiguration(
-    CLIENT_TOKEN,
-    ENVIRONMENT,
-  );
+  const config = new CoreConfiguration(CLIENT_TOKEN, ENVIRONMENT);
   config.verbosity = SdkVerbosity.DEBUG;
   config.uploadFrequency = UploadFrequency.FREQUENT;
   config.batchSize = BatchSize.SMALL;
+
+  // Enable RUM.
   config.rumConfiguration = new RumConfiguration(
     APPLICATION_ID,
     true,
     true,
-    true
-  )
+    true,
+  );
   config.rumConfiguration.sessionSampleRate = 100;
   config.rumConfiguration.telemetrySampleRate = 100;
 
+  // Initialize the Datadog SDK.
   await DdSdkReactNative.initialize(config);
+
+  // Enable Datadog Flags feature.
+  await DdFlags.enable();
+
+  // Set the provider with OpenFeature.
+  const provider = new DatadogProvider();
+  OpenFeature.setProvider(provider);
+
+  // Datadog SDK usage examples.
   await DdRum.startView('main', 'Main');
   setTimeout(async () => {
     await DdRum.addTiming('one_second');
   }, 1000);
   await DdRum.addAction(RumActionType.CUSTOM, 'custom action');
+
   await DdLogs.info('info log');
+
   const spanId = await DdTrace.startSpan('test span');
   await DdTrace.finishSpan(spanId);
 })();
 
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
+function AppWithProviders() {
+  React.useEffect(() => {
+    const user = {
+      id: 'user-123',
+      favoriteFruit: 'apple',
+    };
+
+    OpenFeature.setContext({
+      targetingKey: user.id,
+      favoriteFruit: user.favoriteFruit,
+    });
+  }, []);
 
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
   return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
+    <Suspense
+      fallback={
+        <SafeAreaView style={{height: '100%', justifyContent: 'center'}}>
+          <ActivityIndicator />
+        </SafeAreaView>
+      }>
+      <OpenFeatureProvider suspendUntilReady>
+        <App />
+      </OpenFeatureProvider>
+    </Suspense>
   );
 }
 
 function App(): React.JSX.Element {
-  const [isInitialized, setIsInitialized] = React.useState(false);
-
-  React.useEffect(() => {
-    (async () => {
-      // This is a blocking async app initialization effect.
-      // It simulates the way most React Native applications are initialized.
-      await DdFlags.enable();
-      const client = DdFlags.getClient();
-
-      const userId = 'test-user-1';
-      const userAttributes = {
-        country: 'US',
-      };
-
-      await client.setEvaluationContext({targetingKey: userId, attributes: userAttributes});
-
-      setIsInitialized(true);
-    })().catch(console.error);
-  }, []);
+  const greetingFlag = useObjectFlagDetails('rn-sdk-test-json-flag', {
+    greeting: 'Default greeting',
+  });
 
   const isDarkMode = useColorScheme() === 'dark';
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  if (!isInitialized) {
-    return (
-      <SafeAreaView style={{height: '100%', justifyContent: 'center'}}>
-        <ActivityIndicator />
-      </SafeAreaView>
-    );
-  }
-
-  // TODO: [FFL-908] Use OpenFeature SDK instead of a manual client call.
-  const testFlagKey = 'rn-sdk-test-json-flag';
-  const testFlag = DdFlags.getClient().getObjectValue(testFlagKey, {greeting: "Default greeting"}); // https://app.datadoghq.com/feature-flags/bcf75cd6-96d8-4182-8871-0b66ad76127a?environmentId=d114cd9a-79ed-4c56-bcf3-bcac9293653b
-
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar
         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
         backgroundColor={backgroundStyle.backgroundColor}
       />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
+      <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
         <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Feature Flags">
-            Flag value for <Text style={styles.highlight}>{testFlagKey}</Text> is{'\n'}
-            <Text style={styles.highlight}>{JSON.stringify(testFlag)}</Text>
+
+        <View style={{backgroundColor: isDarkMode ? Colors.black : Colors.white}}>
+          <Section title={greetingFlag.value.greeting}>
+            The title of this section is based on the{' '}
+            <Text style={styles.highlight}>{greetingFlag.flagKey}</Text> feature
+            flag.{'\n\n'}
+            If it's different from "Default greeting", then it is coming from
+            the feature flag evaluation.{'\n\n'}
+            Inspect <Text style={styles.highlight}>greetingFlag</Text> in{' '}
+            <Text style={styles.highlight}>App.tsx</Text> for more evaluation
+            details.
           </Section>
+
           <Section title="Step One">
             Edit <Text style={styles.highlight}>App.tsx</Text> to change this
             screen and then come back to see your edits.
@@ -168,6 +157,36 @@ function App(): React.JSX.Element {
   );
 }
 
+type SectionProps = PropsWithChildren<{
+  title: string;
+}>;
+
+function Section({children, title}: SectionProps): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+  return (
+    <View style={styles.sectionContainer}>
+      <Text
+        style={[
+          styles.sectionTitle,
+          {
+            color: isDarkMode ? Colors.white : Colors.black,
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   sectionContainer: {
     marginTop: 32,
@@ -187,4 +206,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default App;
+export default AppWithProviders;

example-new-architecture/package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@datadog/mobile-react-native": "workspace:packages/core",
+    "@datadog/mobile-react-native-openfeature": "workspace:packages/react-native-openfeature-provider",
+    "@openfeature/react-sdk": "^1.1.0",
     "react": "18.3.1",
     "react-native": "0.76.9"
   },

example/package.json

@@ -15,6 +15,7 @@
         "@datadog/mobile-react-native-session-replay": "workspace:packages/react-native-session-replay",
         "@datadog/mobile-react-native-webview": "workspace:packages/react-native-webview",
         "@datadog/mobile-react-navigation": "workspace:packages/react-navigation",
+        "@openfeature/react-sdk": "^1.2.0",
         "@react-native-async-storage/async-storage": "^2.1.2",
         "@react-native-community/cli": "15.0.1",
         "@react-native-community/cli-platform-android": "15.0.1",

example/src/App.tsx

@@ -7,11 +7,12 @@ import AboutScreen from './screens/AboutScreen';
 import style from './screens/styles';
 import { navigationRef } from './NavigationRoot';
 import { DdRumReactNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-navigation';
-import {DatadogProvider, DatadogProviderConfiguration, FileBasedConfiguration, RumConfiguration} from '@datadog/mobile-react-native'
+import { DatadogProvider, DatadogProviderConfiguration, FileBasedConfiguration, RumConfiguration, DdFlags, TrackingConsent } from '@datadog/mobile-react-native'
+import { DatadogProvider as OpenFeatureDatadogProvider } from '@datadog/mobile-react-native-openfeature';
+import { OpenFeature, OpenFeatureProvider } from '@openfeature/react-sdk';
 import { Route } from "@react-navigation/native";
 import { NestedNavigator } from './screens/NestedNavigator/NestedNavigator';
 import { getDatadogConfig, onDatadogInitialization } from './ddUtils';
-import { TrackingConsent } from '@datadog/mobile-react-native';
 import { NavigationTrackingOptions, ParamsTrackingPredicate, ViewTrackingPredicate } from '@datadog/mobile-react-navigation/src/rum/instrumentation/DdRumReactNavigationTracking';
 
 const Tab = createBottomTabNavigator();
@@ -21,15 +22,15 @@ const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(ro
   return "Custom RN " + trackedName;
 }
 
-const viewTrackingPredicate: ViewTrackingPredicate = function customViewTrackingPredicate(route: Route<string, any | undefined>) { 
+const viewTrackingPredicate: ViewTrackingPredicate = function customViewTrackingPredicate(route: Route<string, any | undefined>) {
   if (route.name === "AlertModal") {
     return false;
   }
 
   return true;
 }
 
-const paramsTrackingPredicate: ParamsTrackingPredicate = function customParamsTrackingPredicate(route: Route<string, any | undefined>) { 
+const paramsTrackingPredicate: ParamsTrackingPredicate = function customParamsTrackingPredicate(route: Route<string, any | undefined>) {
   const filteredParams: any = {};
   if (route.params?.creditCardNumber) {
     filteredParams["creditCardNumber"] = "XXXX XXXX XXXX XXXX";
@@ -57,9 +58,9 @@ const configuration = getDatadogConfig(TrackingConsent.GRANTED)
 
 // 3.- File based configuration from .json and custom mapper setup
 // const configuration = new FileBasedConfiguration( {
-//   configuration: require("../datadog-configuration.json").configuration, 
-//   errorEventMapper: (event) => event, 
-//   resourceEventMapper: (event) => event, 
+//   configuration: require("../datadog-configuration.json").configuration,
+//   errorEventMapper: (event) => event,
+//   resourceEventMapper: (event) => event,
 //   actionEventMapper: (event) => event});
 
 // 4.- File based configuration from the native side (using initFromNative)
@@ -68,26 +69,38 @@ const configuration = getDatadogConfig(TrackingConsent.GRANTED)
 // const configuration = new DatadogProviderConfiguration("fake_value", "fake_value");
 // configuration.rumConfiguration = new RumConfiguration("fake_value")
 
-export default function App() {
+const handleDatadogInitialization = async () => {
+  onDatadogInitialization();
+
+  // Enable Datadog Flags feature.
+  await DdFlags.enable();
 
+  // Set the provider with OpenFeature.
+  const provider = new OpenFeatureDatadogProvider();
+  OpenFeature.setProvider(provider);
+}
+
+export default function App() {
   return (
-    <DatadogProvider configuration={configuration} onInitialization={onDatadogInitialization}>
-      <NavigationContainer ref={navigationRef} onReady={() => {
-        DdRumReactNavigationTracking.startTrackingViews(
-          navigationRef.current,
-          navigationTrackingOptions)
-      }}>
-        <Tab.Navigator screenOptions={{
-          tabBarLabelStyle: style.tabLabelStyle,
-          tabBarStyle: style.tabItemStyle,
-          tabBarIcon: () => null
+    <DatadogProvider configuration={configuration} onInitialization={handleDatadogInitialization}>
+      <OpenFeatureProvider>
+        <NavigationContainer ref={navigationRef} onReady={() => {
+          DdRumReactNavigationTracking.startTrackingViews(
+            navigationRef.current,
+            navigationTrackingOptions)
         }}>
-          <Tab.Screen name="Home" component={MainScreen} />
-          <Tab.Screen name="Error" component={ErrorScreen} />
-          <Tab.Screen name="About" component={AboutScreen} />
-          <Tab.Screen name="Nested" component={NestedNavigator} />
-        </Tab.Navigator>
-      </NavigationContainer>
+          <Tab.Navigator screenOptions={{
+            tabBarLabelStyle: style.tabLabelStyle,
+            tabBarStyle: style.tabItemStyle,
+            tabBarIcon: () => null
+          }}>
+            <Tab.Screen name="Home" component={MainScreen} />
+            <Tab.Screen name="Error" component={ErrorScreen} />
+            <Tab.Screen name="About" component={AboutScreen} />
+            <Tab.Screen name="Nested" component={NestedNavigator} />
+          </Tab.Navigator>
+        </NavigationContainer>
+      </OpenFeatureProvider>
     </DatadogProvider>
   )
 }