Configuration

The User Feedback Form offers many customization options, and if the available options are insufficient, you can use your own UI.

To collect user feedback from inside your application, use the showFeedbackForm method to present the form.

import * as Sentry from "@sentry/react-native";

Sentry.wrap(RootComponent);

Sentry.showFeedbackForm();

import * as Sentry from "@sentry/react-native";

Sentry.wrap(RootComponent);

Sentry.showFeedbackForm();

Note that the root application component must be wrapped with Sentry.wrap for this to work.

General

The following options can be configured for the integration in feedbackIntegration({}) or passed in the FeedbackForm component props:

Text Customization

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 FeedbackForm component props:

Example of customization:

feedbackIntegration({
  nameLabel: "Full Name",
  submitButtonLabel: "Send",
  formTitle: "Give Feedback",
});

feedbackIntegration({
  nameLabel: "Full Name",
  submitButtonLabel: "Send",
  formTitle: "Give Feedback",
});

Style Customization

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.

import * as Sentry from "@sentry/react-native";

Sentry.feedbackIntegration({
  styles: {
    submitButton: {
      backgroundColor: "#6a1b9a",
      borderRadius: 5,
    },
  },
});

Sentry.showFeedbackForm();

import * as Sentry from "@sentry/react-native";

Sentry.feedbackIntegration({
  styles: {
    submitButton: {
      backgroundColor: "#6a1b9a",
      borderRadius: 5,
    },
  },
});

Sentry.showFeedbackForm();

The same can be achieved by passing the styles prop to the FeedbackForm component:

import { FeedbackForm } from "@sentry/react-native";

<FeedbackForm
  styles={{
    submitButton: {
      backgroundColor: "#6a1b9a",
      borderRadius: 5,
    },
  }}
/>;

import { FeedbackForm } from "@sentry/react-native";

<FeedbackForm
  styles={{
    submitButton: {
      backgroundColor: "#6a1b9a",
      borderRadius: 5,
    },
  }}
/>;

The following styles are available for customisation.

Event Callbacks

The following callbacks can be configured for the integration in feedbackIntegration({}) or passed in the FeedbackForm component props:

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

Currently the supported libraries are:

• expo-image-picker (tested with version 16.0)
• 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.

import * as ImagePicker from "expo-image-picker";

import * as ImagePicker from "expo-image-picker";

Or react-native-image-picker:

import * as ImagePicker from "react-native-image-picker";

import * as ImagePicker from "react-native-image-picker";

And then pass it to feedbackIntegration:

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      imagePicker: ImagePicker,
    }),
  ],
});

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      imagePicker: ImagePicker,
    }),
  ],
});

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:

<FeedbackForm imagePicker={ImagePicker} />;

<FeedbackForm imagePicker={ImagePicker} />;

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.

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}
});

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

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.

import * as Sentry from "@sentry/react-native";

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      enableTakeScreenshot: true,
      screenshotButtonOptions: {
        triggerLabel: "Take Screenshot",
        styles: {
          triggerButton: {
            marginBottom: 75,
          },
        },
      },
    }),
  ],
});

import * as Sentry from "@sentry/react-native";

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      enableTakeScreenshot: true,
      screenshotButtonOptions: {
        triggerLabel: "Take Screenshot",
        styles: {
          triggerButton: {
            marginBottom: 75,
          },
        },
      },
    }),
  ],
});

You can customize the Feedback Form screenshot button text with the following options.

The capture screenshot button can be customized too. The following styles are available.

Theming

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.

import * as Sentry from "@sentry/react-native";

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      colorScheme: "system",
      themeLight: {
        foreground: "#ff0000",
        background: "#00ff00",
      },
      themeDark: {
        foreground: "#00ff00",
        background: "#ff0000",
      },
    }),
  ],
});

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:

For each theme you can set the following colors: