Skip to content

Commit e7a3a6e

Browse files
antonislucas-zimermankrystofwoldrich
authored and
antonpirker
committed
RN: Adds screenshot button documentation (#13515)
<!-- Use this checklist to make sure your PR is ready for merge. You may delete any sections you don't need. --> ⚠️ PR Chain: - #13512 - #13513 - 👉 #13515 ## DESCRIBE YOUR PR *Tell us what you're changing and why. If your PR **resolves an issue**, please link it so it closes automatically.* Adds screenshot button documentation. Part of getsentry/sentry-react-native#4302 Implementation PR: getsentry/sentry-react-native#4714 ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] None: Not urgent, can wait up to 1 week+ Should be merged after getsentry/sentry-react-native#4726 is released ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] 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) ## LEGAL BOILERPLATE <!-- Sentry employees and contractors can delete or ignore this section. --> Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms. ## EXTRA RESOURCES - [Sentry Docs contributor guide](https://docs.sentry.io/contributing/) --------- Co-authored-by: LucasZF <[email protected]> Co-authored-by: Krystof Woldrich <[email protected]>
1 parent 5d9c60a commit e7a3a6e

File tree

1 file changed

+66
-19
lines changed
  • docs/platforms/react-native/user-feedback/configuration

1 file changed

+66
-19
lines changed

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

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ The following options can be configured for the integration in `feedbackIntegrat
3939
| `showName` | `boolean` | `true` | Displays the name field on the feedback widget. |
4040
| `showEmail` | `boolean` | `true` | Displays the email field on the feedback widget. |
4141
| `enableScreenshot` | `boolean` | `false` | Allows the user to send a screenshot attachment with their feedback. |
42+
| `enableTakeScreenshot` | `boolean` | `false` | Determines whether the "Take Screenshot" button is displayed. |
4243
| `isNameRequired` | `boolean` | `false` | Requires the name field on the feedback widget to be filled in. |
4344
| `isEmailRequired` | `boolean` | `false` | Requires the email field on the feedback widget to be filled in. |
4445
| `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,}$/"` |
@@ -51,25 +52,26 @@ All the text that you see in the Feedback widget can be customized.
5152

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

54-
| Key | Default | Description |
55-
| ----------------------------- | ------------------------------------------------------- | --------------------------------------------------------------- |
56-
| `formTitle` | `"Report a Bug"` | The title at the top of the feedback widget. |
57-
| `submitButtonLabel` | `"Send Bug Report"` | The label of the submit button used in the feedback widget. |
58-
| `cancelButtonLabel` | `"Cancel"` | The label of cancel buttons used in the feedback widget. |
59-
| `addScreenshotButtonLabel` | `"Add a screenshot"` | The label of the button to add a screenshot to the widget. |
60-
| `removeScreenshotButtonLabel` | `"Remove screenshot"` | The label of the button to remove the screenshot. |
61-
| `nameLabel` | `"Name"` | The label of the name input field. |
62-
| `namePlaceholder` | `"Your Name"` | The placeholder for the name input field. |
63-
| `emailLabel` | `"Email"` | The label of the email input field. |
64-
| `emailPlaceholder` | `"[email protected]"` | The placeholder for the email input field. |
65-
| `isRequiredLabel` | `"(required)"` | The label shown next to an input field that is required. |
66-
| `messageLabel` | `"Description"` | The label for the feedback description input field. |
67-
| `messagePlaceholder` | `"What's the bug? What did you expect?"` | The placeholder for the feedback description input field. |
68-
| `successMessageText` | `"Thank you for your report!"` | The message displayed after a successful feedback submission. |
69-
| `errorTitle` | `"Error"` | The title of the error message dialog. |
70-
| `formError` | `"Please fill out all required fields."` | Form validation error message. |
71-
| `emailError` | `"Please enter a valid email address."` | Email validation error mesage. |
72-
| `genericError` | `"Unable to send feedback due to an unexpected error."` | The generic error message. |
55+
| Key | Default | Description |
56+
| ------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------- |
57+
| `formTitle` | `"Report a Bug"` | The title at the top of the feedback widget. |
58+
| `submitButtonLabel` | `"Send Bug Report"` | The label of the submit button used in the feedback widget. |
59+
| `cancelButtonLabel` | `"Cancel"` | The label of cancel buttons used in the feedback widget. |
60+
| `addScreenshotButtonLabel` | `"Add a screenshot"` | The label of the button to add a screenshot to the widget. |
61+
| `removeScreenshotButtonLabel` | `"Remove screenshot"` | The label of the button to remove the screenshot. |
62+
| `captureScreenshotButtonLabel` | `"Take a screenshot"` | The label for the button that triggers the capture screenshot flow. |
63+
| `nameLabel` | `"Name"` | The label of the name input field. |
64+
| `namePlaceholder` | `"Your Name"` | The placeholder for the name input field. |
65+
| `emailLabel` | `"Email"` | The label of the email input field. |
66+
| `emailPlaceholder` | `"[email protected]"` | The placeholder for the email input field. |
67+
| `isRequiredLabel` | `"(required)"` | The label shown next to an input field that is required. |
68+
| `messageLabel` | `"Description"` | The label for the feedback description input field. |
69+
| `messagePlaceholder` | `"What's the bug? What did you expect?"` | The placeholder for the feedback description input field. |
70+
| `successMessageText` | `"Thank you for your report!"` | The message displayed after a successful feedback submission. |
71+
| `errorTitle` | `"Error"` | The title of the error message dialog. |
72+
| `formError` | `"Please fill out all required fields."` | Form validation error message. |
73+
| `emailError` | `"Please enter a valid email address."` | Email validation error mesage. |
74+
| `genericError` | `"Unable to send feedback due to an unexpected error."` | The generic error message. |
7375

7476
Example of customization:
7577

@@ -248,6 +250,51 @@ Sentry.feedbackIntegration({
248250
});
249251
```
250252

253+
### Screenshot Button
254+
255+
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.
256+
257+
```javascript
258+
import * as Sentry from "@sentry/react-native";
259+
260+
Sentry.init({
261+
integrations: [
262+
Sentry.feedbackIntegration({
263+
buttonOptions: {
264+
styles: {
265+
triggerButton: {
266+
marginBottom: 75,
267+
},
268+
},
269+
},
270+
}),
271+
],
272+
});
273+
274+
Sentry.showFeedbackButton();
275+
```
276+
277+
You can customize the Feedback Widget screenshot button text with the following options.
278+
279+
| Key | Default | Description |
280+
| ------------------ | ------------------- | ----------------------------------------- |
281+
| `triggerLabel` | `"Take Screenshot"` | The label for the Screenshot button. |
282+
| `triggerAriaLabel` | - | The aria label for the Screenshot button. |
283+
284+
The capture screenshot button can be customized too. The following styles are available.
285+
286+
| Style | Type | Description |
287+
| --------------- | ------------ | --------------------------------- |
288+
| `triggerButton` | `ViewStyle` | The screenshot button style. |
289+
| `triggerText` | `TextStyle` | The screenshot button text style. |
290+
| `triggerIcon` | `ImageStyle` | The screenshot button icon style. |
291+
292+
<Alert>
293+
294+
Note that the screenshot button is currently not supported on the web.
295+
296+
</Alert>
297+
251298
## Theming
252299

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

0 commit comments

Comments
 (0)