diff --git a/.changeset/young-pandas-suspend.md b/.changeset/young-pandas-suspend.md new file mode 100644 index 000000000..182d193b1 --- /dev/null +++ b/.changeset/young-pandas-suspend.md @@ -0,0 +1,5 @@ +--- +"@reflag/react-native-sdk": patch +--- + +Add Suspense support for `useFlag` while flags are loading via provider-level and per-hook `suspense` options. diff --git a/packages/react-native-sdk/README.md b/packages/react-native-sdk/README.md index 5c926ebed..314a2c032 100644 --- a/packages/react-native-sdk/README.md +++ b/packages/react-native-sdk/README.md @@ -104,6 +104,24 @@ 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. 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, };