Feedback UI: Use Image Picker libraries from integrations

packages/core/src/js/feedback/FeedbackForm.tsx

@@ -20,8 +20,8 @@ import {
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
-import { isValidEmail } from './utils';
+import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types';
+import { getDataFromUri, isValidEmail } from './utils';
 
 /**
  * @beta
@@ -100,12 +100,46 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     }
   };
 
-  public onScreenshotButtonPress: () => void = () => {
+  public onScreenshotButtonPress: () => void = async () => {
     if (!this.state.filename && !this.state.attachment) {
-      const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
-      onAddScreenshot((filename: string, attachement: Uint8Array) => {
-        this.setState({ filename, attachment: attachement });
-      });
+      const imagePickerConfiguration: ImagePickerConfiguration = this.props;
+      if (imagePickerConfiguration.imagePicker) {
+        const launchImageLibrary = imagePickerConfiguration.imagePicker.launchImageLibraryAsync
+          // expo-image-picker library is available
+          ? () => imagePickerConfiguration.imagePicker.launchImageLibraryAsync({ mediaTypes: ['images'] })
+          // react-native-image-picker library is available
+          : imagePickerConfiguration.imagePicker.launchImageLibrary
+            ? () => imagePickerConfiguration.imagePicker.launchImageLibrary({ mediaType: 'photo' })
+            : null;
+        if (!launchImageLibrary) {
+          logger.warn('No compatible image picker library found. Please provide a valid image picker library.');
+          if (__DEV__) {
+            Alert.alert(
+              'Development note',
+              'No compatible image picker library found. Please provide a compatible version of `expo-image-picker` or `react-native-image-picker`.',
+            );
+          }
+          return;
+        }
+
+        const result = await launchImageLibrary();
+        if (result.assets && result.assets.length > 0) {
+          const filename = result.assets[0].fileName;
+          const imageUri = result.assets[0].uri;
+          getDataFromUri(imageUri).then((data) => {
+            this.setState({ filename, attachment: data });
+          })
+          .catch((error) => {
+            logger.error("Error:", error);
+          });
+        }
+      } else {
+        // Defaulting to the onAddScreenshot callback
+        const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
+        onAddScreenshot((filename: string, attachement: Uint8Array) => {
+          this.setState({ filename, attachment: attachement });
+        });
+      }
     } else {
       this.setState({ filename: undefined, attachment: undefined });
     }
@@ -118,6 +152,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     const { name, email, description } = this.state;
     const { onFormClose } = this.props;
     const config: FeedbackGeneralConfiguration = this.props;
+    const imagePickerConfiguration: ImagePickerConfiguration = this.props;
     const text: FeedbackTextConfiguration = this.props;
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
@@ -191,7 +226,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
                 onChangeText={(value) => this.setState({ description: value })}
                 multiline
               />
-              {config.enableScreenshot && (
+              {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
                 <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
                   <Text style={styles.screenshotText}>
                   {!this.state.filename && !this.state.attachment

packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -4,7 +4,11 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 /**
  * The props for the feedback form
  */
-export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
+export interface FeedbackFormProps
+  extends FeedbackGeneralConfiguration,
+    FeedbackTextConfiguration,
+    FeedbackCallbacks,
+    ImagePickerConfiguration {
   styles?: FeedbackFormStyles;
 }
 
@@ -187,6 +191,36 @@ export interface FeedbackCallbacks {
   onFormSubmitted?: () => void;
 }
 
+/**
+ * Image Picker configuration interfact matching `expo-image-picker` and `react-native-image-picker`
+ */
+export interface ImagePickerConfiguration {
+  imagePicker?: ImagePicker;
+}
+
+interface ImagePickerResponse {
+  assets?: ImagePickerAsset[];
+}
+
+interface ImagePickerAsset {
+  fileName?: string;
+  uri?: string;
+}
+
+interface ExpoImageLibraryOptions {
+  mediaTypes?: 'images'[];
+}
+
+interface ReactNativeImageLibraryOptions {
+  mediaType: 'photo';
+}
+
+export interface ImagePicker {
+  launchImageLibraryAsync?: (options?: ExpoImageLibraryOptions) => Promise<ImagePickerResponse>;
+
+  launchImageLibrary?: (options: ReactNativeImageLibraryOptions) => Promise<ImagePickerResponse>;
+}
+
 /**
  * The styles for the feedback form
  */

packages/core/src/js/feedback/utils.ts

@@ -14,3 +14,26 @@ export const isValidEmail = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(email);
 };
