Skip to content

RN: Adds screenshot button documentation #13515

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
merged 20 commits into from
Jun 5, 2025
Merged

RN: Adds screenshot button documentation #13515

Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b1be9ab
Adds feedback button doc
antonis Apr 25, 2025
74ff15c
Adds feedback theme docs
antonis Apr 25, 2025
7568892
Adds screenshot button documentation
antonis Apr 25, 2025
6e2dc55
Align table
antonis Apr 25, 2025
e29da22
Update docs/platforms/react-native/user-feedback/configuration/index.mdx
antonis May 6, 2025
10a9639
Update docs/platforms/react-native/user-feedback/configuration/index.mdx
antonis May 6, 2025
3b8ac8f
Add full Sentry init in the example
antonis May 6, 2025
013243e
Add full Sentry.init example
antonis May 6, 2025
6fea0ee
Add full Sentry.init example
antonis May 6, 2025
10624ae
split feedback button example
antonis May 20, 2025
546effc
Merge branch 'master' into antonis/rn-feedback-button
antonis May 20, 2025
5368fbb
Merge branch 'antonis/rn-feedback-button' into antonis/rn-feedback-theme
antonis May 20, 2025
fd07802
Merge branch 'antonis/rn-feedback-theme' into antonis/rn-feedback-scr…
antonis May 20, 2025
1d379a6
Mention that the screenshot button is not supported on the web
antonis May 20, 2025
23cbfc7
Merge branch 'master' into antonis/rn-feedback-button
antonis May 23, 2025
5c142ff
Merge branch 'antonis/rn-feedback-button' into antonis/rn-feedback-theme
antonis May 23, 2025
e042ce8
Merge branch 'master' into antonis/rn-feedback-button
antonis Jun 4, 2025
888556b
Merge branch 'antonis/rn-feedback-button' into antonis/rn-feedback-theme
antonis Jun 4, 2025
2de19ce
Merge branch 'antonis/rn-feedback-theme' into antonis/rn-feedback-scr…
antonis Jun 4, 2025
4b0dd1d
Merge branch 'master' into antonis/rn-feedback-screenshot-button
antonis Jun 4, 2025
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
85 changes: 66 additions & 19 deletions docs/platforms/react-native/user-feedback/configuration/index.mdx
View file
Open in desktop
Copy link
Contributor

@krystofwoldrich krystofwoldrich May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should mention that the take screenshot doesn't work on web.

Copy link
Contributor Author

@antonis antonis May 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated with 1d379a6

Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ The following options can be configured for the integration in `feedbackIntegrat
| `showName` | `boolean` | `true` | Displays the name field on the feedback widget. |
| `showEmail` | `boolean` | `true` | Displays the email field on the feedback widget. |
| `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. |
| `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,}$/"` |
Expand All @@ -51,25 +52,26 @@ All the text that you see in the Feedback widget can be customized.

The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` 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. |
| `removeScreenshotButtonLabel` | `"Remove screenshot"` | The label of the button to remove the screenshot. |
| `nameLabel` | `"Name"` | The label of the name input field. |
| `namePlaceholder` | `"Your Name"` | The placeholder for the name input field. |
| `emailLabel` | `"Email"` | The label of the email input field. |
| `emailPlaceholder` | `"[email protected]"` | The placeholder for the email input field. |
| `isRequiredLabel` | `"(required)"` | The label shown next to an input field that is required. |
| `messageLabel` | `"Description"` | The label for the feedback description input field. |
| `messagePlaceholder` | `"What's the bug? What did you expect?"` | The placeholder for the feedback description input field. |
| `successMessageText` | `"Thank you for your report!"` | The message displayed after a successful feedback submission. |
| `errorTitle` | `"Error"` | The title of the error message dialog. |
| `formError` | `"Please fill out all required fields."` | Form validation error message. |
| `emailError` | `"Please enter a valid email address."` | Email validation error mesage. |
| `genericError` | `"Unable to send feedback due to an unexpected error."` | The generic error message. |
| 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. |
| `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. |
| `namePlaceholder` | `"Your Name"` | The placeholder for the name input field. |
| `emailLabel` | `"Email"` | The label of the email input field. |
| `emailPlaceholder` | `"[email protected]"` | The placeholder for the email input field. |
| `isRequiredLabel` | `"(required)"` | The label shown next to an input field that is required. |
| `messageLabel` | `"Description"` | The label for the feedback description input field. |
| `messagePlaceholder` | `"What's the bug? What did you expect?"` | The placeholder for the feedback description input field. |
| `successMessageText` | `"Thank you for your report!"` | The message displayed after a successful feedback submission. |
| `errorTitle` | `"Error"` | The title of the error message dialog. |
| `formError` | `"Please fill out all required fields."` | Form validation error message. |
| `emailError` | `"Please enter a valid email address."` | Email validation error mesage. |
| `genericError` | `"Unable to send feedback due to an unexpected error."` | The generic error message. |

Example of customization:

Expand Down Expand Up @@ -248,6 +250,51 @@ 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.

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

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

Sentry.showFeedbackButton();
```

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

| Key | Default | Description |
| ------------------ | ------------------- | ----------------------------------------- |
| `triggerLabel` | `"Take Screenshot"` | The label for the Screenshot button. |
| `triggerAriaLabel` | - | The aria label for the Screenshot button. |

The capture screenshot button can be customized too. The following styles are available.

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

<Alert>

Note that the screenshot button is currently not supported on the web.

</Alert>

## 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`.
Expand Down