{"id":48844235,"url":"https://github.com/swiftly-developed/swiftlyfeedbackkit-react-sdk","last_synced_at":"2026-04-15T04:02:36.278Z","repository":{"id":337399166,"uuid":"1152762141","full_name":"Swiftly-Developed/SwiftlyFeedbackKit-React-SDK","owner":"Swiftly-Developed","description":"FeedbackKit React Native SDK - Pre-built UI components and hooks for collecting user feedback in React Native apps","archived":false,"fork":false,"pushed_at":"2026-02-09T10:06:43.000Z","size":134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-09T15:08:40.392Z","etag":null,"topics":["feedback","feedback-systems"],"latest_commit_sha":null,"homepage":"https://feedbackkit.swiftly-workspace.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Swiftly-Developed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-08T11:51:19.000Z","updated_at":"2026-02-09T10:06:46.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Swiftly-Developed/SwiftlyFeedbackKit-React-SDK","commit_stats":null,"previous_names":["swiftly-developed/swiftlyfeedbackkit-react-sdk"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Swiftly-Developed/SwiftlyFeedbackKit-React-SDK","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftly-Developed%2FSwiftlyFeedbackKit-React-SDK","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftly-Developed%2FSwiftlyFeedbackKit-React-SDK/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftly-Developed%2FSwiftlyFeedbackKit-React-SDK/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftly-Developed%2FSwiftlyFeedbackKit-React-SDK/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Swiftly-Developed","download_url":"https://codeload.github.com/Swiftly-Developed/SwiftlyFeedbackKit-React-SDK/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftly-Developed%2FSwiftlyFeedbackKit-React-SDK/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31825515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"online","status_checked_at":"2026-04-15T02:00:06.175Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feedback","feedback-systems"],"created_at":"2026-04-15T04:02:32.249Z","updated_at":"2026-04-15T04:02:36.264Z","avatar_url":"https://github.com/Swiftly-Developed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FeedbackKit React Native SDK\n\nA complete React Native SDK for integrating FeedbackKit into your mobile apps. Built with TypeScript, providing ready-to-use components and hooks for collecting user feedback.\n\n## Features\n\n- **Ready-to-use Components**: `FeedbackList`, `FeedbackCard`, `VoteButton`, and more\n- **React Hooks**: `useFeedbackList`, `useVote`, `useSubmitFeedback`, etc.\n- **Theming**: Light and dark themes with full customization\n- **TypeScript**: Full type safety\n- **Optimistic Updates**: Instant UI feedback for voting\n- **Pull-to-Refresh**: Built-in refresh support\n\n## Installation\n\n```bash\nnpm install feedbackkit-react-native feedbackkit-js @react-native-async-storage/async-storage\n```\n\n### Peer Dependencies\n\nThis package requires the following peer dependencies:\n\n```json\n{\n  \"feedbackkit-js\": \"^1.0.0\",\n  \"react\": \"\u003e=18.0.0\",\n  \"react-native\": \"\u003e=0.70.0\",\n  \"@react-native-async-storage/async-storage\": \"\u003e=1.17.0\"\n}\n```\n\n## Quick Start\n\n### 1. Wrap your app with the provider\n\n```tsx\nimport { FeedbackKitProvider } from 'feedbackkit-react-native';\n\nfunction App() {\n  return (\n    \u003cFeedbackKitProvider\n      apiKey=\"your-api-key\"\n      projectId=\"your-project-id\"\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/FeedbackKitProvider\u003e\n  );\n}\n```\n\n### 2. Display the feedback list\n\n```tsx\nimport { FeedbackList } from 'feedbackkit-react-native';\n\nfunction FeedbackScreen({ navigation }) {\n  return (\n    \u003cFeedbackList\n      onFeedbackPress={(feedback) =\u003e\n        navigation.navigate('FeedbackDetail', { id: feedback.id })\n      }\n      showAddButton\n      onAddPress={() =\u003e navigation.navigate('SubmitFeedback')}\n    /\u003e\n  );\n}\n```\n\n## Components\n\n### FeedbackList\n\nScrollable list of feedback items with pull-to-refresh.\n\n```tsx\n\u003cFeedbackList\n  onFeedbackPress={(feedback) =\u003e console.log(feedback)}\n  filterByStatus={FeedbackStatus.Approved}\n  filterByCategory={FeedbackCategory.FeatureRequest}\n  showAddButton\n  onAddPress={() =\u003e {}}\n  emptyComponent={\u003cCustomEmptyView /\u003e}\n  ListHeaderComponent={\u003cHeader /\u003e}\n/\u003e\n```\n\n### FeedbackCard\n\nCard component for displaying a single feedback item.\n\n```tsx\n\u003cFeedbackCard\n  feedback={feedback}\n  onPress={(f) =\u003e console.log(f)}\n  showStatus\n  showCategory\n  showVoteButton\n  showCommentCount\n/\u003e\n```\n\n### VoteButton\n\nButton for voting/unvoting on feedback.\n\n```tsx\n\u003cVoteButton\n  feedback={feedback}\n  onVoteChange={(hasVoted, voteCount) =\u003e console.log(hasVoted, voteCount)}\n  showCount\n  size=\"medium\" // 'small' | 'medium' | 'large'\n/\u003e\n```\n\n### StatusBadge\n\nDisplays feedback status with appropriate color.\n\n```tsx\n\u003cStatusBadge status={FeedbackStatus.Approved} size=\"medium\" /\u003e\n```\n\n### CategoryBadge\n\nDisplays feedback category with appropriate color.\n\n```tsx\n\u003cCategoryBadge category={FeedbackCategory.FeatureRequest} size=\"medium\" /\u003e\n```\n\n## Hooks\n\n### useFeedbackList\n\nFetch a list of feedback items.\n\n```tsx\nconst { feedbacks, isLoading, error, refetch } = useFeedbackList({\n  status: FeedbackStatus.Approved,\n  category: FeedbackCategory.FeatureRequest,\n  limit: 20\n});\n```\n\n### useFeedback\n\nFetch a single feedback item.\n\n```tsx\nconst { feedback, isLoading, error, refetch } = useFeedback(feedbackId);\n```\n\n### useVote\n\nVote or unvote on feedback.\n\n```tsx\nconst { vote, unvote, isVoting, error } = useVote();\n\n// Vote\nawait vote(feedbackId);\n\n// Unvote\nawait unvote(feedbackId);\n```\n\n### useComments\n\nFetch and add comments.\n\n```tsx\nconst { comments, isLoading, error, addComment, isAddingComment, refetch } = useComments(feedbackId);\n\n// Add a comment\nawait addComment('Great idea!');\n```\n\n### useSubmitFeedback\n\nSubmit new feedback.\n\n```tsx\nconst { submitFeedback, isSubmitting, error } = useSubmitFeedback();\n\nawait submitFeedback({\n  title: 'New Feature',\n  description: 'Description here',\n  category: FeedbackCategory.FeatureRequest\n});\n```\n\n### useFeedbackKit\n\nAccess the FeedbackKit client directly.\n\n```tsx\nconst client = useFeedbackKit();\n\n// Use client methods directly\nconst feedbacks = await client.feedback.list();\n```\n\n## Theming\n\n### Using built-in themes\n\n```tsx\nimport { FeedbackKitProvider, darkTheme } from 'feedbackkit-react-native';\n\n\u003cFeedbackKitProvider\n  apiKey=\"...\"\n  projectId=\"...\"\n  theme={darkTheme}\n\u003e\n```\n\n### Custom theme\n\n```tsx\nimport { FeedbackKitProvider, createTheme } from 'feedbackkit-react-native';\n\nconst customTheme = createTheme({\n  primaryColor: '#6366F1',\n  backgroundColor: '#F8FAFC',\n  // ... other overrides\n});\n\n\u003cFeedbackKitProvider\n  apiKey=\"...\"\n  projectId=\"...\"\n  theme={customTheme}\n\u003e\n```\n\n### Theme properties\n\n| Property | Description | Default (Light) |\n|----------|-------------|-----------------|\n| `primaryColor` | Primary accent color | `#007AFF` |\n| `backgroundColor` | Screen background | `#F2F2F7` |\n| `cardBackgroundColor` | Card background | `#FFFFFF` |\n| `textColor` | Primary text | `#000000` |\n| `secondaryTextColor` | Secondary text | `#8E8E93` |\n| `borderColor` | Border color | `#C6C6C8` |\n| `successColor` | Success/completed | `#34C759` |\n| `warningColor` | Warning/in progress | `#FF9500` |\n| `errorColor` | Error/rejected | `#FF3B30` |\n| `spacing` | Base spacing unit | `8` |\n| `borderRadius` | Default border radius | `12` |\n\n## Anonymous Users\n\nThe SDK automatically generates and persists an anonymous user ID using AsyncStorage. This ID is used for:\n\n- Tracking votes\n- Associating feedback submissions\n- Managing user-specific state\n\nThe ID persists across app sessions.\n\n## Error Handling\n\nAll hooks provide error states:\n\n```tsx\nconst { feedbacks, error, isLoading } = useFeedbackList();\n\nif (error) {\n  // Handle specific error types\n  if (error instanceof AuthenticationError) {\n    // Invalid API key\n  } else if (error instanceof PaymentRequiredError) {\n    // Subscription limit reached\n  }\n}\n```\n\n## TypeScript\n\nAll components and hooks are fully typed. Import types from the SDK:\n\n```tsx\nimport type {\n  Feedback,\n  FeedbackStatus,\n  FeedbackCategory,\n  FeedbackKitTheme,\n  FeedbackListProps\n} from 'feedbackkit-react-native';\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiftly-developed%2Fswiftlyfeedbackkit-react-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswiftly-developed%2Fswiftlyfeedbackkit-react-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiftly-developed%2Fswiftlyfeedbackkit-react-sdk/lists"}