+
+/**
+ * Reads a file from a URI and returns a UInt8Array of its data.
+ * @param uri The file URI.
+ * @returns A Promise resolving to a UInt8Array.
+ */
+export async function getDataFromUri(uri: string): Promise<Uint8Array> {
+  const response = await fetch(uri);
+  const blob = await response.blob();
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (reader.result instanceof ArrayBuffer) {
+        resolve(new Uint8Array(reader.result));
+      } else {
+        reject(new Error('Failed to read file as UInt8Array'));
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(blob);
+  });
+}

packages/core/test/feedback/FeedbackForm.test.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Alert } from 'react-native';
 
 import { FeedbackForm } from '../../src/js/feedback/FeedbackForm';
-import type { FeedbackFormProps, FeedbackFormStyles } from '../../src/js/feedback/FeedbackForm.types';
+import type { FeedbackFormProps, FeedbackFormStyles, ImagePicker } from '../../src/js/feedback/FeedbackForm.types';
 
 const mockOnFormClose = jest.fn();
 const mockOnAddScreenshot = jest.fn();
@@ -303,7 +303,7 @@ describe('FeedbackForm', () => {
     });
   });
 
-  it('calls onAddScreenshot when the screenshot button is pressed', async () => {
+  it('calls onAddScreenshot when the screenshot button is pressed and no image picker library is integrated', async () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} enableScreenshot={true} />);
 
     fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel));
@@ -313,6 +313,40 @@ describe('FeedbackForm', () => {
     });
   });
 
+  it('calls launchImageLibraryAsync when the expo-image-picker library is integrated', async () => {
+    const mockLaunchImageLibrary = jest.fn().mockResolvedValue({
+      assets: [{ fileName: "mock-image.jpg", uri: "file:///mock/path/image.jpg" }],
+    });
+    const mockImagePicker: jest.Mocked<ImagePicker> = {
+      launchImageLibraryAsync: mockLaunchImageLibrary,
+    };
+
+    const { getByText } = render(<FeedbackForm {...defaultProps} imagePicker={ mockImagePicker } />);
+
+    fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel));
+
+    await waitFor(() => {
+      expect(mockLaunchImageLibrary).toHaveBeenCalled();
+    });
+  });
+
+  it('calls launchImageLibrary when the react-native-image-picker library is integrated', async () => {
+    const mockLaunchImageLibrary = jest.fn().mockResolvedValue({
+      assets: [{ fileName: "mock-image.jpg", uri: "file:///mock/path/image.jpg" }],
+    });
+    const mockImagePicker: jest.Mocked<ImagePicker> = {
+      launchImageLibrary: mockLaunchImageLibrary,
+    };
+
+    const { getByText } = render(<FeedbackForm {...defaultProps} imagePicker={ mockImagePicker } />);
+
+    fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel));
+
+    await waitFor(() => {
+      expect(mockLaunchImageLibrary).toHaveBeenCalled();
+    });
+  });
+
   it('calls onFormClose when the cancel button is pressed', () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);
 

samples/expo/app.json

