# Configuration | Sentry for React Native The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](https://docs.sentry.io/platforms/react-native/user-feedback.md#user-feedback-api). 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 import * as Sentry from "@sentry/react-native"; Sentry.wrap(RootComponent); Sentry.showFeedbackWidget(); ``` Note that [the root application component must be wrapped with `Sentry.wrap`](https://docs.sentry.io/platforms/react-native.md#wrap-your-app) for this to work. ## [General](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#general) The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` 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. | | `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. | | `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](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#text-customization) All the text that you see in the Feedback widget can be customized. The following options can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` 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. | | `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. | | `namePlaceholder` | `"Your Name"` | The placeholder for the name input field. | | `emailLabel` | `"Email"` | The label of the email input field. | | `emailPlaceholder` | `"your.email@example.org"` | The placeholder for the email input field. | | `isRequiredLabel` | `"(required)"` | The label shown next to an input field that is required. | | `messageLabel` | `"Description"` | The label for the feedback description input field. | | `messagePlaceholder` | `"What's the bug? What did you expect?"` | The placeholder for the feedback description input field. | | `successMessageText` | `"Thank you for your report!"` | The message displayed after a successful feedback submission. | | `errorTitle` | `"Error"` | The title of the error message dialog. | | `formError` | `"Please fill out all required fields."` | Form validation error message. | | `emailError` | `"Please enter a valid email address."` | Email validation error message. | | `genericError` | `"Unable to send feedback due to an unexpected error."` | The generic error message. | Example of customization: ```javascript feedbackIntegration({ nameLabel: "Full Name", submitButtonLabel: "Send", formTitle: "Give Feedback", }); ``` ## [Style Customization](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#style-customization) You can customize placement of the feedback components on the widget, 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`. ```javascript import * as Sentry from "@sentry/react-native"; Sentry.feedbackIntegration({ styles: { submitButton: { backgroundColor: "#6a1b9a", borderRadius: 5, }, }, }); Sentry.showFeedbackWidget(); ``` The same can be achieved by passing the `styles` prop to the `FeedbackWidget` component: ```javascript import { FeedbackWidget } from "@sentry/react-native"; ; ``` The following styles are available for customisation. | Style | Type | Description | | --------------------- | ------------ | ----------------------------------------- | | `container` | `ViewStyle` | The widget container style. | | `title` | `TextStyle` | The title text style. | | `label` | `TextStyle` | The label text style (name, email). | | `input` | `TextStyle` | The input field text style (name, email). | | `textArea` | `TextStyle` | The message text style. | | `submitButton` | `ViewStyle` | The submit button style. | | `submitText` | `TextStyle` | The submit button text style. | | `cancelButton` | `ViewStyle` | The cancel button style. | | `cancelText` | `TextStyle` | The cancel button text style. | | `screenshotButton` | `ViewStyle` | The screenshot button style. | | `screenshotText` | `TextStyle` | The screenshot button text style. | | `screenshotContainer` | `TextStyle` | The screenshot thumbnail container style. | | `screenshotThumbnail` | `ImageStyle` | The screenshot thumbnail image style. | | `titleContainer` | `ViewStyle` | The title container style. | ## [Feedback Button Customization](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#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](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#event-callbacks) The following callbacks can be configured for the integration in `feedbackIntegration({})` or passed in the `FeedbackWidget` component props: | Callback | Parameters | Default behavior | Description | | ----------------- | -------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------- | | `onFormOpen` | | | Callback when widget is opened. | | `onFormClose` | | The widget is unmounted. | Callback when widget is closed and not submitted. | | `onSubmitSuccess` | `data: FeedbackFormData` | | Callback when feedback is successfully submitted. | | `onSubmitError` | `error: Error` | | Callback when feedback is unsuccessfully submitted. | | `onFormSubmitted` | | The widget is unmounted. | Callback when the feedback widget is submitted successfully, and the SuccessMessage is complete, or dismissed. | | `onAddScreenshot` | `addScreenshot: (uri: string) => void` | | Callback when a screenshot is added. | ## [Screenshots](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#screenshots) The screenshot functionality is disabled by default. To enable it, pass an `imagePicker` integration library or set the `enableScreenshot` option to `true` and implement the `onAddScreenshot` callback. ### [Integrating with an Image Picker Library](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#integrating-with-an-image-picker-library) Currently the supported libraries are: * [expo-image-picker](https://docs.expo.dev/versions/latest/sdk/imagepicker/) (tested with version `16.0`) * [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) (tested with version `7.2` and `8.0`) You just need to import the library and pass it to the `feedbackIntegration` method. ```javascript import * as ImagePicker from "expo-image-picker"; ``` Or `react-native-image-picker`: ```javascript import * as ImagePicker from "react-native-image-picker"; ``` And then pass it to `feedbackIntegration`: ```javascript Sentry.init({ integrations: [ Sentry.feedbackIntegration({ imagePicker: ImagePicker, }), ], }); ``` 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: ```javascript ; ``` ### [Implementing the `onAddScreenshot` Callback](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#implementing-the-onaddscreenshot-callback) If the above libraries do not cover your use case you can manually integrate screenshots by implementing the `onAddScreenshot` callback. The callback receives the `uri` of the image like in the example below. ```javascript import * as Sentry from '@sentry/react-native'; import { getImage } from 'custom-image-picker'; const handleChooseImage = (addScreenshot: (uri: string) => void): void => { const { uri, error, canceled } = getImage(); if (canceled) { console.log('User canceled image choice.'); } else if (error) { console.log('Error during image loading', error); } else { addScreenshot(uri); } }; Sentry.feedbackIntegration({ onAddScreenshot={handleChooseImage} }); ``` ### [Screenshot Button](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#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. ```javascript import * as Sentry from "@sentry/react-native"; Sentry.init({ integrations: [ Sentry.feedbackIntegration({ screenshotButtonOptions: { triggerLabel: "Take Screenshot", styles: { triggerButton: { marginBottom: 75, }, }, }, }), ], }); Sentry.showFeedbackButton(); ``` You can customize the Feedback Widget screenshot button text with the following options. | Key | Default | Description | | ------------------ | ------------------- | ----------------------------------------- | | `triggerLabel` | `"Take Screenshot"` | The label for the Screenshot button. | | `triggerAriaLabel` | - | The aria label for the Screenshot button. | The capture screenshot button can be customized too. The following styles are available. | Style | Type | Description | | --------------- | ------------ | --------------------------------- | | `triggerButton` | `ViewStyle` | The screenshot button style. | | `triggerText` | `TextStyle` | The screenshot button text style. | | `triggerIcon` | `ImageStyle` | The screenshot button icon style. | Note that the screenshot button is currently not supported on the web. ## [Theming](https://docs.sentry.io/platforms/react-native/user-feedback/configuration.md#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`. ```javascript import * as Sentry from "@sentry/react-native"; Sentry.init({ integrations: [ Sentry.feedbackIntegration({ colorScheme: "system", themeLight: { foreground: "#ff0000", background: "#00ff00", }, themeDark: { foreground: "#00ff00", background: "#ff0000", }, }), ], }); ``` 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. | For each theme you can set the following colors: | Key | Description | | ------------------ | --------------------------------------- | | `background` | Background color for surfaces. | | `foreground` | Foreground color (i.e. text color). | | `accentForeground` | Foreground color for accented elements. | | `accentBackground` | Background color for accented elements. | | `border` | Border color. | | `feedbackIcon` | Color for feedback icon. |