FFL-900 Flags SDK

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"

benchmarks/android/app/build.gradle

@@ -129,5 +129,5 @@ dependencies {
 
     // Benchmark tools from dd-sdk-android are used for vitals recording
     // Remember to bump thid alongside the main dd-sdk-android dependencies
-    implementation("com.datadoghq:dd-sdk-android-benchmark-internal:3.4.0")
+    implementation("com.datadoghq:dd-sdk-android-benchmark-internal:3.5.0")
 }

example-new-architecture/App.tsx

@@ -9,10 +9,18 @@ import {
   DdLogs,
   DdTrace,
   TrackingConsent,
+  DdFlags,
 } from '@datadog/mobile-react-native';
-import React from 'react';
+import {DatadogOpenFeatureProvider} 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,
   SafeAreaView,
   ScrollView,
   StatusBar,
@@ -53,51 +61,62 @@ import {APPLICATION_ID, CLIENT_TOKEN, ENVIRONMENT} from './ddCredentials';
   config.uploadFrequency = UploadFrequency.FREQUENT;
   config.batchSize = BatchSize.SMALL;
 
-
+  // Initialize the Datadog SDK.
   await DdSdkReactNative.initialize(config);
+
+  // Enable Datadog Flags feature.
+  await DdFlags.enable();
+
+  // Set the provider with OpenFeature.
+  const provider = new DatadogOpenFeatureProvider();
+  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 isDarkMode = useColorScheme() === 'dark';
+  const greetingFlag = useObjectFlagDetails('rn-sdk-test-json-flag', {
+    greeting: 'Default greeting',
+  });
 
+  const isDarkMode = useColorScheme() === 'dark';
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
@@ -108,14 +127,21 @@ function App(): React.JSX.Element {
         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,
-          }}>
+
+        <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'}
+            Evaluation reason is <Text style={styles.highlight}>{greetingFlag.reason}</Text>.{'\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.
@@ -136,6 +162,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,
@@ -155,4 +211,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default App;
+export default AppWithProviders;

example-new-architecture/ios/Podfile

@@ -26,7 +26,7 @@ target 'DdSdkReactNativeExample' do
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
-  
+
   post_install do |installer|
     # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
     react_native_post_install(