Skip to content

Commit b858e12

Browse files
antonisclaude
antonis
and
claude
committed
Update React Native feedback docs: FeedbackWidget → FeedbackForm
Rename all references from FeedbackWidget/showFeedbackWidget to FeedbackForm/showFeedbackForm to match the SDK rename in getsentry/sentry-react-native#5931. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent a3595ae commit b858e12

2 files changed

Lines changed: 54 additions & 54 deletions

File tree

‎docs/platforms/react-native/user-feedback/configuration/index.mdx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
---
22
title: Configuration
33
sidebar_order: 6100
4-
description: Learn about the User Feedback Widget configuration options.
4+
description: Learn about the User Feedback Form configuration options.
55
og_image: /og-images/platforms-react-native-user-feedback-configuration.png
66
---
77

8-
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).
99

10-
![An image showing the main customization options for the User Feedback Widget](./img/mobile-user-feedback-widget-customization.png)
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+
![An image showing the main customization options for the User Feedback Form](./img/mobile-user-feedback-widget-customization.png)
11+
To collect user feedback from inside your application, use the `showFeedbackButton`/`hideFeedbackButton` to show/hide a button that triggers the Feedback Form or the `showFeedbackForm` method to present the form directly.
1212

13-
```JavaScript {tabTitle:Widget}
13+
```JavaScript {tabTitle:Form}
1414
import * as Sentry from "@sentry/react-native";
1515

1616
Sentry.wrap(RootComponent);
1717

