Skip to content

Commit 7568892

Browse files
committed
Adds screenshot button documentation
1 parent 74ff15c commit 7568892

File tree

1 file changed

+38
-0
lines changed
  • docs/platforms/react-native/user-feedback/configuration

1 file changed

+38
-0
lines changed

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ The following options can be configured for the integration in `feedbackIntegrat
3434
| `showName` | `boolean` | `true` | Displays the name field on the feedback widget. |
3535
| `showEmail` | `boolean` | `true` | Displays the email field on the feedback widget. |
3636
| `enableScreenshot` | `boolean` | `false` | Allows the user to send a screenshot attachment with their feedback. |
37+
| `enableTakeScreenshot` | `boolean` | `false` | Determines whether the "Take Screenshot" button is displayed. |
3738
| `isNameRequired` | `boolean` | `false` | Requires the name field on the feedback widget to be filled in. |
3839
| `isEmailRequired` | `boolean` | `false` | Requires the email field on the feedback widget to be filled in. |
3940
| `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,}$/"` |
@@ -53,6 +54,7 @@ The following options can be configured for the integration in `feedbackIntegrat
5354
| `cancelButtonLabel` | `"Cancel"` | The label of cancel buttons used in the feedback widget. |
5455
| `addScreenshotButtonLabel` | `"Add a screenshot"` | The label of the button to add a screenshot to the widget. |
5556
| `removeScreenshotButtonLabel` | `"Remove screenshot"` | The label of the button to remove the screenshot. |
57+
| `captureScreenshotButtonLabel`| `"Take a screenshot"` | The label for the button that shows the capture screenshot button. |
5658
| `nameLabel` | `"Name"` | The label of the name input field. |
5759
| `namePlaceholder` | `"Your Name"` | The placeholder for the name input field. |
5860
| `emailLabel` | `"Email"` | The label of the email input field. |
@@ -239,6 +241,42 @@ Sentry.feedbackIntegration({
239241
});
240242
```
241243

244+
### Screenshot Button
245+
246+
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.
247+
248+
```javascript
249+
import * as Sentry from "@sentry/react-native";
250+
251+
Sentry.feedbackIntegration({
252+
enableTakeScreenshot: true,
253+
screenshotButtonOptions: {
254+
styles: {
255+
triggerButton: {
256+
marginBottom: 75,
257+
},
258+
},
259+
},
260+
})
261+
262+
Sentry.showFeedbackButton();
263+
```
264+
265+
You can customize the Feedback Widget screenshot button text with the following options.
266+
267+
| Key | Default | Description |
268+
| ------------------ | ------------------- | ----------------------------------------- |
269+
| `triggerLabel` | `"Take Screenshot"` | The label for the Screenshot button. |
270+
| `triggerAriaLabel` | - | The aria label for the Screenshot button. |
271+
272+
The capture screenshot button can be customized too. The following styles are available.
273+
274+
| Style | Type | Description |
275+
| --------------- | ------------ | --------------------------------- |
276+
| `triggerButton` | `ViewStyle` | The screenshot button style. |
277+
| `triggerText` | `TextStyle` | The screenshot button text style. |
278+
| `triggerIcon` | `ImageStyle` | The screenshot button icon style. |
279+
242280
## Theming
243281

244282
You can also customize the Feedback Widget colors to match your app's theme. The example below shows how to customize the widget backgroung and foreground for the light and dark system themes with the `feedbackIntegration`.

0 commit comments

Comments
 (0)