chore: rn sdk use localstorage for bootstrapping

packages/sdk/react-native/example/App.tsx

@@ -5,11 +5,10 @@ import { LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-clie
 import Welcome from './src/welcome';
 
 const featureClient = new ReactNativeLDClient(MOBILE_KEY);
-const context = { kind: 'user', key: 'test-user-1' };
 
 const App = () => {
   return (
-    <LDProvider client={featureClient} context={context}>
+    <LDProvider client={featureClient}>
       <Welcome />
     </LDProvider>
   );

packages/sdk/react-native/example/package.json

@@ -17,6 +17,7 @@
     "clean": "expo prebuild --clean && yarn cache clean && rm -rf node_modules && rm -rf .expo"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "1.18.2",
     "expo": "~49.0.16",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.7.1",

packages/sdk/react-native/example/src/welcome.tsx

@@ -1,28 +1,46 @@
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { useState } from 'react';
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import {
-  useBoolVariation,
-  useLDClient,
-  useLDDataSourceStatus,
-} from '@launchdarkly/react-native-client-sdk';
+import { useBoolVariation, useLDClient } from '@launchdarkly/react-native-client-sdk';
 
 export default function Welcome() {
-  const { error, status } = useLDDataSourceStatus();
-  const flag = useBoolVariation('dev-test-flag', false);
+  const [flagKey, setFlagKey] = useState('dev-test-flag');
+  const [userKey, setUserKey] = useState('');
+  const flagValue = useBoolVariation(flagKey, false);
   const ldc = useLDClient();
 
-  const login = () => {
-    ldc.identify({ kind: 'user', key: 'test-user-2' });
+  const onIdentify = () => {
+    ldc
+      .identify({ kind: 'user', key: userKey })
+      .catch((e: any) => console.error(`error identifying ${userKey}: ${e}`));
   };
 
   return (
     <View style={styles.container}>
       <Text>Welcome to LaunchDarkly</Text>
-      <Text>status: {status ?? 'not connected'}</Text>
-      {error ? <Text>error: {error.message}</Text> : null}
-      <Text>devTestFlag: {`${flag}`}</Text>
+      <Text>
+        {flagKey}: {`${flagValue}`}
+      </Text>
       <Text>context: {JSON.stringify(ldc.getContext())}</Text>
-      <Button title="Login" onPress={login} />
+      <TextInput
+        style={styles.input}
+        autoCapitalize="none"
+        onChangeText={setUserKey}
+        onSubmitEditing={onIdentify}
+        value={userKey}
+      />
+      <TouchableOpacity onPress={onIdentify} style={styles.buttonContainer}>
+        <Text style={styles.buttonText}>identify</Text>
+      </TouchableOpacity>
+      <TextInput
+        style={styles.input}
+        autoCapitalize="none"
+        onChangeText={setFlagKey}
+        value={flagKey}
+      />
+      <TouchableOpacity style={styles.buttonContainer}>
+        <Text style={styles.buttonText}>get flag value</Text>
+      </TouchableOpacity>
     </View>
   );
 }
@@ -33,9 +51,25 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+    padding: 10,
+  },
+  buttonContainer: {
+    elevation: 8,
+    backgroundColor: '#009688',
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginBottom: 20,
+  },
+  buttonText: {
+    fontSize: 18,
+    color: '#fff',
+    fontWeight: 'bold',
+    alignSelf: 'center',
+    textTransform: 'uppercase',
   },
 });

packages/sdk/react-native/link-dev.sh

@@ -8,10 +8,12 @@ declare -a examples=(example)
 for example in "${examples[@]}"
 do
   echo "===== Linking to $example"
-  MODULES_DIR=$example/node_modules
-  SDK_DIR=$MODULES_DIR/@launchdarkly/react-native-client-sdk
-  COMMON_DIR="$SDK_DIR"/node_modules/@launchdarkly/js-sdk-common
-  CLIENT_COMMON_DIR="$SDK_DIR"/node_modules/@launchdarkly/js-client-sdk-common
+  MODULES_DIR="$example"/node_modules
+  SDK_DIR="$MODULES_DIR"/@launchdarkly/react-native-client-sdk
+  SDK_DIR_MODULES="$SDK_DIR"/node_modules
+  SDK_LD_DIR="$SDK_DIR_MODULES"/@launchdarkly
+  COMMON_DIR="$SDK_LD_DIR"/js-sdk-common
+  CLIENT_COMMON_DIR="$SDK_LD_DIR"/js-client-sdk-common
 
   mkdir -p "$MODULES_DIR"
   rm -rf "$SDK_DIR"