18-
Sentry.showFeedbackWidget();
18+
Sentry.showFeedbackForm();
1919
```
2020

2121
```JavaScript {tabTitle:Button}
@@ -31,35 +31,35 @@ Note that [the root application component must be wrapped with `Sentry.wrap`](/p
3131

3232
## General
3333

34-
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props:
34+
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props:
3535

3636

3737
| Key | Type | Default | Description |
3838
| ---------------------- | ------------------------ | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
3939
| `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. |
40+
| `showName` | `boolean` | `true` | Displays the name field on the feedback form. |
41+
| `showEmail` | `boolean` | `true` | Displays the email field on the feedback form. |
42+
| `enableShakeToReport` | `boolean` | `false` | Opens the Feedback Form when the user shakes the device. |
4343
| `enableScreenshot` | `boolean` | `false` | Allows the user to send a screenshot attachment with their feedback. |
4444
| `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. |
45+
| `isNameRequired` | `boolean` | `false` | Requires the name field on the feedback form to be filled in. |
46+
| `isEmailRequired` | `boolean` | `false` | Requires the email field on the feedback form to be filled in. |
4747
| `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,}$/"` |
4848
| `useSentryUser` | `Record<string, string>` | `{ email: 'email', name: 'username'}` | Sets the default values for the `email` and `name` fields. |
4949

5050

5151
## Text Customization
5252

53-
All the text that you see in the Feedback widget can be customized.
53+
All the text that you see in the Feedback Form can be customized.
5454

55-
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props:
55+
The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props:
5656

5757
| Key | Default | Description |
5858
| ------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------- |
59-
| `formTitle` | `"Report a Bug"` | The title at the top of the feedback widget. |
60-
| `submitButtonLabel` | `"Send Bug Report"` | The label of the submit button used in the feedback widget. |
61-
| `cancelButtonLabel` | `"Cancel"` | The label of cancel buttons used in the feedback widget. |
62-
| `addScreenshotButtonLabel` | `"Add a screenshot"` | The label of the button to add a screenshot to the widget. |
59+
| `formTitle` | `"Report a Bug"` | The title at the top of the feedback form. |
60+
| `submitButtonLabel` | `"Send Bug Report"` | The label of the submit button used in the feedback form. |
61+
| `cancelButtonLabel` | `"Cancel"` | The label of cancel buttons used in the feedback form. |
62+
| `addScreenshotButtonLabel` | `"Add a screenshot"` | The label of the button to add a screenshot to the form. |
6363
| `removeScreenshotButtonLabel` | `"Remove screenshot"` | The label of the button to remove the screenshot. |
6464
| `captureScreenshotButtonLabel` | `"Take a screenshot"` | The label for the button that triggers the capture screenshot flow. |
6565
| `nameLabel` | `"Name"` | The label of the name input field. |
@@ -87,7 +87,7 @@ feedbackIntegration({
8787

8888
## Style Customization
8989

90-
You can customize placement of the feedback components on the widget, as well as the fonts and colors.
90+
You can customize placement of the feedback components on the form, as well as the fonts and colors.
9191

9292
The example below shows how to customize the submit button background color and border radius with the `feedbackIntegration`.
9393

@@ -103,15 +103,15 @@ Sentry.feedbackIntegration({
103103
},
104104
});
105105

106-
Sentry.showFeedbackWidget();
106+
Sentry.showFeedbackForm();
107107
```
108108

109-
The same can be achieved by passing the `styles` prop to the `FeedbackWidget` component:
109+
The same can be achieved by passing the `styles` prop to the `FeedbackForm` component:
110110

111111
```javascript
112-
import { FeedbackWidget } from "@sentry/react-native";
112+
import { FeedbackForm } from "@sentry/react-native";
113113

114-
<FeedbackWidget
114+
<FeedbackForm
115115
styles={{
116116
submitButton: {
117117
backgroundColor: '#6a1b9a',
@@ -125,7 +125,7 @@ The following styles are available for customisation.
125125

126126
| Style | Type | Description |
127127
| --------------------- | ------------ | ----------------------------------------------- |
128-
| `container` | `ViewStyle` | The widget container style. |
128+
| `container` | `ViewStyle` | The form container style. |
129129
| `title` | `TextStyle` | The title text style. |
130130
| `label` | `TextStyle` | The label text style (name, email). |
131131
| `input` | `TextStyle` | The input field text style (name, email). |
@@ -170,28 +170,28 @@ You can customize the button text with the following options.
170170

171171
| Key | Default | Description |
172172
| ------------------ | ---------------- | -------------------------------------------------------------------- |
173-
| `triggerLabel` | `"Report a Bug"` | The label for the Feedback widget button that opens the dialog. |
174-
| `triggerAriaLabel` | - | The aria label for the Feedback widget button that opens the dialog. |
173+
| `triggerLabel` | `"Report a Bug"` | The label for the Feedback button that opens the form. |
174+
| `triggerAriaLabel` | - | The aria label for the Feedback button that opens the form. |
175175

176176
The following styles are available for customisation.
177177

178178
| Style | Type | Description |
179179
| --------------- | ------------ | --------------------------------- |
180-
| `triggerButton` | `ViewStyle` | The feedback widget button style. |
181-
| `triggerText` | `TextStyle` | The feedback widget text style. |
182-
| `triggerIcon` | `ImageStyle` | The feedback widget icon style. |
180+
| `triggerButton` | `ViewStyle` | The feedback button style. |
181+
| `triggerText` | `TextStyle` | The feedback button text style. |
182+
| `triggerIcon` | `ImageStyle` | The feedback button icon style. |
183183

184184
## Event Callbacks
185185

186-
The following callbacks can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props:
186+
The following callbacks can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props:
187187

188188
| Callback | Parameters | Default behavior | Description |
189189
| ----------------- | ---------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------- |
190-
| `onFormOpen` | | | Callback when widget is opened. |
191-
| `onFormClose` | | The widget is unmounted.| Callback when widget is closed and not submitted. |
190+
| `onFormOpen` | | | Callback when form is opened. |
191+
| `onFormClose` | | The form is unmounted. | Callback when form is closed and not submitted. |
192192
| `onSubmitSuccess` | `data: FeedbackFormData` | | Callback when feedback is successfully submitted. |
193193
| `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.|
194+
| `onFormSubmitted` | | The form is unmounted. | Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed. |
195195
| `onAddScreenshot` | `addScreenshot: (uri: string) => void` | | Callback when a screenshot is added. |
196196

197197
## Screenshots
@@ -228,10 +228,10 @@ Sentry.init({
228228
});
229229
```
230230

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:
231+
The `imagePicker` integration is used when launching the feedback form with the `showFeedbackForm` or the `FeedbackButton`. In order to use it with a custom `FeedbackForm` component, you need to pass the `imagePicker` prop to the component as shown below:
232232

233233
```javascript
234-
<FeedbackWidget
234+
<FeedbackForm
235235
imagePicker={ImagePicker}
236236
/>
237237
```
@@ -262,7 +262,7 @@ Sentry.feedbackIntegration({
262262

263263
### Screenshot Button
264264

265-
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.
265+
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.
266266

267267
```javascript
268268
import * as Sentry from "@sentry/react-native";
@@ -285,7 +285,7 @@ Sentry.init({
285285
Sentry.showFeedbackButton();
286286
```
287287

288-
You can customize the Feedback Widget screenshot button text with the following options.
288+
You can customize the Feedback Form screenshot button text with the following options.
289289

290290
| Key | Default | Description |
291291
| ------------------ | ------------------- | ----------------------------------------- |
@@ -308,7 +308,7 @@ Note that the screenshot button is currently not supported on the web.
308308

309309
## Theming
310310

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`.
311+
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`.
312312

313313
```javascript
314314
import * as Sentry from "@sentry/react-native";
@@ -335,8 +335,8 @@ The available theme options are:
335335
| Key | Type | Default | Description |
336336
| ------------- | ----------------------------| ---------- | -------------------------------------------------------- |
337337
| `colorScheme` | `"system", "light", "dark"` | `"system"` | The color theme. "system" will use your OS color scheme. |
338-
| `themeLight` | Feedback Widget Theme | - | The light color scheme. |
339-
| `themeDark` | Feedback Widget Theme | - | The dark color scheme. |
338+
| `themeLight` | Feedback Form Theme | - | The light color scheme. |
339+
| `themeDark` | Feedback Form Theme | - | The dark color scheme. |
340340

341341
For each theme you can set the following colors:
342342

0 commit comments

Comments
 (0)