[EPIC] Feedback Widget for React Native

[krystofwoldrich]

Sentry currently offers only Feedback API for React Native applications and the widget to collect feedback needs to be implemented by the app developers. The goal of this task is to provide pre-made widget, which can be directly used in React Native applications.

Current browser widget docs.
Current React Native Feedback api docs.
Example React Native implementation in Sentry Demo app

Tasks Overview

Feature Branch /feedback-ui

Currently in progress for beta release

Preview Give feedback

No tasks being tracked yet.

Beta tasks

Preview Give feedback

No tasks being tracked yet.

GA tasks

Preview Give feedback

1. feat(feedback): Implements Report a Bug button #4378
2. Add Feedback Auto-Inject E2E test (maestro flow) test(e2e): Adds Feedback Widget Maestro E2E tests #4604
3. Support themes (light/dark mode)
4. Review Accessibility - VoiceOver (iOS) and TalkBack (Android)
5. Take screenshot button in the UI
6. Show Report button on shake
7. Show Report button when screenshot taken
8. Add feedback widget to wizard (ask user if they would like to setup Feedback widget)
9. Screenshot annotations (ability to draw into the screenshot)

Done

Preview Give feedback

1. RN: Add feedback widget documentation sentry-docs#12503
2. Fix Expo Web issues feat(feedback): Support web environments #4558
3. RN: Updates capture feedback documentation sentry-docs#11980
   Platform: React-Native
4. Feedback UI: Use Image Picker libraries from integrations #4524
5. Add new captureFeedback API to RN SDK #3859
   Platform: React-Native
   
6. Implement basic capture feedback form UI #4336
   Platform: React-Native
   
7. Add attachment/screenshot handling in the feedback form UI #4337
   Platform: React-Native
   
8. Handle feedback form submision errors #4359
   Platform: React-Native
   
9. (1) feat: Add Feedback Form Component #4328
10. Feedback Form: Show success toast #4356
    Platform: React-Native
    
11. Update Set Up User Feedback documentation #4319
    Platform: React-Native
    
12. Autoinject feedback widget #4483
13. fix: Disable movement/scroll only in overflow (iOS only issue)
14. feat: Add pull down to cancel feat(feedback): Pull down to cancel #4534
15. feat: [design] Add rounded corners and the appearance of a sheet with a darkened top
16. feat: Save form content when closed, failed (reopening the form keeps the content), only clear after sent feat(feedback): Save form state for un-submitted data #4538
17. Show selected screenshot thumbnail/preview in the UI feat(feedback): Show selected screenshot #4545

[krystofwoldrich]

Disable movement/scroll (example in the video below) (allow only in overflow)

Happens only on iOS

Simulator.Screen.Recording.-.iPhone.16.-.2025-01-29.at.16.24.52.mp4

[krystofwoldrich]

Add rounded corners and the appearance of a sheet with a darkened top. See the example below.

Let's do this if possible just with styles.

Let's do this for both Android (can be different than iOS, but since Android is diverse we won't be able to match all versions) and iOS (the radius should match the native views) (and Web).

[krystofwoldrich]

The two most popular libraries for image pickers in the RN ecosystem are https://www.npmjs.com/package/react-native-image-picker and https://www.npmjs.com/package/expo-image-picker.

Instead of guiding users on how to use the image picker libraries and how to hook them into the Sentry Feedback Widget, we could introduce a simpler interface, in which the Sentry Feedback Widget accepts the library object and calls it's APIs.

Example:

React Native Image Picker

import * as ImagePicker from 'react-native-image-picker';

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      imagePicker: ImagePicker,
    }),
  ],
});

Expo Image Picker

import * as ImagePicker from 'expo-image-picker';

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      imagePicker: ImagePicker,
    }),
  ],
});

[antonis]

Note: We also need to check if (similar to iOS) the permissions needed for accessing photos create complications.

[krystofwoldrich]

Note: We also need to check if (getsentry/sentry-cocoa#4801) the permissions needed for accessing photos create complications.

This is not an issue for the RN SDK, because we don't access any of the native API, but the image picker libraries we integrate with do.

[krystofwoldrich]

I noticed two bugs on Expo Web.

The inputs immediately lose focus after clicking on them.

---

The image picker on web returns data:, uri.

It would be nice to support it on the Web, we can use the browser APIs to convert the base64 to UintArray, the rest of the form works perfectly.

[antonis]

Note: We also need to check if (getsentry/sentry-cocoa#4801) the permissions needed for accessing photos create complications.

This is not an issue for the RN SDK, because we don't access any of the native API, but the image picker libraries we integrate with do.

Makes sense 👍 Probably we can add a note in the documentation as a reminder on this.

I noticed two bugs on Expo Web.

Thank you for reporting @krystofwoldrich 🙇 I'll iterate with a fix on those 🤞

[antonis]

Reopening to track down the tasks after the beta release.