getuserfeedback.
Docs

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-webview

For a bare React Native iOS project, link the native dependency after installation:

npx pod-install

The 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-webview

2. Add the provider

Wrap your app with GetUserFeedbackProvider. This creates the widget client and makes it available to all hooks below it. Keep it mounted across login and logout transitions.

The provider does not read your app's authentication state. The identity setup below controls identity-based targeting.

TypeScriptapp.tsx
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.

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.

TypeScriptidentify-user.tsx
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(() => {async function identifyUser() {try {await client.identify(id, { email, plan });} catch (error) {console.error("Unable to identify user", error);}}void identifyUser();}, [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.

To make a flow eligible only after the app supplies user identity, turn on Require identity in the flow's Settings. This checks for supplied identity; it does not prove authentication. Use Identity verification when widget requests need signed proof.

In your app's authoritative logout handler, await reset() before another user can enter the same provider tree. reset() is asynchronous: it closes open flows, clears JWT authentication, and resets the current user identity. Other runtime configuration remains in place.

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