From 1e7741979af77c9286ec554c6ecb22785156f9c6 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Tue, 4 Aug 2026 13:14:09 +0200 Subject: [PATCH 1/5] Document React Native Suspense support --- .changeset/young-pandas-suspend.md | 5 +++++ packages/react-native-sdk/README.md | 18 ++++++++++++++++++ packages/react-native-sdk/src/index.tsx | 2 ++ 3 files changed, 25 insertions(+) create mode 100644 .changeset/young-pandas-suspend.md diff --git a/.changeset/young-pandas-suspend.md b/.changeset/young-pandas-suspend.md new file mode 100644 index 000000000..f2b2ad4b9 --- /dev/null +++ b/.changeset/young-pandas-suspend.md @@ -0,0 +1,5 @@ +--- +"@reflag/react-native-sdk": patch +--- + +Re-export `UseFlagOptions` and document the React Native SDK's inherited Suspense support. diff --git a/packages/react-native-sdk/README.md b/packages/react-native-sdk/README.md index 5c926ebed..adeebabb1 100644 --- a/packages/react-native-sdk/README.md +++ b/packages/react-native-sdk/README.md @@ -48,6 +48,24 @@ function StartHuddleButton() { See the [React SDK README](../react-sdk/README.md) for more details. +### Suspense loading + +React Native uses the same Suspense support as the React SDK. Enable it for the provider and wrap components that call `useFlag` in a Suspense boundary: + +```tsx +import { Suspense } from "react"; +import { ActivityIndicator } from "react-native"; +import { ReflagProvider } from "@reflag/react-native-sdk"; + + + }> + + +; +``` + +You can also override the behavior for one call with `useFlag("huddle", { suspense: true })`. + ## React Native differences - The Reflag toolbar is web-only and is not available in React Native. diff --git a/packages/react-native-sdk/src/index.tsx b/packages/react-native-sdk/src/index.tsx index 33450e098..c2435805f 100644 --- a/packages/react-native-sdk/src/index.tsx +++ b/packages/react-native-sdk/src/index.tsx @@ -22,6 +22,7 @@ import type { StorageAdapter, TrackEvent, TypedFlags, + UseFlagOptions, UserContext, } from "@reflag/react-sdk"; import { @@ -84,6 +85,7 @@ export type { StorageAdapter, TrackEvent, TypedFlags, + UseFlagOptions, UserContext, }; From 51788b466f3a4c3cdc2406995f7596fa6b704fc3 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Tue, 4 Aug 2026 13:19:48 +0200 Subject: [PATCH 2/5] Clarify React Native Suspense changelog --- .changeset/young-pandas-suspend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/young-pandas-suspend.md b/.changeset/young-pandas-suspend.md index f2b2ad4b9..d0199e6fd 100644 --- a/.changeset/young-pandas-suspend.md +++ b/.changeset/young-pandas-suspend.md @@ -2,4 +2,4 @@ "@reflag/react-native-sdk": patch --- -Re-export `UseFlagOptions` and document the React Native SDK's inherited Suspense support. +Add Suspense support for `useFlag` while flags are loading via provider-level and per-hook `suspense` options. Re-export `UseFlagOptions` and document React Native usage. From 6650984aabb01a8882b66a51b5e294a9f835a919 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Tue, 4 Aug 2026 13:32:41 +0200 Subject: [PATCH 3/5] update changelog Re-export `UseFlagOptions` and document React Native usage. --- .changeset/young-pandas-suspend.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/young-pandas-suspend.md b/.changeset/young-pandas-suspend.md index d0199e6fd..182d193b1 100644 --- a/.changeset/young-pandas-suspend.md +++ b/.changeset/young-pandas-suspend.md @@ -2,4 +2,4 @@ "@reflag/react-native-sdk": patch --- -Add Suspense support for `useFlag` while flags are loading via provider-level and per-hook `suspense` options. Re-export `UseFlagOptions` and document React Native usage. +Add Suspense support for `useFlag` while flags are loading via provider-level and per-hook `suspense` options. From 27f9155dc17eac9216fdc8a41afbd7acaa6468f8 Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Tue, 4 Aug 2026 13:34:17 +0200 Subject: [PATCH 4/5] Revise Suspense loading instructions in README Updated the Suspense loading section with new usage instructions and removed outdated information. --- packages/react-native-sdk/README.md | 38 +++++++++++++++-------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/react-native-sdk/README.md b/packages/react-native-sdk/README.md index adeebabb1..99c8df32e 100644 --- a/packages/react-native-sdk/README.md +++ b/packages/react-native-sdk/README.md @@ -48,24 +48,6 @@ function StartHuddleButton() { See the [React SDK README](../react-sdk/README.md) for more details. -### Suspense loading - -React Native uses the same Suspense support as the React SDK. Enable it for the provider and wrap components that call `useFlag` in a Suspense boundary: - -```tsx -import { Suspense } from "react"; -import { ActivityIndicator } from "react-native"; -import { ReflagProvider } from "@reflag/react-native-sdk"; - - - }> - - -; -``` - -You can also override the behavior for one call with `useFlag("huddle", { suspense: true })`. - ## React Native differences - The Reflag toolbar is web-only and is not available in React Native. @@ -122,6 +104,26 @@ export function App() { } ``` + +## Suspense loading + +Enable `` support by setting the `suspense` prop on the provider and wrap components that call `useFlag` in a Suspense boundary: + +```tsx +import { Suspense } from "react"; +import { ActivityIndicator } from "react-native"; +import { ReflagProvider } from "@reflag/react-native-sdk"; + + + }> + + +; +``` + +You can also override the behavior for one call with `useFlag("huddle", { suspense: true })`. + + ## Bootstrapping You can use `` in React Native when you already have pre-fetched flags and want to avoid an initial fetch. From 809603a5bd240169e6bdeeb0c8ee740ca355d1be Mon Sep 17 00:00:00 2001 From: Ron Cohen Date: Tue, 4 Aug 2026 13:40:58 +0200 Subject: [PATCH 5/5] Format React Native README --- packages/react-native-sdk/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-native-sdk/README.md b/packages/react-native-sdk/README.md index 99c8df32e..314a2c032 100644 --- a/packages/react-native-sdk/README.md +++ b/packages/react-native-sdk/README.md @@ -104,7 +104,6 @@ export function App() { } ``` - ## Suspense loading Enable `` support by setting the `suspense` prop on the provider and wrap components that call `useFlag` in a Suspense boundary: @@ -123,7 +122,6 @@ import { ReflagProvider } from "@reflag/react-native-sdk"; You can also override the behavior for one call with `useFlag("huddle", { suspense: true })`. - ## Bootstrapping You can use `` in React Native when you already have pre-fetched flags and want to avoid an initial fetch.