You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## DESCRIBE YOUR PR
Fixesgetsentry/sentry-react-native#5894
Rename all `FeedbackWidget` → `FeedbackForm` and `showFeedbackWidget` →
`showFeedbackForm` references in the React Native user feedback
documentation.
Updated pages:
- `docs/platforms/react-native/user-feedback/index.mdx`
- `docs/platforms/react-native/user-feedback/configuration/index.mdx`
Image filenames left unchanged (only alt text updated).
Follows SDK rename in getsentry/sentry-react-native#5931.
> **Note:** The old `FeedbackWidget` / `showFeedbackWidget` APIs remain
as deprecated aliases in the SDK, so existing user code is not broken.
## IS YOUR CHANGE URGENT?
- [ ] Urgent deadline (GA date, etc.):
- [ ] Other deadline:
- [x] None: Not urgent, can wait up to 1 week+
⚠️ Should be merged after
getsentry/sentry-react-native#5931 is released
## PRE-MERGE CHECKLIST
- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](/platforms/react-native/user-feedback/#user-feedback-api).
8
+
The User Feedback Form offers many customization options, and if the available options are insufficient, you can [use your own UI](/platforms/react-native/user-feedback/#user-feedback-api).
9
9
10
-
11
-
To collect user feedback from inside your application, use the `showFeedbackButton`/`hideFeedbackButton` to show/hide a button that triggers the Feedback Widget or the `showFeedbackWidget`method to present the widget directly.
10
+
11
+
To collect user feedback from inside your application, use the `showFeedbackForm`method to present the form.
12
12
13
-
```JavaScript {tabTitle:Widget}
13
+
```JavaScript
14
14
import*asSentryfrom"@sentry/react-native";
15
15
16
16
Sentry.wrap(RootComponent);
17
17
18
-
Sentry.showFeedbackWidget();
19
-
```
20
-
21
-
```JavaScript {tabTitle:Button}
22
-
import*asSentryfrom"@sentry/react-native";
23
-
24
-
Sentry.wrap(RootComponent);
25
-
26
-
Sentry.showFeedbackButton();
27
-
Sentry.hideFeedbackButton();
18
+
Sentry.showFeedbackForm();
28
19
```
29
20
30
21
Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for this to work.
31
22
32
23
## General
33
24
34
-
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props:
25
+
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props:
|`showBranding`|`boolean`|`true`| Displays the Sentry logo. |
40
-
|`showName`|`boolean`|`true`| Displays the name field on the feedback widget.|
41
-
|`showEmail`|`boolean`|`true`| Displays the email field on the feedback widget.|
42
-
|`enableShakeToReport`|`boolean`|`false`| Opens the Feedback Widget when the user shakes the device. |
31
+
|`showName`|`boolean`|`true`| Displays the name field on the feedback form. |
32
+
|`showEmail`|`boolean`|`true`| Displays the email field on the feedback form. |
33
+
|`enableShakeToReport`|`boolean`|`false`| Opens the Feedback Form when the user shakes the device.|
43
34
|`enableScreenshot`|`boolean`|`false`| Allows the user to send a screenshot attachment with their feedback. |
44
35
|`enableTakeScreenshot`|`boolean`|`false`| Determines whether the "Take Screenshot" button is displayed. |
45
-
|`isNameRequired`|`boolean`|`false`| Requires the name field on the feedback widget to be filled in. |
46
-
|`isEmailRequired`|`boolean`|`false`| Requires the email field on the feedback widget to be filled in. |
36
+
|`isNameRequired`|`boolean`|`false`| Requires the name field on the feedback form to be filled in.|
37
+
|`isEmailRequired`|`boolean`|`false`| Requires the email field on the feedback form to be filled in.|
47
38
|`shouldValidateEmail`|`boolean`|`true`| If set the email is validated with the following regular expression `"/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/"`|
48
39
|`useSentryUser`|`Record<string, string>`|`{ email: 'email', name: 'username'}`| Sets the default values for the `email` and `name` fields. |
49
40
50
41
51
42
## Text Customization
52
43
53
-
All the text that you see in the Feedback widget can be customized.
44
+
All the text that you see in the Feedback Form can be customized.
54
45
55
-
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props:
46
+
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props:
|`onFormOpen`||| Callback when widget is opened. |
191
-
|`onFormClose`|| The widget is unmounted.| Callback when widget is closed and not submitted. |
140
+
|`onFormOpen`||| Callback when form is opened.|
141
+
|`onFormClose`|| The form is unmounted.| Callback when form is closed and not submitted.|
192
142
|`onSubmitSuccess`|`data: FeedbackFormData`|| Callback when feedback is successfully submitted. |
193
143
|`onSubmitError`|`error: Error`|| Callback when feedback is unsuccessfully submitted. |
194
-
|`onFormSubmitted`|| The widget is unmounted.| Callback when the feedback widget is submitted successfully, and the SuccessMessage is complete, or dismissed.|
144
+
|`onFormSubmitted`|| The form is unmounted.| Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed.|
195
145
|`onAddScreenshot`|`addScreenshot: (uri: string) => void`|| Callback when a screenshot is added. |
196
146
197
147
## Screenshots
@@ -228,10 +178,10 @@ Sentry.init({
228
178
});
229
179
```
230
180
231
-
The `imagePicker` integration is used when launching the feedback widget with the `showFeedbackWidget` or the `FeedbackButton`. In order to use it with a custom `FeedbackWidget` component, you need to pass the `imagePicker` prop to the component as shown below:
181
+
The `imagePicker` integration is used when launching the feedback form with `showFeedbackForm`. In order to use it with a custom `FeedbackForm` component, you need to pass the `imagePicker` prop to the component as shown below:
You can show a button that allows the user to take a screenshot in the Feedback Widget. The button is shown when `enableTakeScreenshot` is set to `true` in the `feedbackIntegration` method like in the example below.
215
+
You can show a button that allows the user to take a screenshot in the Feedback Form. The button is shown when `enableTakeScreenshot` is set to `true` in the `feedbackIntegration` method like in the example below.
266
216
267
217
```javascript
268
218
import*asSentryfrom"@sentry/react-native";
269
219
270
220
Sentry.init({
271
221
integrations: [
272
222
Sentry.feedbackIntegration({
223
+
enableTakeScreenshot:true,
273
224
screenshotButtonOptions: {
274
225
triggerLabel:'Take Screenshot',
275
226
styles: {
@@ -281,11 +232,9 @@ Sentry.init({
281
232
}),
282
233
],
283
234
});
284
-
285
-
Sentry.showFeedbackButton();
286
235
```
287
236
288
-
You can customize the Feedback Widget screenshot button text with the following options.
237
+
You can customize the Feedback Form screenshot button text with the following options.
@@ -308,7 +257,7 @@ Note that the screenshot button is currently not supported on the web.
308
257
309
258
## Theming
310
259
311
-
You can also customize the Feedback Widget colors to match your app's theme. The example below shows how to customize the widget background and foreground for the light and dark system themes with the `feedbackIntegration`.
260
+
You can also customize the Feedback Form colors to match your app's theme. The example below shows how to customize the form background and foreground for the light and dark system themes with the `feedbackIntegration`.
312
261
313
262
```javascript
314
263
import*asSentryfrom"@sentry/react-native";
@@ -335,8 +284,8 @@ The available theme options are:
0 commit comments