@@ -22,6 +24,7 @@ do
   rsync -aq src "$SDK_DIR"
   rsync -aq package.json "$SDK_DIR"
   rsync -aq LICENSE "$SDK_DIR"
+  rsync -aq node_modules/@react-native-async-storage "$SDK_DIR"/node_modules
   rsync -aq node_modules/base64-js "$SDK_DIR"/node_modules
   rsync -aq node_modules/event-target-shim "$SDK_DIR"/node_modules
 
@@ -33,4 +36,5 @@ do
   rsync -aq ../../shared/sdk-client/dist "$CLIENT_COMMON_DIR"
   rsync -aq ../../shared/sdk-client/src "$CLIENT_COMMON_DIR"
   rsync -aq ../../shared/sdk-client/package.json "$CLIENT_COMMON_DIR"
+
 done

packages/sdk/react-native/package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@launchdarkly/js-client-sdk-common": "0.0.1",
+    "@react-native-async-storage/async-storage": "^1.21.0",
     "base64-js": "^1.5.1",
     "event-target-shim": "^6.0.2"
   },

packages/sdk/react-native/src/ReactNativeLDClient.test.ts

@@ -9,8 +9,16 @@ describe('ReactNativeLDClient', () => {
     ldc = new ReactNativeLDClient('mob-test', { sendEvents: false });
   });
 