@@ -47,6 +47,12 @@
           "organization": "sentry-sdks"
         }
       ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ],
       [
         "expo-router",
         {

samples/expo/app/(tabs)/index.tsx

@@ -57,6 +57,12 @@ export default function TabOneScreen() {
           Sentry.nativeCrash();
         }}
       />
+      <Button
+        title="Show feedback form"
+        onPress={() => {
+          Sentry.showFeedbackForm();
+        }}
+      />
       <Button
         title="Set Scope Properties"
         onPress={() => {

samples/expo/app/_layout.tsx

@@ -11,6 +11,7 @@ import { ErrorEvent } from '@sentry/core';
 import { isExpoGo } from '../utils/isExpoGo';
 import { LogBox } from 'react-native';
 import { isWeb } from '../utils/isWeb';
+import * as ImagePicker from 'expo-image-picker';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -57,6 +58,9 @@ Sentry.init({
       }),
       navigationIntegration,
       Sentry.reactNativeTracingIntegration(),
+      Sentry.feedbackIntegration({
+        imagePicker: ImagePicker,
+      }),
     );
     if (isWeb()) {
       integrations.push(Sentry.browserReplayIntegration());

samples/expo/package.json

@@ -20,6 +20,7 @@
     "@types/react": "~18.3.12",
     "expo": "^52.0.0",
     "expo-constants": "~17.0.3",
+    "expo-image-picker": "~16.0.5",
     "expo-linking": "~7.0.2",
     "expo-router": "~4.0.5",
     "expo-status-bar": "~2.0.0",

samples/react-native/package.json

@@ -31,7 +31,6 @@
     "react-native": "0.77.0",
     "react-native-gesture-handler": "^2.22.1",
     "react-native-image-picker": "^7.2.2",
-    "react-native-quick-base64": "^2.1.2",
     "react-native-reanimated": "3.16.7",
     "react-native-safe-area-context": "5.2.0",
     "react-native-screens": "4.6.0",

samples/react-native/src/App.tsx

@@ -37,8 +37,7 @@ import { ErrorEvent } from '@sentry/core';
 import HeavyNavigationScreen from './Screens/HeavyNavigationScreen';
 import WebviewScreen from './Screens/WebviewScreen';
 import { isTurboModuleEnabled } from '@sentry/react-native/dist/js/utils/environment';
-import { toByteArray } from 'react-native-quick-base64';
-import { launchImageLibrary } from 'react-native-image-picker';
+import * as ImagePicker from 'react-native-image-picker';
 
 if (typeof setImmediate === 'undefined') {
   require('setimmediate');
@@ -107,6 +106,7 @@ Sentry.init({
           : true,
       }),
       Sentry.feedbackIntegration({
+        imagePicker: ImagePicker,
         styles:{
           submitButton: {
             backgroundColor: '#6a1b9a',
@@ -153,23 +153,6 @@ const Stack = isMobileOs
   : createStackNavigator();
 const Tab = createBottomTabNavigator();
 
-const handleChooseImage = (attachFile: (filename: string, data: Uint8Array) => void): void => {
-  launchImageLibrary({ mediaType: 'photo', includeBase64: true }, (response) => {
-    if (response.didCancel) {
-      console.log('User cancelled image picker');
-    } else if (response.errorCode) {
-      console.log('ImagePicker Error: ', response.errorMessage);
-    } else if (response.assets && response.assets.length > 0) {
-      const filename = response.assets[0].fileName;
-      const base64String = response.assets[0].base64;
-      const screenShotUint8Array = toByteArray(base64String);
-      if (filename && screenShotUint8Array) {
-        attachFile(filename, screenShotUint8Array);
-      }
-    }
-  });
-};
-
 const ErrorsTabNavigator = Sentry.withProfiler(
   () => {
     return (
@@ -189,7 +172,6 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                 <FeedbackForm
                   {...props}
                   enableScreenshot={true}
-                  onAddScreenshot={handleChooseImage}
                   onFormClose={props.navigation.goBack}
                   onFormSubmitted={props.navigation.goBack}
                   styles={{

yarn.lock

@@ -14686,6 +14686,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-image-loader@npm:~5.0.0":
+  version: 5.0.0
+  resolution: "expo-image-loader@npm:5.0.0"
+  peerDependencies:
+    expo: "*"
+  checksum: 7741b4b926124a1f85e51b0b8c8c9adc37fccf0654eaa0e715cb55cffc716bdc149c0421120f9bec69a69643d3328ec8562899b4aa37a0fdcecfb6fe3cf6f985
+  languageName: node
+  linkType: hard
+
+"expo-image-picker@npm:~16.0.5":
+  version: 16.0.6
+  resolution: "expo-image-picker@npm:16.0.6"
+  dependencies:
+    expo-image-loader: ~5.0.0
+  peerDependencies:
+    expo: "*"
+  checksum: 448097075ad08c99a9c2857547e36f07e5e491fe5264fe03e77418271f077478a89f1ad462febedb9070013bf90f826b75ad4b2855d98a93593f76ae20c121de
+  languageName: node
+  linkType: hard
+
 "expo-keep-awake@npm:~14.0.1":
   version: 14.0.1
   resolution: "expo-keep-awake@npm:14.0.1"
@@ -22988,18 +23008,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-quick-base64@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "react-native-quick-base64@npm:2.1.2"
-  dependencies:
-    base64-js: ^1.5.1
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 46f3b26f48b26978686b0c043336220d681e6a02af5abcf3eb4ab7b9216251d1eb2fac5c559e984d963e93f54bd9f323651daac09762196815558abbd551729b
-  languageName: node
-  linkType: hard
-
 "react-native-reanimated@npm:3.16.7":
   version: 3.16.7
   resolution: "react-native-reanimated@npm:3.16.7"
@@ -24599,6 +24607,7 @@ __metadata:
     "@types/react": ~18.3.12
     expo: ^52.0.0
     expo-constants: ~17.0.3
+    expo-image-picker: ~16.0.5
     expo-linking: ~7.0.2
     expo-router: ~4.0.5
     expo-status-bar: ~2.0.0
@@ -24695,7 +24704,6 @@ __metadata:
     react-native: 0.77.0
     react-native-gesture-handler: ^2.22.1
     react-native-image-picker: ^7.2.2
-    react-native-quick-base64: ^2.1.2
     react-native-reanimated: 3.16.7
     react-native-safe-area-context: 5.2.0
     react-native-screens: 4.6.0