Skip to content

Update React Native feedback docs: FeedbackWidget → FeedbackForm #17190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
antonis merged 3 commits into from
Apr 2, 2026
Merged

Update React Native feedback docs: FeedbackWidget → FeedbackForm #17190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b858e12
Update React Native feedback docs: FeedbackWidget → FeedbackForm
antonis Mar 31, 2026
0b15fea
Remove deprecated FeedbackButton from React Native docs (#17191)
antonis Apr 2, 2026
db36999
Merge branch 'master' into antonis/update-rn-feedback-widget-to-form
antonis Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 36 additions & 87 deletions docs/platforms/react-native/user-feedback/configuration/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,56 @@
---
title: Configuration
sidebar_order: 6100
description: Learn about the User Feedback Widget configuration options.
description: Learn about the User Feedback Form configuration options.
og_image: /og-images/platforms-react-native-user-feedback-configuration.png
---

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

![An image showing the main customization options for the User Feedback Widget](./img/mobile-user-feedback-widget-customization.png)
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.
![An image showing the main customization options for the User Feedback Form](./img/mobile-user-feedback-widget-customization.png)
To collect user feedback from inside your application, use the `showFeedbackForm` method to present the form.

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

Sentry.wrap(RootComponent);

Sentry.showFeedbackWidget();
```

```JavaScript {tabTitle:Button}
import * as Sentry from "@sentry/react-native";

Sentry.wrap(RootComponent);

Sentry.showFeedbackButton();
Sentry.hideFeedbackButton();
Sentry.showFeedbackForm();
```

Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for this to work.

## General

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


| Key | Type | Default | Description |
| ---------------------- | ------------------------ | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `showBranding` | `boolean` | `true` | Displays the Sentry logo. |
| `showName` | `boolean` | `true` | Displays the name field on the feedback widget. |
| `showEmail` | `boolean` | `true` | Displays the email field on the feedback widget. |
| `enableShakeToReport` | `boolean` | `false` | Opens the Feedback Widget when the user shakes the device. |
| `showName` | `boolean` | `true` | Displays the name field on the feedback form. |
| `showEmail` | `boolean` | `true` | Displays the email field on the feedback form. |
| `enableShakeToReport` | `boolean` | `false` | Opens the Feedback Form when the user shakes the device. |
| `enableScreenshot` | `boolean` | `false` | Allows the user to send a screenshot attachment with their feedback. |
| `enableTakeScreenshot` | `boolean` | `false` | Determines whether the "Take Screenshot" button is displayed. |
| `isNameRequired` | `boolean` | `false` | Requires the name field on the feedback widget to be filled in. |
| `isEmailRequired` | `boolean` | `false` | Requires the email field on the feedback widget to be filled in. |
| `isNameRequired` | `boolean` | `false` | Requires the name field on the feedback form to be filled in. |
| `isEmailRequired` | `boolean` | `false` | Requires the email field on the feedback form to be filled in. |
| `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,}$/"` |
| `useSentryUser` | `Record<string, string>` | `{ email: 'email', name: 'username'}` | Sets the default values for the `email` and `name` fields. |


## Text Customization

All the text that you see in the Feedback widget can be customized.
All the text that you see in the Feedback Form can be customized.

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

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

## Style Customization

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

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

Expand All @@ -103,15 +94,15 @@ Sentry.feedbackIntegration({
},
});

Sentry.showFeedbackWidget();
Sentry.showFeedbackForm();
```

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

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

<FeedbackWidget
<FeedbackForm
styles={{
submitButton: {
backgroundColor: '#6a1b9a',
Expand All @@ -125,7 +116,7 @@ The following styles are available for customisation.

| Style | Type | Description |
| --------------------- | ------------ | ----------------------------------------------- |
| `container` | `ViewStyle` | The widget container style. |
| `container` | `ViewStyle` | The form container style. |
| `title` | `TextStyle` | The title text style. |
| `label` | `TextStyle` | The label text style (name, email). |
| `input` | `TextStyle` | The input field text style (name, email). |
Expand All @@ -140,58 +131,17 @@ The following styles are available for customisation.
| `screenshotThumbnail` | `ImageStyle` | The screenshot thumbnail image style. |
| `titleContainer` | `ViewStyle` | The title container style. |

## Feedback Button Customization

You can customize placement of the feedback button, as well as the fonts and colors.

The example below shows how to customize the bottom margin with the `feedbackIntegration`.

```javascript
import * as Sentry from "@sentry/react-native";

Sentry.init({
integrations: [
Sentry.feedbackIntegration({
buttonOptions: {
styles: {
triggerButton: {
marginBottom: 75,
},
},
},
}),
],
});

Sentry.showFeedbackButton();
```

You can customize the button text with the following options.

| Key | Default | Description |
| ------------------ | ---------------- | -------------------------------------------------------------------- |
| `triggerLabel` | `"Report a Bug"` | The label for the Feedback widget button that opens the dialog. |
| `triggerAriaLabel` | - | The aria label for the Feedback widget button that opens the dialog. |

The following styles are available for customisation.

| Style | Type | Description |
| --------------- | ------------ | --------------------------------- |
| `triggerButton` | `ViewStyle` | The feedback widget button style. |
| `triggerText` | `TextStyle` | The feedback widget text style. |
| `triggerIcon` | `ImageStyle` | The feedback widget icon style. |

## Event Callbacks

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

| Callback | Parameters | Default behavior | Description |
| ----------------- | ---------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------- |
| `onFormOpen` | | | Callback when widget is opened. |
| `onFormClose` | | The widget is unmounted.| Callback when widget is closed and not submitted. |
| `onFormOpen` | | | Callback when form is opened. |
| `onFormClose` | | The form is unmounted. | Callback when form is closed and not submitted. |
| `onSubmitSuccess` | `data: FeedbackFormData` | | Callback when feedback is successfully submitted. |
| `onSubmitError` | `error: Error` | | Callback when feedback is unsuccessfully submitted. |
| `onFormSubmitted` | | The widget is unmounted.| Callback when the feedback widget is submitted successfully, and the SuccessMessage is complete, or dismissed.|
| `onFormSubmitted` | | The form is unmounted. | Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed. |
| `onAddScreenshot` | `addScreenshot: (uri: string) => void` | | Callback when a screenshot is added. |

## Screenshots
Expand Down Expand Up @@ -228,10 +178,10 @@ Sentry.init({
});
```

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:
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:

```javascript
<FeedbackWidget
<FeedbackForm
imagePicker={ImagePicker}
/>
```
Expand Down Expand Up @@ -262,14 +212,15 @@ Sentry.feedbackIntegration({

### Screenshot Button

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.
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.

```javascript
import * as Sentry from "@sentry/react-native";

Sentry.init({
integrations: [
Sentry.feedbackIntegration({
enableTakeScreenshot: true,
screenshotButtonOptions: {
triggerLabel: 'Take Screenshot',
styles: {
Expand All @@ -281,11 +232,9 @@ Sentry.init({
}),
],
});

Sentry.showFeedbackButton();
```

You can customize the Feedback Widget screenshot button text with the following options.
You can customize the Feedback Form screenshot button text with the following options.

| Key | Default | Description |
| ------------------ | ------------------- | ----------------------------------------- |
Expand All @@ -308,7 +257,7 @@ Note that the screenshot button is currently not supported on the web.

## Theming

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`.
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`.

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

For each theme you can set the following colors:

Expand Down
Loading
Loading