📦 React Native Feedback Hub

A comprehensive React Native SDK for collecting user feedback with seamless integration to Slack, Jira, Discord and Microsoft Teams or your Custom Webhook. Features include screenshot capture, screen recording, and customizable UI.

✨ Features

• 🚀 Multi-platform Integration: Slack, Jira, Discord, Microsoft Teams
• 📸 Screenshot Capture: Built-in screenshot functionality
• 🎥 Screen Recording: Record user interactions
• 🎨 Customizable UI: Floating button positioning
• 📱 React Native Optimized: Designed specifically for React Native apps
• 🔒 Type Safe: Complete TypeScript support
• ♿ Accessible: WCAG AA compliant color system
• 📚 Well Documented: Comprehensive setup guides

📦 Installation

npm install react-native-feedback-hub
# or
yarn add react-native-feedback-hub

Peer Dependencies

• react >= 17.0.0
• react-native >= 0.70.0

Note: Other libraries like react-native-svg, react-native-fs, react-native-view-shot, react-native-record-screen, and react-native-create-thumbnail are regular dependencies of this package and are installed automatically when you install react-native-feedback-hub.

If IOS build fails due to react-native-record-screen: Use Patch

Platform Setup

For iOS, add the following permissions to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app needs access to camera to capture screenshots</string>

For Android, add the following permissions to your AndroidManifest.xml:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

---

🧵 Supported Integrations

• Slack
• Jira (Atlassian Cloud)
• Microsoft Teams (Graph API)
• Discord (Webhook URL)
• Zendesk (upcoming)
• Trello (upcoming)

---

🔐 Integration Setup & Required Credentials

1️⃣ Slack Integration

✅ Required Inputs

• Slack Bot Token
• Slack Channel ID

🔑 Required Bot Scopes

Scope	Description
chat:write	To post feedback messages
files:write	To upload screenshot or video files

📌 Setup Steps

1. Go to Slack API Portal
2. Create a new app or use existing one
3. Under OAuth & Permissions, add the required scopes
4. Install the app to your workspace and copy the Bot Token
5. Grab your target channel ID from Slack (Channel Info > Copy Channel ID)
6. Add App to the channel.

---

2️⃣ Jira Integration

✅ Required Inputs

• Jira Host (e.g. yourcompany.atlassian.net)
• Jira Email (associated with API token)
• Jira API Token
• Jira Project Key and optionally a custom Issue Type

🔑 Required Permissions

Permission	Description
Create Issues	To open feedback tickets
Browse Projects	To access the project and issue types
Add Attachments	To upload screenshots or videos to tickets

📌 Setup Steps

1. Visit Atlassian API Tokens
2. Create a new token and copy it
3. Ensure your user has required project permissions (Admin or Developer)
4. Provide:
   • Your Jira email
   • API token
   • Host (yourdomain.atlassian.net)
   • Project key where feedback will be logged

---

3️⃣ Discord Integration

✅ Required Inputs

• Discord Webhook URL

📌 Setup

1. Go to your Discord server settings
2. Click on Integrations
3. Create a new Webhook
4. Select the channel you want to post messages to
5. Copy the Webhook URL

---

4️⃣ Microsoft Teams Integration (via Microsoft Graph API)

✅ Required Inputs

• Microsoft Access Token (Graph API)
• Team ID
• Channel ID

📌 Setup

For detailed setup instructions, see Microsoft Teams Integration Guide.

⚠️ Microsoft Graph is the most complex setup. We recommend using a user-delegated token to keep integration lightweight.

---

🚀 Example Usage

const slackConfig = {
  botToken: 'xoxb-...',
  channelId: 'C123456',
};

const jiraConfig = {
  email: 'your@email.com',
  apiToken: 'abc123',
  host: 'yourdomain.atlassian.net',
  projectKey: 'SDK',
};

const microsoftTeamsConfig = {
  accessToken: 'eyJ0eXAiOiJK...',
  teamId: 'e4d4c9a6-...',
  channelId: '19:abc123@thread.tacv2',
};

const discordConfig = {
  webhookUrl: 'https://discord.com/api/webhooks/12345.....'
}

const webhook = 'https://......'

const config = {
  slackConfig,
  jiraConfig,
  microsoftTeamsConfig,
  discordConfig,
  webhook,
};

// you can add single or multiple supported configs
// Default value for feedbackButtonPosition is bottom: 30 and right: 30
import { FeedbackHubProvider, useFeedbackHub } from 'react-native-feedback-hub';

<FeedbackHubProvider 
  config={config}
  feedbackButtonPosition={{bottom:30, right: 30}} 
  additionInfo={`UserId:${data.userId}`} // You can send addition Info along with feedback Detail
  enabled={condition...} // pass true to enable for All users
  showFloatingButton = true, // by default true
  enableScreenRecording = true, // by default true
  enableScreenShot = true, //by default true
>
    <App/>
</FeedbackHubProvider>

// Hook to open feedback Hub from custom UI or from some specific place.
const {isOpen, open, close} = useFeedbackHub();

---

📎 Attachment Support

Your feedback payload can include:

• screenshot: local image URI (e.g. from screen capture)
• video: local video URI (e.g. from screen recording)

All platforms will attempt to upload these alongside the feedback text.