From c801293049f1f83921b89692973c231f9b69a021 Mon Sep 17 00:00:00 2001
From: Brock Lumbard <brock@statsig.com>
Date: Mon, 23 Dec 2024 14:48:02 -0600
Subject: [PATCH] loading in RN

---
 .../javascript-mono/_reactNativeAdvanced.mdx  |  2 +-
 .../_reactNativeLoadingState.mdx              | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 docs/client/javascript-mono/_reactNativeLoadingState.mdx

diff --git a/docs/client/javascript-mono/_reactNativeAdvanced.mdx b/docs/client/javascript-mono/_reactNativeAdvanced.mdx
index 816c795e8..50419c282 100644
--- a/docs/client/javascript-mono/_reactNativeAdvanced.mdx
+++ b/docs/client/javascript-mono/_reactNativeAdvanced.mdx
@@ -3,7 +3,7 @@
 ### StatsigClient Outside the Component Tree
 
 In some scenarios, you may need to use the `StatsigClient` when you are not in the React component tree. Things like background tasks or handling notifications. 
-For these, you can use the Expo specific `StatsigClientRN`.
+For these, you can use the RN-specific `StatsigClientRN`.
 
 ```typescript
 import { StatsigClientRN } from '@statsig/react-native-bindings';
diff --git a/docs/client/javascript-mono/_reactNativeLoadingState.mdx b/docs/client/javascript-mono/_reactNativeLoadingState.mdx
new file mode 100644
index 000000000..85f2baf76
--- /dev/null
+++ b/docs/client/javascript-mono/_reactNativeLoadingState.mdx
@@ -0,0 +1,58 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+
+## Loading State
+
+Dependent on your setup, you may want to wait for the latest values before checking a gate or experiment. 
+If you are using the `StatsigProviderRN`, you can pass in a `loadingComponent` prop to display a loading state while the SDK is initializing. 
+If you are using the `useClientAsyncInitRN` hook, you can check the `isLoading` prop to determine if the SDK is still loading.
+
+
+<Tabs
+  defaultValue="provider"
+  groupId="react-usage-choice"
+  values={[
+    {label: 'StatsigProviderRN', value: 'provider'},
+    {label: 'useClientAsyncInitRN', value: 'client'},
+  ]}>
+
+  <TabItem value="provider">
+
+```tsx
+export function App() {
+  const loadingComponent = <div>Loading...</div>;
+
+  return (
+    <StatsigProviderRN
+      ...
+      loadingComponent={loadingComponent} // <- Pass in the loading component
+    > 
+        <YourComponent />
+    </StatsigProviderRN>
+  );
+}
+```
+
+  </TabItem>
+  <TabItem value="client">
+
+```tsx
+export function App() {
+  const { client, isLoading } = useClientAsyncInitRN(...);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <StatsigProviderRN client={client}>
+      <YourComponent />
+    </StatsigProviderRN>
+  );
+}
+```
+
+  </TabItem>
+</Tabs>
+