Add feedback and feature voting to a React Native app

Install the SDK and safe-area dependency

The sheet needs safe-area information to avoid notches, home indicators, and navigation bars. Install both packages before wiring the provider.

npm install @upstep/react-native react-native-safe-area-context

Wrap the application once

FeedbackProvider owns the API client and sheet state. Place it high enough that any signed-in screen can open feedback, but do not mount multiple providers for the same project.

import { FeedbackProvider, FeedbackButton, FeedbackSheet } from "@upstep/react-native";

export default function App() {
  return (
    <FeedbackProvider apiKey={process.env.EXPO_PUBLIC_UPSTEP_KEY!}>
      <AppNavigator />
      <FeedbackButton />
      <FeedbackSheet />
    </FeedbackProvider>
  );
}

Use a build-time environment variable

Expose only the Upstep project key to the client. Keep your database, payment, and authentication secrets server-side. For Expo, use an EXPO_PUBLIC variable; for bare React Native, inject configuration with your existing build configuration.

• Create a separate Upstep project for staging.
• Confirm the production key is set in the CI release environment.

# .env
EXPO_PUBLIC_UPSTEP_KEY=upstep_your_project_key

Identify a customer after authentication

A stable internal ID lets the SDK associate feedback and deduplicate votes. The provider can receive userId initially, or you can identify a user later through the hook once your session has loaded.

import { useEffect } from "react";
import { useUpstep } from "@upstep/react-native";

function SyncFeedbackIdentity({ userId }: { userId?: string }) {
  const { identify } = useUpstep();
  useEffect(() => identify(userId), [identify, userId]);
  return null;
}

Open feedback from your own interface

The floating launcher is optional. Use the same sheet from a Settings row, help center, or error screen so feedback appears at the moment a customer has context to share.

import { useUpstep } from "@upstep/react-native";

function HelpRow() {
  const { openSheet } = useUpstep();
  return <Pressable onPress={openSheet}><Text>Send feedback</Text></Pressable>;
}

Tune the default launcher

If you retain the default button, it can be positioned and labeled to match the app. Keep it clear of your tab bar and avoid using a label that competes with support or account actions.

<FeedbackButton
  position="bottom-right"
  label="Share feedback"
/>

Test on physical devices

Use a real Android device and iPhone before release. Check keyboard behaviour, safe areas, anonymous submission, identified voting, and a slow network connection.