React Native SDK

Installation

Install the FeedbackKit React Native SDK along with its peer dependency feedbackkit-js using npm or yarn.

# Using npm
npm install feedbackkit-react-native feedbackkit-js @react-native-async-storage/async-storage

# Using yarn
yarn add feedbackkit-react-native feedbackkit-js @react-native-async-storage/async-storage

Note: feedbackkit-js and AsyncStorage are peer dependencies and must be installed separately. Peers are feedbackkit-js >=1.0.0, React >= 18, React Native >= 0.70, and AsyncStorage >= 1.17. Metrics hooks need feedbackkit-js >= 2.1.0, which is not on npm. The peer range stays open at the bottom so an app that only uses the feedback hooks can stay on 1.0.1. On a bare React Native app, run pod install so AsyncStorage's iOS side is linked.

Quick Start

Wrap your app with FeedbackProvider and start using the components and hooks.

import React from 'react';
import { FeedbackProvider, FeedbackList } from 'feedbackkit-react-native';

export default function App() {
    return (
        <FeedbackProvider
            apiKey="your-api-key"
            userId="user_12345"
        >
            <FeedbackList
                onFeedbackPress={(feedback) => console.log(feedback.title)}
            />
        </FeedbackProvider>
    );
}

FeedbackProvider

The FeedbackProvider component wraps your app and provides the FeedbackKit context to all child components.

Props

Context Value

useFeedbackKitContext() returns the context below. useFeedbackKit() returns only the client. There is no projectId prop. The component name is FeedbackProvider.

User ID and anonymous IDs

useVote, useSubmitFeedback, and useComments throw User ID is required… until the context id is set. Vote and submit throw before error is set. Comments store that failure on addError. List and detail reads still run with no id.

The provider does not mint an id. It loads @feedbackkit/userId from AsyncStorage when the userId prop is omitted, and it persists the prop and every setUserId call. A prop that arrives while the stored id is still loading is kept. Generate one stable id for anonymous users and pass it in. A new id on each launch lets the same person vote twice.

feedbackkit-js can mint local_<uuid> when a direct client call omits userId. On React Native that value is memory-only, the provider clears it when the context id is unset, and the hooks do not send it.

Hooks

The React Native SDK provides custom hooks for managing feedback, votes, and comments with built-in state management.

const { client, userId, setUserId } = useFeedbackKitContext();

const {
    feedbacks,
    isLoading,
    error,
    refetch,
    filter,
    setFilter
} = useFeedbackList({ status: FeedbackStatus.Pending });

const { feedback, isLoading, error, refetch } = useFeedback('feedback-id');

const { vote, unvote, isVoting, error } = useVote();

// Vote for feedback. The user id comes from the provider.
await vote('feedback-id', {
    email: 'user@example.com',
    notifyStatusChange: true,
    subscribeToMailingList: true,
    mailingListEmailTypes: ['operational', 'marketing']
});

// Remove vote
await unvote('feedback-id');

const {
    comments,
    isLoading,
    error,
    addError,
    refetch,
    addComment,
    isAdding
} = useComments('feedback-id');

// Add a comment. addComment takes the text, not an object.
await addComment('Great idea!');

// Admin reply. Throws, and does not call the API, unless bearerToken was set.
await addComment('Shipped in 2.4.', true);

const { submit, isSubmitting, error, clearError } = useSubmitFeedback();

const created = await submit({
    title: 'Dark mode',
    description: 'Please add dark mode',
    category: FeedbackCategory.FeatureRequest,
    userEmail: 'user@example.com',
    subscribeToMailingList: true,
    mailingListEmailTypes: ['operational']
});

// Free plan, eleventh item: the promise resolves. Later reads omit the row. Not a 402.
if (created.isHiddenOverLimit) {
    console.log(created.id);
}

Components

Pre-built React Native components for common feedback UI patterns.

Theming

