diff --git a/docs/platforms/react-native/user-feedback/configuration/img/mobile-user-feedback-widget-customization.png b/docs/platforms/react-native/user-feedback/configuration/img/mobile-user-feedback-widget-customization.png index 3ca8ee1d46ce1f..8d34e2f59c5b4c 100644 Binary files a/docs/platforms/react-native/user-feedback/configuration/img/mobile-user-feedback-widget-customization.png and b/docs/platforms/react-native/user-feedback/configuration/img/mobile-user-feedback-widget-customization.png differ diff --git a/docs/platforms/react-native/user-feedback/configuration/index.mdx b/docs/platforms/react-native/user-feedback/configuration/index.mdx index ea1a67f836d0fe..26d401d6d4a0a3 100644 --- a/docs/platforms/react-native/user-feedback/configuration/index.mdx +++ b/docs/platforms/react-native/user-feedback/configuration/index.mdx @@ -7,9 +7,9 @@ description: "Learn about the User Feedback Widget configuration options." 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). ![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 `showFeedbackWidget` method. +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. -```javascript +```JavaScript {tabTitle:Widget} import * as Sentry from "@sentry/react-native"; Sentry.wrap(RootComponent); @@ -17,6 +17,15 @@ Sentry.wrap(RootComponent); Sentry.showFeedbackWidget(); ``` +```JavaScript {tabTitle:Button} +import * as Sentry from "@sentry/react-native"; + +Sentry.wrap(RootComponent); + +Sentry.showFeedbackButton(); +Sentry.hideFeedbackButton(); +``` + Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for this to work. ## General @@ -127,6 +136,47 @@ 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: diff --git a/docs/platforms/react-native/user-feedback/index.mdx b/docs/platforms/react-native/user-feedback/index.mdx index 28146448725a2f..c79e348440f441 100644 --- a/docs/platforms/react-native/user-feedback/index.mdx +++ b/docs/platforms/react-native/user-feedback/index.mdx @@ -23,9 +23,20 @@ Sentry.wrap(RootComponent); Sentry.showFeedbackWidget(); ``` -Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for the `showFeedbackWidget` method to work. The method depends on the React Native `Modal` implementation. It is supported fully in the legacy architecture. For the new architecture (Fabric renderer) it requires React Native `0.71` and up. +You may also use the `showFeedbackButton` and `hideFeedbackButton` to show and hide a button that opens the Feedback Widget. -To configure the widget you can use the `Sentry.feedbackIntegration({})` or add it to your Sentry initialization. +```javascript +import * as Sentry from "@sentry/react-native"; + +Sentry.wrap(RootComponent); + +Sentry.showFeedbackWidget(); +Sentry.hideFeedbackButton(); +``` + +Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for the `showFeedbackWidget` and `showFeedbackButton` methods to work. The methods depend on the React Native `Modal` implementation. It is supported fully in the legacy architecture. For the new architecture (Fabric renderer) it requires React Native `0.71` and up. + +To configure the widget or the button you can use the `Sentry.feedbackIntegration({})` or add it to your Sentry initialization. ```javascript import * as Sentry from "@sentry/react-native";