diff --git a/docs/platforms/react-native/user-feedback/configuration/index.mdx b/docs/platforms/react-native/user-feedback/configuration/index.mdx index 063041467f173..703ad4f5daac1 100644 --- a/docs/platforms/react-native/user-feedback/configuration/index.mdx +++ b/docs/platforms/react-native/user-feedback/configuration/index.mdx @@ -8,9 +8,9 @@ og_image: /og-images/platforms-react-native-user-feedback-configuration.png 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 Form](./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 Form or the `showFeedbackForm` method to present the form directly. +To collect user feedback from inside your application, use the `showFeedbackForm` method to present the form. -```JavaScript {tabTitle:Form} +```JavaScript import * as Sentry from "@sentry/react-native"; Sentry.wrap(RootComponent); @@ -18,15 +18,6 @@ Sentry.wrap(RootComponent); Sentry.showFeedbackForm(); ``` -```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 @@ -140,47 +131,6 @@ 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 button that opens the form. | -| `triggerAriaLabel` | - | The aria label for the Feedback button that opens the form. | - -The following styles are available for customisation. - -| Style | Type | Description | -| --------------- | ------------ | --------------------------------- | -| `triggerButton` | `ViewStyle` | The feedback button style. | -| `triggerText` | `TextStyle` | The feedback button text style. | -| `triggerIcon` | `ImageStyle` | The feedback button icon style. | - ## Event Callbacks The following callbacks can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props: @@ -228,7 +178,7 @@ Sentry.init({ }); ``` -The `imagePicker` integration is used when launching the feedback form with the `showFeedbackForm` or the `FeedbackButton`. In order to use it with a custom `FeedbackForm` 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