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.

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.
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(() => {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.

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