From a343c8345ffff044ef8db478ddce92e0e68d3cfb Mon Sep 17 00:00:00 2001
From: Yusinto Ngadiman <yusinto@gmail.com>
Date: Thu, 30 Nov 2023 15:21:22 -0800
Subject: [PATCH] chore: RN provider and hooks attempt 2 (#321)

This is a second attempt of #306 using the newly added event source.

- use StreamingProcessor and event source to fetch flags
- added LDProvider
- added hooks
- added typed variation[Detail] functions

Please read the [example
README](https://github.com/launchdarkly/js-core/blob/9d458f28625c12169df614c8d2289f9c0952cc45/packages/sdk/react-native/example/README.md#L1)
and try running the example app.

---------

Co-authored-by: LaunchDarklyReleaseBot <launchdarklyreleasebot@launchdarkly.com>
Co-authored-by: Ryan Lamb <4955475+kinyoklion@users.noreply.github.com>
---
 .eslintrc.js                                  |   1 +
 packages/sdk/react-native/README.md           |  12 +-
 packages/sdk/react-native/example/.gitignore  |   3 +
 packages/sdk/react-native/example/App.tsx     |  48 +--
 packages/sdk/react-native/example/README.md   |  22 +-
 packages/sdk/react-native/example/app.json    |  10 +-
 .../sdk/react-native/example/package.json     |  14 +-
 .../sdk/react-native/example/src/welcome.tsx  |  41 ++
 .../sdk/react-native/example/types/env.d.ts   |   2 +-
 packages/sdk/react-native/link-dev.sh         |  16 +-
 packages/sdk/react-native/package.json        |   4 +-
 .../src/ReactNativeLDClient.test.ts           |  23 ++
 .../react-native/src/ReactNativeLDClient.ts   |  18 +
 packages/sdk/react-native/src/hooks/index.ts  |   6 +
 .../sdk/react-native/src/hooks/useLDClient.ts |  10 +
 .../src/hooks/useLDDataSourceStatus.ts        |  10 +
 .../react-native/src/hooks/variation/index.ts |   2 +
 .../src/hooks/variation/useTypedVariation.ts  |  82 ++++
 .../src/hooks/variation/useVariation.ts       | 147 +++++++
 packages/sdk/react-native/src/index.test.tsx  |   1 -
 packages/sdk/react-native/src/index.ts        |   8 +-
 packages/sdk/react-native/src/init.ts         |  11 -
 .../react-native/src/provider/LDProvider.tsx  |  32 ++
 .../sdk/react-native/src/provider/index.ts    |   4 +
 .../react-native/src/provider/reactContext.ts |  21 +
 .../src/provider/setupListeners.ts            |  25 ++
 .../src/react-native-sse/EventSource.ts       |   4 +-
 packages/shared/common/src/utils/http.ts      |  14 +-
 packages/shared/common/src/utils/index.ts     |   3 +-
 .../shared/mocks/src/streamingProcessor.ts    |  10 +-
 .../sdk-client/src/LDClientImpl.test.ts       |  73 ++--
 .../shared/sdk-client/src/LDClientImpl.ts     | 197 ++++++++--
 .../shared/sdk-client/src/api/LDClient.ts     | 362 +++++++++++++-----
 .../sdk-client/src/api/LDEmitter.test.ts      |   1 +
 .../shared/sdk-client/src/api/LDEmitter.ts    |   2 +-
 .../sdk-client/src/evaluation/fetchUtils.ts   |  21 +-
 36 files changed, 997 insertions(+), 263 deletions(-)
 create mode 100644 packages/sdk/react-native/example/src/welcome.tsx
 create mode 100644 packages/sdk/react-native/src/ReactNativeLDClient.test.ts
 create mode 100644 packages/sdk/react-native/src/ReactNativeLDClient.ts
 create mode 100644 packages/sdk/react-native/src/hooks/index.ts
 create mode 100644 packages/sdk/react-native/src/hooks/useLDClient.ts
 create mode 100644 packages/sdk/react-native/src/hooks/useLDDataSourceStatus.ts
 create mode 100644 packages/sdk/react-native/src/hooks/variation/index.ts
 create mode 100644 packages/sdk/react-native/src/hooks/variation/useTypedVariation.ts
 create mode 100644 packages/sdk/react-native/src/hooks/variation/useVariation.ts
 delete mode 100644 packages/sdk/react-native/src/index.test.tsx
 delete mode 100644 packages/sdk/react-native/src/init.ts
 create mode 100644 packages/sdk/react-native/src/provider/LDProvider.tsx
 create mode 100644 packages/sdk/react-native/src/provider/index.ts
 create mode 100644 packages/sdk/react-native/src/provider/reactContext.ts
 create mode 100644 packages/sdk/react-native/src/provider/setupListeners.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 98be7e8ec..4a0af77b6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
     ],
     'import/default': 'error',
     'import/export': 'error',
+    'import/extensions': ['error', 'never', { json: 'always' }],
     'import/no-self-import': 'error',
     'import/no-cycle': 'error',
     'import/no-useless-path-segments': 'error',
diff --git a/packages/sdk/react-native/README.md b/packages/sdk/react-native/README.md
index 08f5848de..da3d52acb 100644
--- a/packages/sdk/react-native/README.md
+++ b/packages/sdk/react-native/README.md
@@ -25,8 +25,6 @@ yarn add @launchdarkly/react-native-client-sdk
 TODO
 
 ```typescript
-import { init } from '@launchdarkly/react-native-client-sdk';
-
 // TODO
 ```
 
@@ -34,15 +32,7 @@ See the full [example app](https://github.com/launchdarkly/js-core/tree/main/pac
 
 ## Developing this SDK
 
-:information_source: You will need to setup your sdk key in the example dir. See the example [README](https://github.com/launchdarkly/js-core/blob/main/packages/sdk/react-native/example/README.md#L1).
-
-```shell
-# at js-core repo root
-yarn && yarn build
-
-# at sdk/react-native repo
-yarn android | ios
-```
+:information_source: See the example [README](https://github.com/launchdarkly/js-core/blob/main/packages/sdk/react-native/example/README.md#L1).
 
 ## About LaunchDarkly
 
diff --git a/packages/sdk/react-native/example/.gitignore b/packages/sdk/react-native/example/.gitignore
index 88aca5470..b252443a3 100644
--- a/packages/sdk/react-native/example/.gitignore
+++ b/packages/sdk/react-native/example/.gitignore
@@ -34,3 +34,6 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+ios
+android
diff --git a/packages/sdk/react-native/example/App.tsx b/packages/sdk/react-native/example/App.tsx
index 93675937b..56634e16e 100644
--- a/packages/sdk/react-native/example/App.tsx
+++ b/packages/sdk/react-native/example/App.tsx
@@ -1,44 +1,18 @@
-import { CLIENT_SIDE_SDK_KEY } from '@env';
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { MOBILE_KEY } from '@env';
 
-import { init, type LDClientImpl } from '@launchdarkly/react-native-client-sdk';
+import { LDProvider, ReactNativeLDClient } from '@launchdarkly/react-native-client-sdk';
 
-const context = { kind: 'user', key: 'test-user-1' };
-
-export default function App() {
-  const [ldc, setLdc] = useState<LDClientImpl>();
-  const [flag, setFlag] = useState<boolean>(false);
+import Welcome from './src/welcome';
 
-  useEffect(() => {
-    init(CLIENT_SIDE_SDK_KEY, context)
-      .then((c) => {
-        setLdc(c);
-      })
-      .catch((e) => console.log(e));
-  }, []);
-
-  useEffect(() => {
-    const f = ldc?.boolVariation('dev-test-flag', false);
-    setFlag(f ?? false);
-  }, [ldc]);
+const featureClient = new ReactNativeLDClient(MOBILE_KEY);
+const context = { kind: 'user', key: 'test-user-1' };
 
+const App = () => {
   return (
-    <View style={styles.container}>
-      <Text>{flag ? <>devTestFlag: {`${flag}`}</> : <>loading...</>}</Text>
-    </View>
+    <LDProvider client={featureClient} context={context}>
+      <Welcome />
+    </LDProvider>
   );
-}
+};
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-});
+export default App;
diff --git a/packages/sdk/react-native/example/README.md b/packages/sdk/react-native/example/README.md
index bbd8c9b0a..2307d41b9 100644
--- a/packages/sdk/react-native/example/README.md
+++ b/packages/sdk/react-native/example/README.md
@@ -2,19 +2,29 @@
 
 To run the example app:
 
-1. Create a `.env` file at the same level as this README
-2. Add your client-side sdk key to that `.env` file:
+1. At the js-core repo root:
 
 ```shell
-CLIENT_SIDE_SDK_KEY=abcdef12456
+yarn && yarn build
 ```
 
-3.  Finally
+2. Create an `.env` file at the same level as this README and add your mobile key to that `.env` file:
 
 ```shell
+MOBILE_KEY=abcdef12456
+```
+
+3. Replace `dev-test-flag` with your flag key in `src/welcome.tsx`.
+
+4. Run the app:
+
+```shell
+# Note for android, there's an issue with Flipper interfering with streaming connections
+# so please run the release build. There's no such issue with ios.
+
 # android
-yarn && yarn android
+yarn && yarn android-release
 
 # ios
-yarn && yarn ios
+yarn && yarn ios-go
 ```
diff --git a/packages/sdk/react-native/example/app.json b/packages/sdk/react-native/example/app.json
index c728b74ef..b797a3a7e 100644
--- a/packages/sdk/react-native/example/app.json
+++ b/packages/sdk/react-native/example/app.json
@@ -11,15 +11,19 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.reactnativeexample"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.anonymous.reactnativeexample"
     },
     "web": {
       "favicon": "./assets/favicon.png"
diff --git a/packages/sdk/react-native/example/package.json b/packages/sdk/react-native/example/package.json
index d6ca0e3e7..113904380 100644
--- a/packages/sdk/react-native/example/package.json
+++ b/packages/sdk/react-native/example/package.json
@@ -4,13 +4,21 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android --clear",
-    "ios": "expo start --ios --clear",
+    "expo-clean": "expo prebuild --clean",
+    "android": "expo run:android",
+    "android-release": "expo run:android --variant release",
+    "android-go": "expo start --android --clear",
+    "android-log": "react-native log-android",
+    "ios": "expo run:ios",
+    "ios-release": "expo run:ios --configuration Release",
+    "ios-go": "expo start --ios --clear",
+    "ios-log": "react-native log-ios",
     "web": "expo start --web --clear",
-    "clean": "yarn cache clean && rm -rf node_modules"
+    "clean": "expo prebuild --clean && yarn cache clean && rm -rf node_modules && rm -rf .expo"
   },
   "dependencies": {
     "expo": "~49.0.16",
+    "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.7.1",
     "react": "18.2.0",
     "react-native": "0.72.6"
diff --git a/packages/sdk/react-native/example/src/welcome.tsx b/packages/sdk/react-native/example/src/welcome.tsx
new file mode 100644
index 000000000..dd42ebbf6
--- /dev/null
+++ b/packages/sdk/react-native/example/src/welcome.tsx
@@ -0,0 +1,41 @@
+import { Button, StyleSheet, Text, View } from 'react-native';
+
+import {
+  useBoolVariation,
+  useLDClient,
+  useLDDataSourceStatus,
+} from '@launchdarkly/react-native-client-sdk';
+
+export default function Welcome() {
+  const { error, status } = useLDDataSourceStatus();
+  const flag = useBoolVariation('dev-test-flag', false);
+  const ldc = useLDClient();
+
+  const login = () => {
+    ldc.identify({ kind: 'user', key: 'test-user-2' });
+  };
+
+  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>context: {JSON.stringify(ldc.getContext())}</Text>
+      <Button title="Login" onPress={login} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});
diff --git a/packages/sdk/react-native/example/types/env.d.ts b/packages/sdk/react-native/example/types/env.d.ts
index 8b0684a33..1ed74a4b5 100644
--- a/packages/sdk/react-native/example/types/env.d.ts
+++ b/packages/sdk/react-native/example/types/env.d.ts
@@ -1,4 +1,4 @@
 declare module '@env' {
   // eslint-disable-next-line import/prefer-default-export
-  export const CLIENT_SIDE_SDK_KEY: string;
+  export const MOBILE_KEY: string;
 }
diff --git a/packages/sdk/react-native/link-dev.sh b/packages/sdk/react-native/link-dev.sh
index 9bebafd6a..da6e062ed 100755
--- a/packages/sdk/react-native/link-dev.sh
+++ b/packages/sdk/react-native/link-dev.sh
@@ -18,13 +18,19 @@ do
   mkdir -p "$COMMON_DIR"
   mkdir -p "$CLIENT_COMMON_DIR"
 
+  rsync -av dist "$SDK_DIR"
+  rsync -aq src "$SDK_DIR"
   rsync -aq package.json "$SDK_DIR"
   rsync -aq LICENSE "$SDK_DIR"
-  rsync -aq node_modules "$SDK_DIR"
-  rsync -aq src "$SDK_DIR"
-  rsync -av dist "$SDK_DIR"
+  rsync -aq node_modules/base64-js "$SDK_DIR"/node_modules
+  rsync -aq node_modules/event-target-shim "$SDK_DIR"/node_modules
+
+  rsync -aq ../../shared/common/dist "$COMMON_DIR"
+  rsync -aq ../../shared/common/src "$COMMON_DIR"
+  rsync -aq ../../shared/common/package.json "$COMMON_DIR"
 
-  rsync -aq ../../shared/common/ "$COMMON_DIR"
   rm -rf "$CLIENT_COMMON_DIR"
-  rsync -aq ../../shared/sdk-client/ "$CLIENT_COMMON_DIR"
+  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
diff --git a/packages/sdk/react-native/package.json b/packages/sdk/react-native/package.json
index b042f1152..a5349c85a 100644
--- a/packages/sdk/react-native/package.json
+++ b/packages/sdk/react-native/package.json
@@ -40,7 +40,7 @@
     "ios": "yarn ./example && yarn build && yarn ./example ios"
   },
   "peerDependencies": {
-    "react-native": "*"
+    "react": "*"
   },
   "dependencies": {
     "@launchdarkly/js-client-sdk-common": "0.0.1",
@@ -50,6 +50,7 @@
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.31",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "eslint": "^8.45.0",
@@ -61,6 +62,7 @@
     "jest": "^29.5.0",
     "launchdarkly-js-test-helpers": "^2.2.0",
     "prettier": "^3.0.0",
+    "react": "^18.2.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.0",
     "typedoc": "0.25.0",
diff --git a/packages/sdk/react-native/src/ReactNativeLDClient.test.ts b/packages/sdk/react-native/src/ReactNativeLDClient.test.ts
new file mode 100644
index 000000000..1f0ff848c
--- /dev/null
+++ b/packages/sdk/react-native/src/ReactNativeLDClient.test.ts
@@ -0,0 +1,23 @@
+import { type LDContext } from '@launchdarkly/js-client-sdk-common';
+
+import ReactNativeLDClient from './ReactNativeLDClient';
+
+describe('ReactNativeLDClient', () => {
+  let ldc: ReactNativeLDClient;
+
+  beforeEach(() => {
+    ldc = new ReactNativeLDClient('mob-test', { sendEvents: false });
+  });
+
+  test('constructor', () => {
+    expect(ldc.sdkKey).toEqual('mob-test');
+  });
+
+  test('createStreamUriPath', () => {
+    const context: LDContext = { kind: 'user', key: 'test-user-key-1' };
+
+    expect(ldc.createStreamUriPath(context)).toEqual(
+      '/meval/eyJraW5kIjoidXNlciIsImtleSI6InRlc3QtdXNlci1rZXktMSJ9',
+    );
+  });
+});
diff --git a/packages/sdk/react-native/src/ReactNativeLDClient.ts b/packages/sdk/react-native/src/ReactNativeLDClient.ts
new file mode 100644
index 000000000..330f02fb4
--- /dev/null
+++ b/packages/sdk/react-native/src/ReactNativeLDClient.ts
@@ -0,0 +1,18 @@
+import {
+  base64UrlEncode,
+  LDClientImpl,
+  type LDContext,
+  type LDOptions,
+} from '@launchdarkly/js-client-sdk-common';
+
+import platform from './platform';
+
+export default class ReactNativeLDClient extends LDClientImpl {
+  constructor(sdkKey: string, options: LDOptions = {}) {
+    super(sdkKey, platform, options);
+  }
+
+  override createStreamUriPath(context: LDContext) {
+    return `/meval/${base64UrlEncode(JSON.stringify(context), platform.encoding!)}`;
+  }
+}
diff --git a/packages/sdk/react-native/src/hooks/index.ts b/packages/sdk/react-native/src/hooks/index.ts
new file mode 100644
index 000000000..5cbe59c5e
--- /dev/null
+++ b/packages/sdk/react-native/src/hooks/index.ts
@@ -0,0 +1,6 @@
+import useLDClient from './useLDClient';
+import useLDDataSourceStatus from './useLDDataSourceStatus';
+
+export * from './variation';
+
+export { useLDDataSourceStatus, useLDClient };
diff --git a/packages/sdk/react-native/src/hooks/useLDClient.ts b/packages/sdk/react-native/src/hooks/useLDClient.ts
new file mode 100644
index 000000000..22cd561c9
--- /dev/null
+++ b/packages/sdk/react-native/src/hooks/useLDClient.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+
+import { context, ReactContext } from '../provider/reactContext';
+
+const useLDClient = () => {
+  const { client } = useContext<ReactContext>(context);
+  return client;
+};
+
+export default useLDClient;
diff --git a/packages/sdk/react-native/src/hooks/useLDDataSourceStatus.ts b/packages/sdk/react-native/src/hooks/useLDDataSourceStatus.ts
new file mode 100644
index 000000000..2b775de82
--- /dev/null
+++ b/packages/sdk/react-native/src/hooks/useLDDataSourceStatus.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+
+import { context, ReactContext } from '../provider/reactContext';
+
+const useLDDataSourceStatus = () => {
+  const { dataSource } = useContext<ReactContext>(context);
+  return dataSource;
+};
+
+export default useLDDataSourceStatus;
diff --git a/packages/sdk/react-native/src/hooks/variation/index.ts b/packages/sdk/react-native/src/hooks/variation/index.ts
new file mode 100644
index 000000000..ee37f1e8c
--- /dev/null
+++ b/packages/sdk/react-native/src/hooks/variation/index.ts
@@ -0,0 +1,2 @@
+export * from './useVariation';
+export * from './useTypedVariation';
diff --git a/packages/sdk/react-native/src/hooks/variation/useTypedVariation.ts b/packages/sdk/react-native/src/hooks/variation/useTypedVariation.ts
new file mode 100644
index 000000000..72fd632fa
--- /dev/null
+++ b/packages/sdk/react-native/src/hooks/variation/useTypedVariation.ts
@@ -0,0 +1,82 @@
+import { LDEvaluationDetailTyped } from '@launchdarkly/js-client-sdk-common';
+
+import useLDClient from '../useLDClient';
+
+/**
+ * Determines the strongly typed variation of a feature flag.
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The strongly typed value.
+ */
+export const useTypedVariation = <T extends boolean | number | string | unknown>(
+  key: string,
+  defaultValue: T,
+): T => {
+  const ldClient = useLDClient();
+
+  switch (typeof defaultValue) {
+    case 'boolean':
+      return ldClient.boolVariation(key, defaultValue as boolean) as T;
+    case 'number':
+      return ldClient.numberVariation(key, defaultValue as number) as T;
+    case 'string':
+      return ldClient.stringVariation(key, defaultValue as string) as T;
+    case 'undefined':
+    case 'object':
+      return ldClient.jsonVariation(key, defaultValue) as T;
+    default:
+      return ldClient.variation(key, defaultValue);
+  }
+};
+
+/**
+ * Determines the strongly typed variation of a feature flag for a context, along with information about
+ * how it was calculated.
+ *
+ * The `reason` property of the result will also be included in analytics events, if you are
+ * capturing detailed event data for this flag.
+ *
+ * If the flag variation does not have the specified type, defaultValue is returned. The reason will
+ * indicate an error of the type `WRONG_KIND` in this case.
+ *
+ * For more information, see the [SDK reference
+ * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *  The result (as an {@link LDEvaluationDetailTyped<T>}).
+ */
+export const useTypedVariationDetail = <T extends boolean | number | string | unknown>(
+  key: string,
+  defaultValue: T,
+): LDEvaluationDetailTyped<T> => {
+  const ldClient = useLDClient();
+
+  switch (typeof defaultValue) {
+    case 'boolean':
+      return ldClient.boolVariationDetail(
+        key,
+        defaultValue as boolean,
+      ) as LDEvaluationDetailTyped<T>;
+    case 'number':
+      return ldClient.numberVariationDetail(
+        key,
+        defaultValue as number,
+      ) as LDEvaluationDetailTyped<T>;
+    case 'string':
+      return ldClient.stringVariationDetail(
+        key,
+        defaultValue as string,
+      ) as LDEvaluationDetailTyped<T>;
+    case 'undefined':
+    case 'object':
+      return ldClient.jsonVariationDetail(key, defaultValue) as LDEvaluationDetailTyped<T>;
+    default:
+      return ldClient.variationDetail(key, defaultValue);
+  }
+};
diff --git a/packages/sdk/react-native/src/hooks/variation/useVariation.ts b/packages/sdk/react-native/src/hooks/variation/useVariation.ts
new file mode 100644
index 000000000..db3a64ad8
--- /dev/null
+++ b/packages/sdk/react-native/src/hooks/variation/useVariation.ts
@@ -0,0 +1,147 @@
+import { useTypedVariation, useTypedVariationDetail } from './useTypedVariation';
+
+/**
+ * Determines the boolean variation of a feature flag.
+ *
+ * If the flag variation does not have a boolean value, defaultValue is returned.
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The boolean value.
+ */
+export const useBoolVariation = (key: string, defaultValue: boolean) =>
+  useTypedVariation<boolean>(key, defaultValue);
+
+/**
+ * Determines the boolean variation of a feature flag for a context, along with information about
+ * how it was calculated.
+ *
+ * The `reason` property of the result will also be included in analytics events, if you are
+ * capturing detailed event data for this flag.
+ *
+ * If the flag variation does not have a boolean value, defaultValue is returned. The reason will
+ * indicate an error of the type `WRONG_KIND` in this case.
+ *
+ * For more information, see the [SDK reference
+ * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *  The result (as an {@link LDEvaluationDetailTyped<boolean>}).
+ */
+export const useBoolVariationDetail = (key: string, defaultValue: boolean) =>
+  useTypedVariationDetail<boolean>(key, defaultValue);
+
+/**
+ * Determines the numeric variation of a feature flag.
+ *
+ * If the flag variation does not have a numeric value, defaultValue is returned.
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The numeric value.
+ */
+export const useNumberVariation = (key: string, defaultValue: number) =>
+  useTypedVariation<number>(key, defaultValue);
+
+/**
+ * Determines the numeric variation of a feature flag for a context, along with information about
+ * how it was calculated.
+ *
+ * The `reason` property of the result will also be included in analytics events, if you are
+ * capturing detailed event data for this flag.
+ *
+ * If the flag variation does not have a numeric value, defaultValue is returned. The reason will
+ * indicate an error of the type `WRONG_KIND` in this case.
+ *
+ * For more information, see the [SDK reference
+ * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The result (as an {@link LDEvaluationDetailTyped<number>}).
+ */
+export const useNumberVariationDetail = (key: string, defaultValue: number) =>
+  useTypedVariationDetail<number>(key, defaultValue);
+
+/**
+ * Determines the string variation of a feature flag.
+ *
+ * If the flag variation does not have a string value, defaultValue is returned.
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The string value.
+ */
+export const useStringVariation = (key: string, defaultValue: string) =>
+  useTypedVariation<string>(key, defaultValue);
+
+/**
+ * Determines the string variation of a feature flag for a context, along with information about
+ * how it was calculated.
+ *
+ * The `reason` property of the result will also be included in analytics events, if you are
+ * capturing detailed event data for this flag.
+ *
+ * If the flag variation does not have a string value, defaultValue is returned. The reason will
+ * indicate an error of the type `WRONG_KIND` in this case.
+ *
+ * For more information, see the [SDK reference
+ * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The result (as an {@link LDEvaluationDetailTyped<string>}).
+ */
+export const useStringVariationDetail = (key: string, defaultValue: string) =>
+  useTypedVariationDetail<string>(key, defaultValue);
+
+/**
+ * Determines the json variation of a feature flag.
+ *
+ * This version may be favored in TypeScript versus `variation` because it returns
+ * an `unknown` type instead of `any`. `unknown` will require a cast before usage.
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   The json value.
+ */
+export const useJsonVariation = (key: string, defaultValue: unknown) =>
+  useTypedVariation<unknown>(key, defaultValue);
+
+/**
+ * Determines the json variation of a feature flag for a context, along with information about how it
+ * was calculated.
+ *
+ * The `reason` property of the result will also be included in analytics events, if you are
+ * capturing detailed event data for this flag.
+ *
+ * This version may be favored in TypeScript versus `variation` because it returns
+ * an `unknown` type instead of `any`. `unknown` will require a cast before usage.
+ *
+ * For more information, see the [SDK reference
+ * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+ *
+ * @param key The unique key of the feature flag.
+ * @param defaultValue The default value of the flag, to be used if the value is not available
+ *   from LaunchDarkly.
+ * @returns
+ *   If you provided a callback, then nothing. Otherwise, a Promise which will be resolved with
+ *   the result (as an{@link LDEvaluationDetailTyped<unknown>}).
+ */
+export const useJsonVariationDetail = (key: string, defaultValue: unknown) =>
+  useTypedVariationDetail<unknown>(key, defaultValue);
diff --git a/packages/sdk/react-native/src/index.test.tsx b/packages/sdk/react-native/src/index.test.tsx
deleted file mode 100644
index 0d78ac8b8..000000000
--- a/packages/sdk/react-native/src/index.test.tsx
+++ /dev/null
@@ -1 +0,0 @@
-test.todo('write a test');
diff --git a/packages/sdk/react-native/src/index.ts b/packages/sdk/react-native/src/index.ts
index acabdb114..78b49da15 100644
--- a/packages/sdk/react-native/src/index.ts
+++ b/packages/sdk/react-native/src/index.ts
@@ -1,17 +1,17 @@
 /**
  * This is the API reference for the React Native LaunchDarkly SDK.
  *
- * TODO:
- *
  * For more information, see the SDK reference guide.
  *
  * @packageDocumentation
  */
-import init from './init';
 import { setupPolyfill } from './polyfills';
+import ReactNativeLDClient from './ReactNativeLDClient';
 
 setupPolyfill();
 
 export * from '@launchdarkly/js-client-sdk-common';
 
-export { init };
+export * from './hooks';
+export * from './provider';
+export { ReactNativeLDClient };
diff --git a/packages/sdk/react-native/src/init.ts b/packages/sdk/react-native/src/init.ts
deleted file mode 100644
index 9e32dd20f..000000000
--- a/packages/sdk/react-native/src/init.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { LDClientImpl, LDContext, LDOptions } from '@launchdarkly/js-client-sdk-common';
-
-import platform from './platform';
-
-const init = async (sdkKey: string, context: LDContext, options: LDOptions = {}) => {
-  const ldc = new LDClientImpl(sdkKey, context, platform, options);
-  await ldc.start();
-  return ldc;
-};
-
-export default init;
diff --git a/packages/sdk/react-native/src/provider/LDProvider.tsx b/packages/sdk/react-native/src/provider/LDProvider.tsx
new file mode 100644
index 000000000..e57ed12b1
--- /dev/null
+++ b/packages/sdk/react-native/src/provider/LDProvider.tsx
@@ -0,0 +1,32 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+
+import { type LDContext } from '@launchdarkly/js-client-sdk-common';
+
+import ReactNativeLDClient from '../ReactNativeLDClient';
+import { Provider, ReactContext } from './reactContext';
+import setupListeners from './setupListeners';
+
+type LDProps = {
+  client: ReactNativeLDClient;
+  context?: LDContext;
+};
+
+const LDProvider = ({ client, context, children }: PropsWithChildren<LDProps>) => {
+  const [state, setState] = useState<ReactContext>({ client, context, dataSource: {} });
+
+  useEffect(() => {
+    setupListeners(client, setState);
+
+    if (context) {
+      client
+        .identify(context)
+        .catch((e: any) =>
+          client.logger.debug(`LaunchDarkly React Native Sdk identify error: ${e}`),
+        );
+    }
+  }, []);
+
+  return <Provider value={state}>{children}</Provider>;
+};
+
+export default LDProvider;
diff --git a/packages/sdk/react-native/src/provider/index.ts b/packages/sdk/react-native/src/provider/index.ts
new file mode 100644
index 000000000..6706518fb
--- /dev/null
+++ b/packages/sdk/react-native/src/provider/index.ts
@@ -0,0 +1,4 @@
+import LDProvider from './LDProvider';
+
+// eslint-disable-next-line import/prefer-default-export
+export { LDProvider };
diff --git a/packages/sdk/react-native/src/provider/reactContext.ts b/packages/sdk/react-native/src/provider/reactContext.ts
new file mode 100644
index 000000000..57f7a0e4b
--- /dev/null
+++ b/packages/sdk/react-native/src/provider/reactContext.ts
@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+
+import { LDClient, LDContext } 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;
+
+export { Provider, Consumer };
diff --git a/packages/sdk/react-native/src/provider/setupListeners.ts b/packages/sdk/react-native/src/provider/setupListeners.ts
new file mode 100644
index 000000000..bde53b1c7
--- /dev/null
+++ b/packages/sdk/react-native/src/provider/setupListeners.ts
@@ -0,0 +1,25 @@
+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('error', (c: LDContext, e: any) => {
+    setState({ client, context: c, dataSource: { status: 'error', error: e } });
+  });
+};
+
+export default setupListeners;
diff --git a/packages/sdk/react-native/src/react-native-sse/EventSource.ts b/packages/sdk/react-native/src/react-native-sse/EventSource.ts
index 420c5fdad..58a4c4409 100644
--- a/packages/sdk/react-native/src/react-native-sse/EventSource.ts
+++ b/packages/sdk/react-native/src/react-native-sse/EventSource.ts
@@ -287,7 +287,7 @@ export default class EventSource<E extends string = never> {
         this.onclose();
         break;
       case 'error':
-        this.onerror();
+        this.onerror(data);
         break;
       case 'retry':
         this.onretrying();
@@ -309,6 +309,6 @@ export default class EventSource<E extends string = never> {
 
   onopen() {}
   onclose() {}
-  onerror() {}
+  onerror(_err: any) {}
   onretrying() {}
 }
diff --git a/packages/shared/common/src/utils/http.ts b/packages/shared/common/src/utils/http.ts
index 25ffd29da..b4e21d029 100644
--- a/packages/shared/common/src/utils/http.ts
+++ b/packages/shared/common/src/utils/http.ts
@@ -1,4 +1,4 @@
-import { HttpErrorResponse, Info } from '../api';
+import { Encoding, HttpErrorResponse, Info } from '../api';
 import { isHttpRecoverable } from '../errors';
 import { ApplicationTags } from '../options';
 
@@ -58,3 +58,15 @@ export function httpErrorMessage(
 export function shouldRetry({ status }: HttpErrorResponse) {
   return status ? isHttpRecoverable(status) : true;
 }
+
+/**
+ * In react-native use base64-js to polyfill btoa. This is safe
+ * because the react-native repo uses it too. Set the global.btoa to the encode
+ * function of base64-js.
+ * https://github.com/beatgammit/base64-js
+ * https://github.com/axios/axios/issues/2235#issuecomment-512204616
+ *
+ * Ripped from https://thewoods.blog/base64url/
+ */
+export const base64UrlEncode = (s: string, encoding: Encoding): string =>
+  encoding.btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
diff --git a/packages/shared/common/src/utils/index.ts b/packages/shared/common/src/utils/index.ts
index 84381a70f..693e3afb7 100644
--- a/packages/shared/common/src/utils/index.ts
+++ b/packages/shared/common/src/utils/index.ts
@@ -1,11 +1,12 @@
 import clone from './clone';
 import { secondsToMillis } from './date';
-import { defaultHeaders, httpErrorMessage, LDHeaders, shouldRetry } from './http';
+import { base64UrlEncode, defaultHeaders, httpErrorMessage, LDHeaders, shouldRetry } from './http';
 import noop from './noop';
 import sleep from './sleep';
 import { VoidFunction } from './VoidFunction';
 
 export {
+  base64UrlEncode,
   clone,
   defaultHeaders,
   httpErrorMessage,
diff --git a/packages/shared/mocks/src/streamingProcessor.ts b/packages/shared/mocks/src/streamingProcessor.ts
index e58cbe583..dbf9bf8e0 100644
--- a/packages/shared/mocks/src/streamingProcessor.ts
+++ b/packages/shared/mocks/src/streamingProcessor.ts
@@ -8,7 +8,10 @@ import type {
 
 export const MockStreamingProcessor = jest.fn();
 
-export const setupMockStreamingProcessor = (shouldError: boolean = false) => {
+export const setupMockStreamingProcessor = (
+  shouldError: boolean = false,
+  putResponseJson: any = { data: { flags: {}, segments: {} } },
+) => {
   MockStreamingProcessor.mockImplementation(
     (
       sdkKey: string,
@@ -31,12 +34,11 @@ export const setupMockStreamingProcessor = (shouldError: boolean = false) => {
           });
         } else {
           // execute put which will resolve the init promise
-          process.nextTick(
-            () => listeners.get('put')?.processJson({ data: { flags: {}, segments: {} } }),
-          );
+          process.nextTick(() => listeners.get('put')?.processJson(putResponseJson));
         }
       }),
       close: jest.fn(),
+      eventSource: {},
     }),
   );
 };
