diff --git a/docs/platforms/react-native/user-feedback/configuration/index.mdx b/docs/platforms/react-native/user-feedback/configuration/index.mdx index f188d24849939..703ad4f5daac1 100644 --- a/docs/platforms/react-native/user-feedback/configuration/index.mdx +++ b/docs/platforms/react-native/user-feedback/configuration/index.mdx @@ -1,65 +1,56 @@ --- title: Configuration sidebar_order: 6100 -description: Learn about the User Feedback Widget configuration options. +description: Learn about the User Feedback Form configuration options. og_image: /og-images/platforms-react-native-user-feedback-configuration.png --- -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). +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 Widget](./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 Widget or the `showFeedbackWidget` method to present the widget directly. +![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 `showFeedbackForm` method to present the form. -```JavaScript {tabTitle:Widget} +```JavaScript import * as Sentry from "@sentry/react-native"; Sentry.wrap(RootComponent); -Sentry.showFeedbackWidget(); -``` - -```JavaScript {tabTitle:Button} -import * as Sentry from "@sentry/react-native"; - -Sentry.wrap(RootComponent); - -Sentry.showFeedbackButton(); -Sentry.hideFeedbackButton(); +Sentry.showFeedbackForm(); ``` Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for this to work. ## General -The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props: +The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` component props: | Key | Type | Default | Description | | ---------------------- | ------------------------ | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | `showBranding` | `boolean` | `true` | Displays the Sentry logo. | -| `showName` | `boolean` | `true` | Displays the name field on the feedback widget. | -| `showEmail` | `boolean` | `true` | Displays the email field on the feedback widget. | -| `enableShakeToReport` | `boolean` | `false` | Opens the Feedback Widget when the user shakes the device. | +| `showName` | `boolean` | `true` | Displays the name field on the feedback form. | +| `showEmail` | `boolean` | `true` | Displays the email field on the feedback form. | +| `enableShakeToReport` | `boolean` | `false` | Opens the Feedback Form when the user shakes the device. | | `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. | +| `isNameRequired` | `boolean` | `false` | Requires the name field on the feedback form to be filled in. | +| `isEmailRequired` | `boolean` | `false` | Requires the email field on the feedback form 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,}$/"` | | `useSentryUser` | `Record` | `{ email: 'email', name: 'username'}` | Sets the default values for the `email` and `name` fields. | ## Text Customization -All the text that you see in the Feedback widget can be customized. +All the text that you see in the Feedback Form can be customized. -The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props: +The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackForm` 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. | +| `formTitle` | `"Report a Bug"` | The title at the top of the feedback form. | +| `submitButtonLabel` | `"Send Bug Report"` | The label of the submit button used in the feedback form. | +| `cancelButtonLabel` | `"Cancel"` | The label of cancel buttons used in the feedback form. | +| `addScreenshotButtonLabel` | `"Add a screenshot"` | The label of the button to add a screenshot to the form. | | `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. | @@ -87,7 +78,7 @@ feedbackIntegration({ ## Style Customization -You can customize placement of the feedback components on the widget, as well as the fonts and colors. +You can customize placement of the feedback components on the form, as well as the fonts and colors. The example below shows how to customize the submit button background color and border radius with the `feedbackIntegration`. @@ -103,15 +94,15 @@ Sentry.feedbackIntegration({ }, }); -Sentry.showFeedbackWidget(); +Sentry.showFeedbackForm(); ``` -The same can be achieved by passing the `styles` prop to the `FeedbackWidget` component: +The same can be achieved by passing the `styles` prop to the `FeedbackForm` component: ```javascript -import { FeedbackWidget } from "@sentry/react-native"; +import { FeedbackForm } from "@sentry/react-native"; - void` | | Callback when a screenshot is added. | ## Screenshots @@ -228,10 +178,10 @@ Sentry.init({ }); ``` -The `imagePicker` integration is used when launching the feedback widget with the `showFeedbackWidget` or the `FeedbackButton`. In order to use it with a custom `FeedbackWidget` 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 - ``` @@ -262,7 +212,7 @@ 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. +You can show a button that allows the user to take a screenshot in the Feedback Form. 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"; @@ -270,6 +220,7 @@ import * as Sentry from "@sentry/react-native"; Sentry.init({ integrations: [ Sentry.feedbackIntegration({ + enableTakeScreenshot: true, screenshotButtonOptions: { triggerLabel: 'Take Screenshot', styles: { @@ -281,11 +232,9 @@ Sentry.init({ }), ], }); - -Sentry.showFeedbackButton(); ``` -You can customize the Feedback Widget screenshot button text with the following options. +You can customize the Feedback Form screenshot button text with the following options. | Key | Default | Description | | ------------------ | ------------------- | ----------------------------------------- | @@ -308,7 +257,7 @@ Note that the screenshot button is currently not supported on the web. ## 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`. +You can also customize the Feedback Form colors to match your app's theme. The example below shows how to customize the form background and foreground for the light and dark system themes with the `feedbackIntegration`. ```javascript import * as Sentry from "@sentry/react-native"; @@ -335,8 +284,8 @@ The available theme options are: | Key | Type | Default | Description | | ------------- | ----------------------------| ---------- | -------------------------------------------------------- | | `colorScheme` | `"system", "light", "dark"` | `"system"` | The color theme. "system" will use your OS color scheme. | -| `themeLight` | Feedback Widget Theme | - | The light color scheme. | -| `themeDark` | Feedback Widget Theme | - | The dark color scheme. | +| `themeLight` | Feedback Form Theme | - | The light color scheme. | +| `themeDark` | Feedback Form Theme | - | The dark color scheme. | For each theme you can set the following colors: diff --git a/docs/platforms/react-native/user-feedback/index.mdx b/docs/platforms/react-native/user-feedback/index.mdx index a201b0d25ed9a..dd88b285be8f9 100644 --- a/docs/platforms/react-native/user-feedback/index.mdx +++ b/docs/platforms/react-native/user-feedback/index.mdx @@ -13,36 +13,25 @@ Note that if you're using a self-hosted Sentry instance, you'll need to be on ve |User Feedback iOS |User Feedback Android | |:-----------------------------:|:---------------------------------------: | -|![User Feedback Widget on React Native iOS =500x](./img/user-feedback-rn-ios-widget.png) |![User Feedback Widget on React Native Android =500x](./img/user-feedback-rn-android-widget.png) | +|![User Feedback Form on React Native iOS =500x](./img/user-feedback-rn-ios-widget.png) |![User Feedback Form on React Native Android =500x](./img/user-feedback-rn-android-widget.png) | -## User Feedback Widget +## User Feedback Form -The user feedback widget allows users to submit feedback from anywhere inside your application. +The user feedback form allows users to submit feedback from anywhere inside your application. -To collect user feedback from inside your application use the `showFeedbackWidget` method. +To collect user feedback from inside your application use the `showFeedbackForm` method. ```javascript import * as Sentry from "@sentry/react-native"; Sentry.wrap(RootComponent); -Sentry.showFeedbackWidget(); +Sentry.showFeedbackForm(); ``` -You may also use the `showFeedbackButton` and `hideFeedbackButton` to show and hide a button that opens the Feedback Widget. +Note that [the root application component must be wrapped with `Sentry.wrap`](/platforms/react-native/#wrap-your-app) for the `showFeedbackForm` 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. -```javascript -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 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. +To configure the form you can use the `Sentry.feedbackIntegration({})` or add it to your Sentry initialization. ```javascript import * as Sentry from "@sentry/react-native"; @@ -68,7 +57,7 @@ There are many options you can pass to the integration constructor. See the [con ### Shake to Report -You can enable shake-to-report so that shaking the device opens the Feedback Widget. Enable it declaratively via the `feedbackIntegration` option: +You can enable shake-to-report so that shaking the device opens the Feedback Form. Enable it declaratively via the `feedbackIntegration` option: ```javascript Sentry.feedbackIntegration({ @@ -79,24 +68,24 @@ Sentry.feedbackIntegration({ Or control it programmatically: ```javascript -// Start listening for shake gestures to open the feedback widget +// Start listening for shake gestures to open the feedback form Sentry.enableFeedbackOnShake(); // Stop listening for shake gestures Sentry.disableFeedbackOnShake(); ``` -### Feedback Widget Component +### Feedback Form Component -You can also integrate the `FeedbackWidget` component manually in your app. +You can also integrate the `FeedbackForm` component manually in your app. ```javascript -import { FeedbackWidget } from "@sentry/react-native"; +import { FeedbackForm } from "@sentry/react-native"; - + ``` -For the full set of options you can pass to the `FeedbackWidget` component see the [configuration documentation](/platforms/react-native/user-feedback/configuration/). +For the full set of options you can pass to the `FeedbackForm` component see the [configuration documentation](/platforms/react-native/user-feedback/configuration/). @@ -106,7 +95,7 @@ Note that when the device is offline, the feedback will be stored locally and se ### Session Replay -The User Feedback widget integrates seamlessly with Session Replay. When the widget is opened, the SDK buffers up to 30 seconds of the user's session. If feedback is submitted, this replay is sent along with the feedback, allowing you to view both the feedback and the user's actions leading up to the feedback submission. +The User Feedback Form integrates seamlessly with Session Replay. When the widget is opened, the SDK buffers up to 30 seconds of the user's session. If feedback is submitted, this replay is sent along with the feedback, allowing you to view both the feedback and the user's actions leading up to the feedback submission. ## User Feedback API