-  test('constructor', () => {
+  test('constructing a new client', () => {
     expect(ldc.sdkKey).toEqual('mob-test');
+    expect(ldc.config.serviceEndpoints).toEqual({
+      analyticsEventPath: '/mobile',
+      diagnosticEventPath: '/mobile/events/diagnostic',
+      events: 'https://events.launchdarkly.com',
+      includeAuthorizationHeader: true,
+      polling: 'https://sdk.launchdarkly.com',
+      streaming: 'https://clientstream.launchdarkly.com',
+    });
   });
 
   test('createStreamUriPath', () => {

packages/sdk/react-native/src/ReactNativeLDClient.ts

@@ -1,26 +1,33 @@
 import {
   base64UrlEncode,
   BasicLogger,
+  internal,
   LDClientImpl,
   type LDContext,
   type LDOptions,
 } from '@launchdarkly/js-client-sdk-common';
 
-import platform from './platform';
+import createPlatform from './platform';
 
 export default class ReactNativeLDClient extends LDClientImpl {
   constructor(sdkKey: string, options: LDOptions = {}) {
     const logger =
       options.logger ??
       new BasicLogger({
-        level: 'info',
+        level: 'debug',
         // eslint-disable-next-line no-console
         destination: console.log,
       });
-    super(sdkKey, platform, { ...options, logger });
+
+    const internalOptions: internal.LDInternalOptions = {
+      analyticsEventPath: `/mobile`,
+      diagnosticEventPath: `/mobile/events/diagnostic`,
+    };
+
+    super(sdkKey, createPlatform(logger), { ...options, logger }, internalOptions);
   }
 
   override createStreamUriPath(context: LDContext) {
-    return `/meval/${base64UrlEncode(JSON.stringify(context), platform.encoding!)}`;
+    return `/meval/${base64UrlEncode(JSON.stringify(context), this.platform.encoding!)}`;
   }
 }

packages/sdk/react-native/src/hooks/index.ts

@@ -1,6 +1,5 @@
 import useLDClient from './useLDClient';
-import useLDDataSourceStatus from './useLDDataSourceStatus';
 
 export * from './variation';
 
-export { useLDDataSourceStatus, useLDClient };
+export { useLDClient };

packages/sdk/react-native/src/platform.ts

@@ -1,4 +1,7 @@
 /* eslint-disable max-classes-per-file */
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// @ts-ignore
 import type {
   Crypto,
   Encoding,
@@ -8,12 +11,14 @@ import type {
   Hasher,
   Hmac,
   Info,
+  LDLogger,
   Options,
   Platform,
   PlatformData,
   Requests,
   Response,
   SdkData,
+  Storage,
 } from '@launchdarkly/js-client-sdk-common';
 
 import { name, version } from '../package.json';
@@ -68,11 +73,38 @@ class PlatformCrypto implements Crypto {
     return uuidv4();
   }
 }
-const platform: Platform = {
+
+class PlatformStorage implements Storage {
+  constructor(private readonly logger: LDLogger) {}
+  async clear(key: string): Promise<void> {
+    await AsyncStorage.removeItem(key);
+  }
+
+  async get(key: string): Promise<string | null> {
+    try {
+      const value = await AsyncStorage.getItem(key);
+      return value ?? null;
+    } catch (error) {
+      this.logger.debug(`Error getting AsyncStorage key: ${key}, error: ${error}`);
+      return null;
+    }
+  }
+
+  async set(key: string, value: string): Promise<void> {
+    try {
+      await AsyncStorage.setItem(key, value);
+    } catch (error) {
+      this.logger.debug(`Error saving AsyncStorage key: ${key}, value: ${value}, error: ${error}`);
+    }
+  }
+}
+
+const createPlatform = (logger: LDLogger): Platform => ({
   crypto: new PlatformCrypto(),
   info: new PlatformInfo(),
   requests: new PlatformRequests(),
   encoding: new PlatformEncoding(),
-};
+  storage: new PlatformStorage(logger),
+});
 
-export default platform;
+export default createPlatform;

packages/sdk/react-native/src/provider/LDProvider.tsx

@@ -12,7 +12,7 @@ type LDProps = {
 };
 
 const LDProvider = ({ client, context, children }: PropsWithChildren<LDProps>) => {
-  const [state, setState] = useState<ReactContext>({ client, context, dataSource: {} });
+  const [state, setState] = useState<ReactContext>({ client });
 
   useEffect(() => {
     setupListeners(client, setState);

packages/sdk/react-native/src/provider/reactContext.ts

@@ -1,19 +1,13 @@
 import { createContext } from 'react';
 
-import { LDClient, LDContext } from '@launchdarkly/js-client-sdk-common';
+import { LDClient } from '@launchdarkly/js-client-sdk-common';
 
 export type ReactContext = {
   client: LDClient;
-  context?: LDContext;
-  dataSource: {
-    status?: 'connecting' | 'ready' | 'error';
-    error?: Error;
-  };
 };
 
 export const context = createContext<ReactContext>({
   client: {} as any,
-  dataSource: {},
 });
 
 const { Provider, Consumer } = context;

packages/sdk/react-native/src/provider/setupListeners.ts

@@ -1,24 +1,18 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-import { LDContext } from '@launchdarkly/js-client-sdk-common';
-
 import ReactNativeLDClient from '../ReactNativeLDClient';
 import { ReactContext } from './reactContext';
 
 const setupListeners = (
   client: ReactNativeLDClient,
   setState: Dispatch<SetStateAction<ReactContext>>,
 ) => {
-  client.on('connecting', (c: LDContext) => {
-    setState({ client, context: c, dataSource: { status: 'connecting' } });
-  });
-
-  client.on('ready', (c: LDContext) => {
-    setState({ client, context: c, dataSource: { status: 'ready' } });
+  client.on('ready', () => {
+    setState({ client });
   });
 
-  client.on('error', (c: LDContext, e: any) => {
-    setState({ client, context: c, dataSource: { status: 'error', error: e } });
+  client.on('change', () => {
+    setState({ client });
   });
 };
 

packages/shared/common/src/api/data/LDFlagChangeset.ts

@@ -0,0 +1,8 @@
+import { LDFlagValue } from './LDFlagValue';
+
+export interface LDFlagChangeset {
+  [key: string]: {
+    current?: LDFlagValue;
+    previous?: LDFlagValue;
+  };
+}

packages/shared/common/src/api/data/index.ts

@@ -2,3 +2,4 @@ export * from './LDEvaluationDetail';
 export * from './LDEvaluationReason';
 export * from './LDFlagSet';
 export * from './LDFlagValue';
+export * from './LDFlagChangeset';

packages/shared/common/src/api/platform/Platform.ts

@@ -3,6 +3,7 @@ import { Encoding } from './Encoding';
 import { Filesystem } from './Filesystem';
 import { Info } from './Info';
 import { Requests } from './Requests';
+import { Storage } from './Storage';
 
 export interface Platform {
   /**
@@ -31,4 +32,10 @@ export interface Platform {
    * The interface for performing http/https requests.
    */
   requests: Requests;
+
+  /**
+   * The interface for session specific storage object. If the platform does not
+   * support local storage access, this may be undefined.
+   */
+  storage?: Storage;
 }

packages/shared/common/src/api/platform/Storage.ts

@@ -0,0 +1,5 @@
+export interface Storage {
+  get: (key: string) => Promise<string | null>;
+  set: (key: string, value: string) => Promise<void>;
+  clear: (key: string) => Promise<void>;
+}

packages/shared/common/src/api/platform/index.ts

@@ -5,3 +5,4 @@ export * from './Info';
 export * from './Platform';
 export * from './Requests';
 export * from './EventSource';
+export * from './Storage';

packages/shared/common/src/utils/clone.ts

@@ -1,3 +1,3 @@
-export default function clone(obj: any) {
-  return JSON.parse(JSON.stringify(obj));
+export default function clone<T>(obj: any) {
+  return JSON.parse(JSON.stringify(obj)) as T;
 }