diff --git a/packages/shared/sdk-client/src/LDClientImpl.test.ts b/packages/shared/sdk-client/src/LDClientImpl.test.ts
index b2e14d315..509b2438a 100644
--- a/packages/shared/sdk-client/src/LDClientImpl.test.ts
+++ b/packages/shared/sdk-client/src/LDClientImpl.test.ts
@@ -1,27 +1,39 @@
 import { LDContext } from '@launchdarkly/js-sdk-common';
-import { basicPlatform, logger } from '@launchdarkly/private-js-mocks';
+import {
+  basicPlatform,
+  logger,
+  MockStreamingProcessor,
+  setupMockStreamingProcessor,
+} from '@launchdarkly/private-js-mocks';
 
-import LDEmitter from './api/LDEmitter';
-import fetchFlags from './evaluation/fetchFlags';
 import * as mockResponseJson from './evaluation/mockResponse.json';
 import LDClientImpl from './LDClientImpl';
 
-jest.mock('./api/LDEmitter');
 jest.mock('./evaluation/fetchFlags');
-
+jest.mock('@launchdarkly/js-sdk-common', () => {
+  const actual = jest.requireActual('@launchdarkly/js-sdk-common');
+  return {
+    ...actual,
+    ...{
+      internal: {
+        ...actual.internal,
+        StreamingProcessor: MockStreamingProcessor,
+      },
+    },
+  };
+});
 describe('sdk-client object', () => {
   const testSdkKey = 'test-sdk-key';
   const context: LDContext = { kind: 'org', key: 'Testy Pizza' };
-  const mockFetchFlags = fetchFlags as jest.Mock;
-
   let ldc: LDClientImpl;
-  let mockEmitter: LDEmitter;
 
   beforeEach(() => {
-    mockFetchFlags.mockResolvedValue(mockResponseJson);
+    setupMockStreamingProcessor(false, mockResponseJson);
 
-    ldc = new LDClientImpl(testSdkKey, context, basicPlatform, { logger });
-    [mockEmitter] = (LDEmitter as jest.Mock).mock.instances;
+    ldc = new LDClientImpl(testSdkKey, basicPlatform, { logger });
+    jest
+      .spyOn(LDClientImpl.prototype as any, 'createStreamUriPath')
+      .mockReturnValue('/stream/path');
   });
 
   afterEach(() => {
@@ -29,7 +41,7 @@ describe('sdk-client object', () => {
   });
 
   test('instantiate with blank options', () => {
-    ldc = new LDClientImpl(testSdkKey, context, basicPlatform, {});
+    ldc = new LDClientImpl(testSdkKey, basicPlatform, {});
     expect(ldc.config).toMatchObject({
       allAttributesPrivate: false,
       baseUri: 'https://sdk.launchdarkly.com',
@@ -62,7 +74,7 @@ describe('sdk-client object', () => {
   });
 
   test('all flags', async () => {
-    await ldc.start();
+    await ldc.identify(context);
     const all = ldc.allFlags();
 
     expect(all).toEqual({
@@ -78,7 +90,7 @@ describe('sdk-client object', () => {
   });
 
   test('variation', async () => {
-    await ldc.start();
+    await ldc.identify(context);
     const devTestFlag = ldc.variation('dev-test-flag');
 
     expect(devTestFlag).toBe(true);
@@ -86,7 +98,6 @@ describe('sdk-client object', () => {
 
   test('identify success', async () => {
     mockResponseJson['dev-test-flag'].value = false;
-    mockFetchFlags.mockResolvedValue(mockResponseJson);
     const carContext: LDContext = { kind: 'car', key: 'mazda-cx7' };
 
     await ldc.identify(carContext);
@@ -105,18 +116,34 @@ describe('sdk-client object', () => {
 
     await expect(ldc.identify(carContext)).rejects.toThrowError(/no key/);
     expect(logger.error).toBeCalledTimes(1);
-    expect(mockEmitter.emit).toHaveBeenNthCalledWith(1, 'error', expect.any(Error));
-    expect(ldc.getContext()).toEqual(context);
+    expect(ldc.getContext()).toBeUndefined();
   });
 
-  test('identify error fetch error', async () => {
-    // @ts-ignore
-    mockFetchFlags.mockRejectedValue(new Error('unknown test fetch error'));
+  test('identify error stream error', async () => {
+    setupMockStreamingProcessor(true);
     const carContext: LDContext = { kind: 'car', key: 'mazda-3' };
 
-    await expect(ldc.identify(carContext)).rejects.toThrowError(/fetch error/);
+    await expect(ldc.identify(carContext)).rejects.toMatchObject({
+      code: 401,
+      message: 'test-error',
+    });
     expect(logger.error).toBeCalledTimes(1);
-    expect(mockEmitter.emit).toHaveBeenNthCalledWith(1, 'error', expect.any(Error));
-    expect(ldc.getContext()).toEqual(context);
+    expect(ldc.getContext()).toBeUndefined();
+  });
+
+  test('identify ready and error listeners', async () => {
+    // @ts-ignore
+    const { emitter } = ldc;
+
+    await ldc.identify(context);
+
+    const carContext1: LDContext = { kind: 'car', key: 'mazda-cx' };
+    await ldc.identify(carContext1);
+
+    const carContext2: LDContext = { kind: 'car', key: 'subaru-forrester' };
+    await ldc.identify(carContext2);
+
+    expect(emitter.listenerCount('ready')).toEqual(1);
+    expect(emitter.listenerCount('error')).toEqual(1);
   });
 });
diff --git a/packages/shared/sdk-client/src/LDClientImpl.ts b/packages/shared/sdk-client/src/LDClientImpl.ts
index c46185058..03f0c1b81 100644
--- a/packages/shared/sdk-client/src/LDClientImpl.ts
+++ b/packages/shared/sdk-client/src/LDClientImpl.ts
@@ -2,6 +2,8 @@
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
+  base64UrlEncode,
+  ClientContext,
   clone,
   Context,
   internal,
@@ -13,6 +15,8 @@ import {
   LDFlagValue,
   LDLogger,
   Platform,
+  ProcessStreamResponse,
+  EventName as StreamEventName,
   subsystem,
   TypeValidators,
 } from '@launchdarkly/js-sdk-common';
@@ -21,7 +25,7 @@ import { LDClient, type LDOptions } from './api';
 import LDEmitter, { EventName } from './api/LDEmitter';
 import Configuration from './configuration';
 import createDiagnosticsManager from './diagnostics/createDiagnosticsManager';
-import fetchFlags, { Flags } from './evaluation/fetchFlags';
+import { Flags } from './evaluation/fetchFlags';
 import createEventProcessor from './events/createEventProcessor';
 import EventFactory from './events/EventFactory';
 
@@ -30,21 +34,25 @@ const { createErrorEvaluationDetail, createSuccessEvaluationDetail, ClientMessag
 
 export default class LDClientImpl implements LDClient {
   config: Configuration;
+  context?: LDContext;
   diagnosticsManager?: internal.DiagnosticsManager;
   eventProcessor: subsystem.LDEventProcessor;
+  streamer?: internal.StreamingProcessor;
+  logger: LDLogger;
 
   private eventFactoryDefault = new EventFactory(false);
   private eventFactoryWithReasons = new EventFactory(true);
   private emitter: LDEmitter;
   private flags: Flags = {};
-  private logger: LDLogger;
+  private identifyReadyListener?: (c: LDContext) => void;
+  private identifyErrorListener?: (c: LDContext, err: any) => void;
 
+  private readonly clientContext: ClientContext;
   /**
    * Creates the client object synchronously. No async, no network calls.
    */
   constructor(
     public readonly sdkKey: string,
-    public context: LDContext,
     public readonly platform: Platform,
     options: LDOptions,
   ) {
@@ -57,6 +65,7 @@ export default class LDClientImpl implements LDClient {
     }
 
     this.config = new Configuration(options);
+    this.clientContext = new ClientContext(sdkKey, this.config, platform);
     this.logger = this.config.logger;
     this.diagnosticsManager = createDiagnosticsManager(sdkKey, this.config, platform);
     this.eventProcessor = createEventProcessor(
@@ -66,18 +75,6 @@ export default class LDClientImpl implements LDClient {
       this.diagnosticsManager,
     );
     this.emitter = new LDEmitter();
-
-    // TODO: init streamer
-  }
-
-  async start() {
-    try {
-      await this.identify(this.context);
-      this.emitter.emit('ready');
-    } catch (error: any) {
-      this.emitter.emit('failed', error);
-      throw error;
-    }
   }
 
   allFlags(): LDFlagSet {
@@ -103,27 +100,113 @@ export default class LDClientImpl implements LDClient {
   }
 
   getContext(): LDContext {
-    return clone(this.context);
+    return this.context ? clone(this.context) : undefined;
+  }
+
+  private createStreamListeners(context: LDContext): Map<StreamEventName, ProcessStreamResponse> {
+    const listeners = new Map<StreamEventName, ProcessStreamResponse>();
+
+    listeners.set('put', {
+      deserializeData: JSON.parse,
+      processJson: (dataJson) => {
+        this.logger.debug('Initializing all data');
+        this.context = context;
+        this.flags = {};
+        Object.keys(dataJson).forEach((key) => {
+          this.flags[key] = dataJson[key];
+        });
+        this.emitter.emit('ready', context);
+      },
+    });
+
+    listeners.set('patch', {
+      deserializeData: JSON.parse,
+      processJson: (dataJson) => {
+        this.logger.debug(`Updating ${dataJson.key}`);
+        this.flags[dataJson.key] = dataJson;
+        this.emitter.emit('change', context, dataJson.key);
+      },
+    });
+
+    listeners.set('delete', {
+      deserializeData: JSON.parse,
+      processJson: (dataJson) => {
+        this.logger.debug(`Deleting ${dataJson.key}`);
+        delete this.flags[dataJson.key];
+        this.emitter.emit('change', context, dataJson.key);
+      },
+    });
+
+    return listeners;
+  }
+
+  /**
+   * Generates the url path for streamer.
+   *
+   * For mobile key: /meval/${base64-encoded-context}
+   * For clientSideId: /eval/${envId}/${base64-encoded-context}
+   *
+   * @param context The LD context object to be base64 encoded and appended to
+   * the path.
+   *
+   * @protected This function must be overridden in subclasses for streamer
+   * to work.
+   */
+  protected createStreamUriPath(context: LDContext): string {
+    throw new Error(
+      'createStreamUriPath not implemented. client sdks must implement createStreamUriPath for streamer to work',
+    );
+  }
+
+  private createIdentifyPromise() {
+    return new Promise<void>((resolve, reject) => {
+      if (this.identifyReadyListener) {
+        this.emitter.off('ready', this.identifyReadyListener);
+      }
+      if (this.identifyErrorListener) {
+        this.emitter.off('error', this.identifyErrorListener);
+      }
+
+      this.identifyReadyListener = (c: LDContext) => {
+        this.logger.debug(`ready: ${JSON.stringify(c)}`);
+        resolve();
+      };
+      this.identifyErrorListener = (c: LDContext, err: any) => {
+        this.logger.debug(`error: ${err}, context: ${JSON.stringify(c)}`);
+        reject(err);
+      };
+
+      this.emitter.on('ready', this.identifyReadyListener);
+      this.emitter.on('error', this.identifyErrorListener);
+    });
   }
 
   // TODO: implement secure mode
-  async identify(context: LDContext, hash?: string): Promise<void> {
+  async identify(context: LDContext, _hash?: string): Promise<void> {
     const checkedContext = Context.fromLDContext(context);
     if (!checkedContext.valid) {
       const error = new Error('Context was unspecified or had no key');
       this.logger.error(error);
-      this.emitter.emit('error', error);
-      throw error;
+      this.emitter.emit('error', context, error);
+      return Promise.reject(error);
     }
 
-    try {
-      this.flags = await fetchFlags(this.sdkKey, context, this.config, this.platform);
-      this.context = context;
-    } catch (error: any) {
-      this.logger.error(error);
-      this.emitter.emit('error', error);
-      throw error;
-    }
+    this.streamer?.close();
+    this.streamer = new internal.StreamingProcessor(
+      this.sdkKey,
+      this.clientContext,
+      this.createStreamUriPath(context),
+      this.createStreamListeners(context),
+      this.diagnosticsManager,
+      (e) => {
+        this.logger.error(e);
+        this.emitter.emit('error', context, e);
+      },
+    );
+    this.emitter.emit('connecting', context);
+    this.streamer.start();
+
+    return this.createIdentifyPromise();
   }
 
   off(eventName: EventName, listener?: Function): void {
@@ -139,8 +222,11 @@ export default class LDClientImpl implements LDClient {
   }
 
   track(key: string, data?: any, metricValue?: number): void {
+    if (!this.context) {
+      this.logger?.warn(ClientMessages.missingContextKeyNoEvent);
+      return;
+    }
     const checkedContext = Context.fromLDContext(this.context);
-
     if (!checkedContext.valid) {
       this.logger?.warn(ClientMessages.missingContextKeyNoEvent);
       return;
@@ -157,12 +243,17 @@ export default class LDClientImpl implements LDClient {
     eventFactory: EventFactory,
     typeChecker?: (value: any) => [boolean, string],
   ): LDFlagValue {
+    if (!this.context) {
+      this.logger?.debug(ClientMessages.missingContextKeyNoEvent);
+      return createErrorEvaluationDetail(ErrorKinds.UserNotSpecified, defaultValue);
+    }
+
     const evalContext = Context.fromLDContext(this.context);
     const found = this.flags[flagKey];
 
     if (!found) {
       const error = new LDClientError(`Unknown feature flag "${flagKey}"; returning default value`);
-      this.emitter.emit('error', error);
+      this.emitter.emit('error', this.context, error);
       this.eventProcessor.sendEvent(
         this.eventFactoryDefault.unknownFlagEvent(flagKey, defaultValue ?? null, evalContext),
       );
@@ -184,6 +275,10 @@ export default class LDClientImpl implements LDClient {
             reason,
           ),
         );
+        const error = new LDClientError(
+          `Wrong type "${type}" for feature flag "${flagKey}"; returning default value`,
+        );
+        this.emitter.emit('error', this.context, error);
         return createErrorEvaluationDetail(ErrorKinds.WrongType, defaultValue);
       }
     }
@@ -216,7 +311,6 @@ export default class LDClientImpl implements LDClient {
     return this.variationInternal(key, defaultValue, eventFactory, typeChecker);
   }
 
-  // TODO: add other typed variation functions
   boolVariation(key: string, defaultValue: boolean): boolean {
     return this.typedEval(key, defaultValue, this.eventFactoryDefault, (value) => [
       TypeValidators.Boolean.is(value),
@@ -224,6 +318,49 @@ export default class LDClientImpl implements LDClient {
     ]).value;
   }
 
+  jsonVariation(key: string, defaultValue: unknown): unknown {
+    return this.variation(key, defaultValue);
+  }
+
+  numberVariation(key: string, defaultValue: number): number {
+    return this.typedEval(key, defaultValue, this.eventFactoryDefault, (value) => [
+      TypeValidators.Number.is(value),
+      TypeValidators.Number.getType(),
+    ]).value;
+  }
+
+  stringVariation(key: string, defaultValue: string): string {
+    return this.typedEval(key, defaultValue, this.eventFactoryDefault, (value) => [
+      TypeValidators.String.is(value),
+      TypeValidators.String.getType(),
+    ]).value;
+  }
+
+  boolVariationDetail(key: string, defaultValue: boolean): LDEvaluationDetailTyped<boolean> {
+    return this.typedEval(key, defaultValue, this.eventFactoryWithReasons, (value) => [
+      TypeValidators.Boolean.is(value),
+      TypeValidators.Boolean.getType(),
+    ]);
+  }
+
+  numberVariationDetail(key: string, defaultValue: number): LDEvaluationDetailTyped<number> {
+    return this.typedEval(key, defaultValue, this.eventFactoryWithReasons, (value) => [
+      TypeValidators.Number.is(value),
+      TypeValidators.Number.getType(),
+    ]);
+  }
+
+  stringVariationDetail(key: string, defaultValue: string): LDEvaluationDetailTyped<string> {
+    return this.typedEval(key, defaultValue, this.eventFactoryWithReasons, (value) => [
+      TypeValidators.String.is(value),
+      TypeValidators.String.getType(),
+    ]);
+  }
+
+  jsonVariationDetail(key: string, defaultValue: unknown): LDEvaluationDetailTyped<unknown> {
+    return this.variationDetail(key, defaultValue);
+  }
+
   waitForInitialization(): Promise<void> {
     // TODO:
     return Promise.resolve(undefined);
diff --git a/packages/shared/sdk-client/src/api/LDClient.ts b/packages/shared/sdk-client/src/api/LDClient.ts
index 5a9c3e4b7..1ad4373a6 100644
--- a/packages/shared/sdk-client/src/api/LDClient.ts
+++ b/packages/shared/sdk-client/src/api/LDClient.ts
@@ -1,4 +1,11 @@
-import { LDContext, LDEvaluationDetail, LDFlagSet, LDFlagValue } from '@launchdarkly/js-sdk-common';
+import {
+  LDContext,
+  LDEvaluationDetail,
+  LDEvaluationDetailTyped,
+  LDFlagSet,
+  LDFlagValue,
+  LDLogger,
+} from '@launchdarkly/js-sdk-common';
 
 /**
  * The basic interface for the LaunchDarkly client. Platform-specific SDKs may add some methods of their own.
@@ -9,70 +16,75 @@ import { LDContext, LDEvaluationDetail, LDFlagSet, LDFlagValue } from '@launchda
  */
 export interface LDClient {
   /**
-   * Returns a Promise that tracks the client's initialization state.
-   *
-   * The returned Promise will be resolved once the client has either successfully initialized
-   * or failed to initialize (e.g. due to an invalid environment key or a server error). It will
-   * never be rejected.
-   *
-   * ```
-   *     // using a Promise then() handler
-   *     client.waitUntilReady().then(() => {
-   *         doSomethingWithClient();
-   *     });
-   *
-   *     // using async/await
-   *     await client.waitUntilReady();
-   *     doSomethingWithClient();
-   * ```
+   * Returns a map of all available flags to the current context's values.
    *
-   * If you want to distinguish between these success and failure conditions, use
-   * {@link waitForInitialization} instead.
+   * @returns
+   *   An object in which each key is a feature flag key and each value is the flag value.
+   *   Note that there is no way to specify a default value for each flag as there is with
+   *   {@link variation}, so any flag that cannot be evaluated will have a null value.
+   */
+  allFlags(): LDFlagSet;
+
+  /**
+   * Determines the boolean variation of a feature flag.
    *
-   * If you prefer to use event listeners ({@link on}) rather than Promises, you can listen on the
-   * client for a `"ready"` event, which will be fired in either case.
+   * If the flag variation does not have a boolean value, defaultValue is returned.
    *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
    * @returns
-   *   A Promise that will be resolved once the client is no longer trying to initialize.
+   *   The boolean value.
    */
-  waitUntilReady(): Promise<void>;
+  boolVariation(key: string, defaultValue: boolean): boolean;
 
   /**
-   * Returns a Promise that tracks the client's initialization state.
+   * Determines the boolean variation of a feature flag for a context, along with information about
+   * how it was calculated.
    *
-   * The Promise will be resolved if the client successfully initializes, or rejected if client
-   * initialization has irrevocably failed (for instance, if it detects that the SDK key is invalid).
+   * The `reason` property of the result will also be included in analytics events, if you are
+   * capturing detailed event data for this flag.
    *
-   * ```
-   *     // using Promise then() and catch() handlers
-   *     client.waitForInitialization().then(() => {
-   *         doSomethingWithSuccessfullyInitializedClient();
-   *     }).catch(err => {
-   *         doSomethingForFailedStartup(err);
-   *     });
+   * If the flag variation does not have a boolean value, defaultValue is returned. The reason will
+   * indicate an error of the type `WRONG_KIND` in this case.
    *
-   *     // using async/await
-   *     try {
-   *         await client.waitForInitialization();
-   *         doSomethingWithSuccessfullyInitializedClient();
-   *     } catch (err) {
-   *         doSomethingForFailedStartup(err);
-   *     }
-   * ```
+   * For more information, see the [SDK reference
+   * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
    *
-   * It is important that you handle the rejection case; otherwise it will become an unhandled Promise
-   * rejection, which is a serious error on some platforms. The Promise is not created unless you
-   * request it, so if you never call `waitForInitialization()` then you do not have to worry about
-   * unhandled rejections.
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
+   * @returns
+   *  The result (as an {@link LDEvaluationDetailTyped<boolean>}).
+   */
+  boolVariationDetail(key: string, defaultValue: boolean): LDEvaluationDetailTyped<boolean>;
+
+  /**
+   * Shuts down the client and releases its resources, after delivering any pending analytics
+   * events. After the client is closed, all calls to {@link variation} will return default values,
+   * and it will not make any requests to LaunchDarkly.
+   */
+  close(): void;
+
+  /**
+   * Flushes all pending analytics events.
    *
-   * Note that you can also use event listeners ({@link on}) for the same purpose: the event `"initialized"`
-   * indicates success, and `"failed"` indicates failure.
+   * Normally, batches of events are delivered in the background at intervals determined by the
+   * `flushInterval` property of {@link LDOptions}. Calling `flush()` triggers an immediate delivery.
    *
    * @returns
-   *   A Promise that will be resolved if the client initializes successfully, or rejected if it
-   *   fails.
+   *   A Promise which resolves once
+   *   flushing is finished. You can inspect the result of the flush for errors.
    */
-  waitForInitialization(): Promise<void>;
+  flush(): Promise<{ error?: Error; result: boolean }>;
+
+  /**
+   * Returns the client's current context.
+   *
+   * This is the context that was most recently passed to {@link identify}, or, if {@link identify} has never
+   * been called, the initial context specified when the client was created.
+   */
+  getContext(): LDContext;
 
   /**
    * Identifies a context to LaunchDarkly.
@@ -95,72 +107,93 @@ export interface LDClient {
   identify(context: LDContext, hash?: string): Promise<void>;
 
   /**
-   * Returns the client's current context.
+   * Determines the json variation of a feature flag.
    *
-   * This is the context that was most recently passed to {@link identify}, or, if {@link identify} has never
-   * been called, the initial context specified when the client was created.
+   * This version may be favored in TypeScript versus `variation` because it returns
+   * an `unknown` type instead of `any`. `unknown` will require a cast before usage.
+   *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
+   * @returns
+   *   The json value.
    */
-  getContext(): LDContext;
+  jsonVariation(key: string, defaultValue: unknown): unknown;
 
   /**
-   * Flushes all pending analytics events.
+   * Determines the json variation of a feature flag for a context, along with information about how it
+   * was calculated.
    *
-   * Normally, batches of events are delivered in the background at intervals determined by the
-   * `flushInterval` property of {@link LDOptions}. Calling `flush()` triggers an immediate delivery.
+   * The `reason` property of the result will also be included in analytics events, if you are
+   * capturing detailed event data for this flag.
    *
+   * This version may be favored in TypeScript versus `variation` because it returns
+   * an `unknown` type instead of `any`. `unknown` will require a cast before usage.
+   *
+   * For more information, see the [SDK reference
+   * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+   *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
    * @returns
-   *   A Promise which resolves once
-   *   flushing is finished. You can inspect the result of the flush for errors.
+   *   If you provided a callback, then nothing. Otherwise, a Promise which will be resolved with
+   *   the result (as an{@link LDEvaluationDetailTyped<unknown>}).
    */
-  flush(): Promise<{ error?: Error; result: boolean }>;
+  jsonVariationDetail(key: string, defaultValue: unknown): LDEvaluationDetailTyped<unknown>;
 
   /**
-   * Determines the variation of a feature flag for the current context.
+   * Returns the logger configured as part of LDOptions during construction.
    *
-   * In the client-side JavaScript SDKs, this is always a fast synchronous operation because all of
-   * the feature flag values for the current context have already been loaded into memory.
+   * For more, read {@link LDOptions.logger}.
+   */
+  logger: LDLogger;
+
+  /**
+   * Determines the numeric variation of a feature flag.
    *
-   * @param key
-   *   The unique key of the feature flag.
-   * @param defaultValue
-   *   The default value of the flag, to be used if the value is not available from LaunchDarkly.
+   * If the flag variation does not have a numeric value, defaultValue is returned.
+   *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
    * @returns
-   *   The flag's value.
+   *   The numeric value.
    */
-  variation(key: string, defaultValue?: LDFlagValue): LDFlagValue;
+  numberVariation(key: string, defaultValue: number): number;
 
   /**
-   * Determines the variation of a feature flag for a context, along with information about how it was
-   * calculated.
-   *
-   * Note that this will only work if you have set `evaluationExplanations` to true in {@link LDOptions}.
-   * Otherwise, the `reason` property of the result will be null.
+   * Determines the numeric variation of a feature flag for a context, along with information about
+   * how it was calculated.
    *
    * The `reason` property of the result will also be included in analytics events, if you are
    * capturing detailed event data for this flag.
    *
-   * For more information, see the [SDK reference guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#javascript).
+   * If the flag variation does not have a numeric value, defaultValue is returned. The reason will
+   * indicate an error of the type `WRONG_KIND` in this case.
    *
-   * @param key
-   *   The unique key of the feature flag.
-   * @param defaultValue
-   *   The default value of the flag, to be used if the value is not available from LaunchDarkly.
+   * For more information, see the [SDK reference
+   * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
    *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
    * @returns
-   *   An {@link LDEvaluationDetail} object containing the value and explanation.
+   *   The result (as an {@link LDEvaluationDetailTyped<number>}).
    */
-  variationDetail(key: string, defaultValue?: LDFlagValue): LDEvaluationDetail;
+  numberVariationDetail(key: string, defaultValue: number): LDEvaluationDetailTyped<number>;
 
   /**
-   * Specifies whether or not to open a streaming connection to LaunchDarkly for live flag updates.
-   *
-   * If this is true, the client will always attempt to maintain a streaming connection; if false,
-   * it never will. If you leave the value undefined (the default), the client will open a streaming
-   * connection if you subscribe to `"change"` or `"change:flag-key"` events (see {@link LDClient.on}).
+   * Deregisters an event listener. See {@link on} for the available event types.
    *
-   * This can also be set as the `streaming` property of {@link LDOptions}.
+   * @param key
+   *   The name of the event for which to stop listening.
+   * @param callback
+   *   The function to deregister.
+   * @param context
+   *   The `this` context for the callback, if one was specified for {@link on}.
    */
-  setStreaming(value?: boolean): void;
+  off(key: string, callback: (...args: any[]) => void, context?: any): void;
 
   /**
    * Registers an event listener.
@@ -203,16 +236,49 @@ export interface LDClient {
   on(key: string, callback: (...args: any[]) => void, context?: any): void;
 
   /**
-   * Deregisters an event listener. See {@link on} for the available event types.
+   * Specifies whether or not to open a streaming connection to LaunchDarkly for live flag updates.
    *
-   * @param key
-   *   The name of the event for which to stop listening.
-   * @param callback
-   *   The function to deregister.
-   * @param context
-   *   The `this` context for the callback, if one was specified for {@link on}.
+   * If this is true, the client will always attempt to maintain a streaming connection; if false,
+   * it never will. If you leave the value undefined (the default), the client will open a streaming
+   * connection if you subscribe to `"change"` or `"change:flag-key"` events (see {@link LDClient.on}).
+   *
+   * This can also be set as the `streaming` property of {@link LDOptions}.
    */
-  off(key: string, callback: (...args: any[]) => void, context?: any): void;
+  setStreaming(value?: boolean): void;
+
+  /**
+   * Determines the string variation of a feature flag.
+   *
+   * If the flag variation does not have a string value, defaultValue is returned.
+   *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
+   * @returns
+   *   The string value.
+   */
+  stringVariation(key: string, defaultValue: string): string;
+
+  /**
+   * Determines the string variation of a feature flag for a context, along with information about
+   * how it was calculated.
+   *
+   * The `reason` property of the result will also be included in analytics events, if you are
+   * capturing detailed event data for this flag.
+   *
+   * If the flag variation does not have a string value, defaultValue is returned. The reason will
+   * indicate an error of the type `WRONG_KIND` in this case.
+   *
+   * For more information, see the [SDK reference
+   * guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#react-native).
+   *
+   * @param key The unique key of the feature flag.
+   * @param defaultValue The default value of the flag, to be used if the value is not available
+   *   from LaunchDarkly.
+   * @returns
+   *   The result (as an {@link LDEvaluationDetailTyped<string>}).
+   */
+  stringVariationDetail(key: string, defaultValue: string): LDEvaluationDetailTyped<string>;
 
   /**
    * Track page events to use in goals or A/B tests.
@@ -234,19 +300,105 @@ export interface LDClient {
   track(key: string, data?: any, metricValue?: number): void;
 
   /**
-   * Returns a map of all available flags to the current context's values.
+   * Determines the variation of a feature flag for the current context.
    *
+   * In the client-side JavaScript SDKs, this is always a fast synchronous operation because all of
+   * the feature flag values for the current context have already been loaded into memory.
+   *
+   * @param key
+   *   The unique key of the feature flag.
+   * @param defaultValue
+   *   The default value of the flag, to be used if the value is not available from LaunchDarkly.
    * @returns
-   *   An object in which each key is a feature flag key and each value is the flag value.
-   *   Note that there is no way to specify a default value for each flag as there is with
-   *   {@link variation}, so any flag that cannot be evaluated will have a null value.
+   *   The flag's value.
    */
-  allFlags(): LDFlagSet;
+  variation(key: string, defaultValue?: LDFlagValue): LDFlagValue;
 
   /**
-   * Shuts down the client and releases its resources, after delivering any pending analytics
-   * events. After the client is closed, all calls to {@link variation} will return default values,
-   * and it will not make any requests to LaunchDarkly.
+   * Determines the variation of a feature flag for a context, along with information about how it was
+   * calculated.
+   *
+   * Note that this will only work if you have set `evaluationExplanations` to true in {@link LDOptions}.
+   * Otherwise, the `reason` property of the result will be null.
+   *
+   * The `reason` property of the result will also be included in analytics events, if you are
+   * capturing detailed event data for this flag.
+   *
+   * For more information, see the [SDK reference guide](https://docs.launchdarkly.com/sdk/features/evaluation-reasons#javascript).
+   *
+   * @param key
+   *   The unique key of the feature flag.
+   * @param defaultValue
+   *   The default value of the flag, to be used if the value is not available from LaunchDarkly.
+   *
+   * @returns
+   *   An {@link LDEvaluationDetail} object containing the value and explanation.
    */
-  close(): void;
+  variationDetail(key: string, defaultValue?: LDFlagValue): LDEvaluationDetail;
+
+  /**
+   * Returns a Promise that tracks the client's initialization state.
+   *
+   * The Promise will be resolved if the client successfully initializes, or rejected if client
+   * initialization has irrevocably failed (for instance, if it detects that the SDK key is invalid).
+   *
+   * ```
+   *     // using Promise then() and catch() handlers
+   *     client.waitForInitialization().then(() => {
+   *         doSomethingWithSuccessfullyInitializedClient();
+   *     }).catch(err => {
+   *         doSomethingForFailedStartup(err);
+   *     });
+   *
+   *     // using async/await
+   *     try {
+   *         await client.waitForInitialization();
+   *         doSomethingWithSuccessfullyInitializedClient();
+   *     } catch (err) {
+   *         doSomethingForFailedStartup(err);
+   *     }
+   * ```
+   *
+   * It is important that you handle the rejection case; otherwise it will become an unhandled Promise
+   * rejection, which is a serious error on some platforms. The Promise is not created unless you
+   * request it, so if you never call `waitForInitialization()` then you do not have to worry about
+   * unhandled rejections.
+   *
+   * Note that you can also use event listeners ({@link on}) for the same purpose: the event `"initialized"`
+   * indicates success, and `"failed"` indicates failure.
+   *
+   * @returns
+   *   A Promise that will be resolved if the client initializes successfully, or rejected if it
+   *   fails.
+   */
+  waitForInitialization(): Promise<void>;
+
+  /**
+   * Returns a Promise that tracks the client's initialization state.
+   *
+   * The returned Promise will be resolved once the client has either successfully initialized
+   * or failed to initialize (e.g. due to an invalid environment key or a server error). It will
+   * never be rejected.
+   *
+   * ```
+   *     // using a Promise then() handler
+   *     client.waitUntilReady().then(() => {
+   *         doSomethingWithClient();
+   *     });
+   *
+   *     // using async/await
+   *     await client.waitUntilReady();
+   *     doSomethingWithClient();
+   * ```
+   *
+   * If you want to distinguish between these success and failure conditions, use
+   * {@link waitForInitialization} instead.
+   *
+   * If you prefer to use event listeners ({@link on}) rather than Promises, you can listen on the
+   * client for a `"ready"` event, which will be fired in either case.
+   *
+   * @returns
+   *   A Promise that will be resolved once the client is no longer trying to initialize.
+   */
+  waitUntilReady(): Promise<void>;
 }
diff --git a/packages/shared/sdk-client/src/api/LDEmitter.test.ts b/packages/shared/sdk-client/src/api/LDEmitter.test.ts
index 9783b55da..8a66a1718 100644
--- a/packages/shared/sdk-client/src/api/LDEmitter.test.ts
+++ b/packages/shared/sdk-client/src/api/LDEmitter.test.ts
@@ -97,6 +97,7 @@ describe('LDEmitter', () => {
     emitter.emit('error');
 
     expect(emitter.listenerCount('error')).toEqual(1);
+    expect(errorHandler1).toBeCalled();
     expect(errorHandler2).not.toBeCalled();
   });
 
diff --git a/packages/shared/sdk-client/src/api/LDEmitter.ts b/packages/shared/sdk-client/src/api/LDEmitter.ts
index 53ad6be38..8c5350748 100644
--- a/packages/shared/sdk-client/src/api/LDEmitter.ts
+++ b/packages/shared/sdk-client/src/api/LDEmitter.ts
@@ -1,4 +1,4 @@
-export type EventName = 'change' | 'ready' | 'failed' | 'error';
+export type EventName = 'connecting' | 'ready' | 'error' | 'change';
 
 type CustomEventListeners = {
   original: Function;
diff --git a/packages/shared/sdk-client/src/evaluation/fetchUtils.ts b/packages/shared/sdk-client/src/evaluation/fetchUtils.ts
index ded227f76..ea415ee64 100644
--- a/packages/shared/sdk-client/src/evaluation/fetchUtils.ts
+++ b/packages/shared/sdk-client/src/evaluation/fetchUtils.ts
@@ -1,19 +1,14 @@
-import { defaultHeaders, Encoding, Info, LDContext, Options } from '@launchdarkly/js-sdk-common';
+import {
+  base64UrlEncode,
+  defaultHeaders,
+  Encoding,
+  Info,
+  LDContext,
+  Options,
+} from '@launchdarkly/js-sdk-common';
 
 import Configuration from '../configuration';
 
-/**
- * In react-native use base64-js to polyfill btoa. This is safe
- * because the react-native repo uses it too. Set the global.btoa to the encode
- * function of base64-js.
- * https://github.com/beatgammit/base64-js
- * https://github.com/axios/axios/issues/2235#issuecomment-512204616
- *
- * Ripped from https://thewoods.blog/base64url/
- */
-export const base64UrlEncode = (s: string, encoding: Encoding): string =>
-  encoding.btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-
 export const createFetchPath = (
   sdkKey: string,
   context: LDContext,