Customize the appearance of FeedbackKit components by providing a custom theme to the FeedbackProvider.

FeedbackKitTheme Interface

Custom Theme Example

import { FeedbackKitTheme } from 'feedbackkit-react-native';

const darkTheme: FeedbackKitTheme = {
    primaryColor: '#F59E0B',
    backgroundColor: '#1F2937',
    cardBackgroundColor: '#374151',
    textColor: '#F9FAFB',
    secondaryTextColor: '#9CA3AF',
    borderColor: '#4B5563',
    errorColor: '#EF4444',
    successColor: '#10B981',
    borderRadius: 12,
    spacing: 16
};

<FeedbackProvider apiKey="..." theme={darkTheme}>
    {...}
</FeedbackProvider>

Models & Types

The React Native SDK re-exports all models and types from feedbackkit-js. See the JavaScript SDK documentation for the complete type reference.

Core Types

• • Feedback - Complete feedback object with metadata
• • FeedbackStatus - Enum: pending, approved, in_progress, testflight, completed, rejected
• • FeedbackCategory - Enum: feature_request, bug_report, improvement, other. There is no question category
• • Comment - Comment object with user info
• • VoteResponse - Vote result with updated counts

Events

The components do not track views. useFeedbackKit().events.track does. eventName and userId are required. Property values must be strings, finite numbers, or booleans.

SDKEvents is feedback_list, feedback_detail, and submit_feedback. Any other name is a custom event. Custom events are stored on every plan. Below Pro they are omitted from a successful metrics read (meta.eventScope === 'predefined_only'). client.users.register({ userId, mrr }) records the id and an optional monthly amount. It has no email or name field.

const client = useFeedbackKit();
const userId = 'user_12345';

await client.events.track({
  eventName: SDKEvents.FeedbackList,
  userId,
  properties: { source: 'settings' }
});

Metrics

Four hooks read the same API-key metrics family as feedbackkit-js >= 2.1.0. That client is not on npm, and these hooks are not in feedbackkit-react-native 1.0.1. Pass a query with a non-empty measures list and either days or a date pair. A clamped window is a successful response: read meta.retentionClamped and meta.retentionWindowDays. The windows are Free 30 days, Pro 90 days, and Team 365 days. summary.meta.granularity is omitted on the summary, not null. The event feed puts pagination on events.meta and the window block on events.metrics. Three reads throw PaymentRequiredError with code === 'METRICS_CUSTOM_EVENTS_REQUIRE_PRO' below Pro: a breakdown by event name, a custom eventName filter, and the raw event feed. Bearer-only measures throw ForbiddenError with code === 'METRICS_MEASURE_REQUIRES_BEARER'. On 14 October 2026 the production API answered 404 for /api/v1/metrics/summary, and the dev and testflight APIs answered 401 (the route exists).

• useMetrics loads the summary.
• useMetricsTimeseries, useMetricsBreakdown, and useMetricsEvents load the other three reads.

const { summary, error } = useMetrics({
  measures: [MetricMeasure.FeedbackCount, MetricMeasure.EventCount],
  days: 7
});

Error Handling

The React Native SDK uses the same error hierarchy as the JavaScript SDK. All of these extend FeedbackKitError. The missing-user-id failure from vote and submit is a plain Error, and it is not written to the hook's error.

import {
    AuthenticationError,
    PaymentRequiredError,
    NetworkError,
    MetricMeasure,
    useMetricsEvents
} from 'feedbackkit-react-native';

const { error } = useMetricsEvents({
    measures: [MetricMeasure.EventCount],
    days: 7
});

if (error instanceof AuthenticationError) {
    // 401. Key missing, wrong, or regenerated.
} else if (error instanceof PaymentRequiredError &&
           error.code === 'METRICS_CUSTOM_EVENTS_REQUIRE_PRO') {
    // 402. The raw event feed on a plan without custom metrics.
} else if (error instanceof NetworkError) {
    // The request never completed.
}