@newsoftglobal/feedbackkit-reactnative

FeedbackKit SDK for React Native — collect user feedback with screenshots, comments, and tracking.

Works with both Expo and bare React Native projects. No native modules required.

Installation

npm install @newsoftglobal/feedbackkit-reactnative react-native-view-shot

For Expo projects:

npx expo install @newsoftglobal/feedbackkit-reactnative react-native-view-shot

Quick Start

1. Wrap your app with the Provider

import { FeedbackKitProvider, FeedbackWidget } from '@newsoftglobal/feedbackkit-reactnative';
import ViewShot from 'react-native-view-shot';

export default function App() {
  const viewRef = useRef();

  return (
    <FeedbackKitProvider apiKey="your-api-key">
      <ViewShot ref={viewRef} style={{ flex: 1 }}>
        {/* Your app content */}
        <HomeScreen />
      </ViewShot>
      <FeedbackWidget viewShotRef={viewRef} />
    </FeedbackKitProvider>
  );
}

2. (Without screenshot support)

<FeedbackKitProvider apiKey="your-api-key">
  <App />
  <FeedbackWidget />
</FeedbackKitProvider>

3. User identification

import { useFeedbackKit } from '@newsoftglobal/feedbackkit-reactnative';

function ProfileScreen() {
  const { setUser, clearUser, hasUser } = useFeedbackKit();

  const onLogin = (user) => {
    setUser({
      id: user.uid,
      email: user.email,
      name: user.displayName
    });
  };

  const onLogout = () => {
    clearUser();
  };

  // ...
}

API Reference

<FeedbackKitProvider>

| Prop | Type | Required | Description | | -------- | -------- | -------- | -------------------- | | apiKey | string | ✅ | Your FeedbackKit API key |

<FeedbackWidget>

| Prop | Type | Required | Description | | -------------- | ----- | -------- | ------------------------------------------ | | viewShotRef | ref | ❌ | Ref to a <ViewShot> component for screenshots |

useFeedbackKit() Hook

| Return | Type | Description | | -------------- | ---------- | ---------------------------------- | | setUser() | Function | Set user info { id, email, name } | | clearUser() | Function | Clear current user | | user | Object | Current user state | | hasUser | boolean | Whether a user is currently set |

Features

• 🎨 Beautiful dark UI matching the FeedbackKit design system
• 📸 Screenshot capture via react-native-view-shot
• 📝 Feedback form with type selection (Bug, Feature, Improve, Other)
• 📋 My Feedbacks list with status tracking
• 💬 Comment thread for two-way communication
• 👤 User identification for linking feedback to users
• 📱 Works with Expo — no ejecting required

License

MIT