[EPIC] Feedback Widget for React Native

[krystofwoldrich]

Description

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

Preview Give feedback

1. Add new captureFeedback API to RN SDK #3859
   Platform: React-Native +1
   
2. Implement basic capture feedback form UI #4336
   Platform: React-Native +1
   
3. Add attachment/screenshot handling in the feedback form UI #4337
   Platform: React-Native +1
   
4. Handle feedback form submision errors #4359
   Platform: React-Native +1
   
5. (1) feat: Add Feedback Form Component #4328
   +0
6. Feedback Form: Show success toast #4356
   Platform: React-Native +1
   
7. Update Set Up User Feedback documentation #4319
   Platform: React-Native +1
   
8. Autoinject feedback widget #4483
   +0
9. RN: Updates capture feedback documentation sentry-docs#11980
   Platform: React-Native +1
10. RN: Add feedback widget documentation sentry-docs#12503
    +0
11. Implements Report a Bug button #4378
    +0
12. Support themes (light/dark mode)
13. Add feedback widget to wizard
14. fix: Disable movement/scroll only in overflow (iOS only issue)
15. feat: Add pull down to cancel
16. feat: Save form content when closed, failed (reopening the form keep the content)
17. feat: [design] Add rounded corners and the appearance of a sheet with a darkened top
18. Feedback UI: Use Image Picker libraries from integrations #4524
    +0

[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,
    }),
  ],
});