React Native SDK
Add the provider, identify your users, and you're live.
- Last reviewed
React Native SDK
The React Native SDK gives you a provider and hooks to add getuserfeedback.com to your React Native app.
Install & setup
1. Install
Install the SDK and its react-native-webview peer dependency:
npm install @getuserfeedback/react-native react-native-webviewFor a bare React Native iOS project, link the native dependency after installation:
npx pod-installThe SDK requires react >= 18, react-native >= 0.73, and
react-native-webview >= 13.
If you use Expo, let Expo choose the compatible WebView version:
npm install @getuserfeedback/react-nativenpx expo install react-native-webview2. Add the provider
Wrap your app with GetUserFeedbackProvider. This creates the widget client
and makes it available to all hooks below it.
Where you place the provider matters:
- Wrap your entire app if you want to reach all users — including visitors who haven't signed in, pre-login screens, and public-facing surfaces.
- Wrap just below your auth provider if you only want to target authenticated users.
import { GetUserFeedbackProvider } from "@getuserfeedback/react-native";export function App() {return (<GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}><AppRoutes /></GetUserFeedbackProvider>);}The only required option is apiKey — find it in
Widget settings.
You're live
That's it. The widget is running. Published flows — surveys, forms, and in-app messages — will show up when their delivery and targeting rules match.
Recommended additional setup
3. Identify your users
If your app has logged-in users, identifying them lets you use targeting, personalization, and behavioral segmentation.
Render this after your app has an authenticated user object.
import { useEffect } from "react";import { useGetUserFeedback } from "@getuserfeedback/react-native";function IdentifyUser({user,}: {user: { id: string; email: string; plan: string };}) {const client = useGetUserFeedback();const { email, id, plan } = user;useEffect(() => {void client.identify(id, { email, plan }).catch((error) => console.error("Unable to identify user", error));}, [client, email, id, plan]);return null;}This step is optional — flows work fine without it. But with user identity, you can target by plan, role, or behavior, and responses are tied to real people. See Personalization for the full picture.
Call and await reset() on logout so the previous user's identity doesn't
carry over.
Use your own flow container
By default, the SDK displays flows in its built-in overlay. For a more native experience, render the flow inside your app's sheet, drawer, modal, or inline container instead.
Use useFlowContainer() to control the surrounding UI and render
FlowContent inside it. See Containers for
the complete React Native example and lifecycle guidance.
Track product events
We recommend sending product events server-side through an integration such as
Segment. If client-side tracking fits your app better, use track().
You can call track() before or after login. When the same person is later
identified, Identity resolution merges
their events into a single profile. See the Events
page for event naming and payload guidance. For native screen tracking, see
React Native screen tracking.
Dark mode
The widget supports light, dark, and system color schemes. Set a specific
scheme through clientOptions or client.configure(). See the Dark
mode page for the full story on detection and
configuration.
Privacy & consent
By default, the widget starts with granted consent. If you need GDPR or CCPA
compliance, set defaultConsent to "pending" and sync decisions from your
consent manager with client.configure().
Consent settings do not block response collection or flows opened from code. They can prevent automatic targeting when its rules need measurement or storage. See Compliance & consent for the full guide.
Troubleshooting
If a flow does not appear, confirm that the provider is above the component
using the SDK, the API key and flow belong to the same workspace, and the flow
is published with the expected delivery and targeting settings. Identity-based
targeting also requires identify() to finish first, and the app build must
include react-native-webview.
Pass onError to GetUserFeedbackProvider to send runtime errors to your
logger. Command methods still return promises, so await or catch them where
you call them.
Going further
- Personalization — targeting, personalization, and behavioral segmentation
- Dark mode — intelligent color scheme detection
- Open Widget flows from code — trigger flows from buttons, menus, or code
- Containers — render inside your own sheet, drawer, dialog, or inline container
- React Native SDK reference — provider props, client options, hooks, and flow controls