React Native SDK v1.0.1

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

# Using yarn
yarn add feedbackkit-react-native feedbackkit-js

Note: feedbackkit-js is a peer dependency and must be installed separately. The React Native SDK is built on top of the JavaScript SDK and provides native components and hooks.

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

The provider exposes the following context value accessible via useFeedbackKit():

Hooks

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

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

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
await vote('feedback-id', { userId: 'user_12345' });

// Remove vote
await unvote('feedback-id', { userId: 'user_12345' });

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

// Add a comment
await addComment({
    content: 'Great idea!',
    userId: 'user_12345'
});

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

const created = await submit({
    title: 'Dark mode',
    description: 'Please add dark mode',
    category: FeedbackCategory.FeatureRequest,
    userId: 'user_12345'
});

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: bug_report, feature_request, improvement, question, other
• • Comment - Comment object with user info
• • VoteResponse - Vote result with updated counts

Error Handling

The React Native SDK uses the same error hierarchy as the JavaScript SDK. All errors extend the base FeedbackKitError class.

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

const { submit, error } = useSubmitFeedback();

if (error instanceof AuthenticationError) {
    // Invalid API key
} else if (error instanceof PaymentRequiredError) {
    // Upgrade plan required
} else if (error instanceof NetworkError) {
    // Check internet connection
}