From fe3dc15fc86f7fe9bee6d6e1601ff8dea5d57e7b Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 30 Jan 2025 14:28:26 +0200
Subject: [PATCH 01/22] Disable bouncing

---
 packages/core/src/js/feedback/FeedbackForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index d8a295fa9b..61cf757410 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -131,7 +131,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     return (
     <SafeAreaView style={[styles.container, { padding: 0 }]}>
       <KeyboardAvoidingView behavior={'padding'} style={[styles.container, { padding: 0 }]}>
-        <ScrollView>
+        <ScrollView bounces={false}>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.container}>
               <View style={styles.titleContainer}>

From 72eef2dc432da8062ccad0a51c4b8e801533d2f8 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 30 Jan 2025 14:28:51 +0200
Subject: [PATCH 02/22] Add modal ui appearance

---
 .../core/src/js/feedback/FeedbackForm.styles.ts  | 16 +++++++++++++++-
 .../core/src/js/feedback/FeedbackForm.types.ts   |  1 +
 .../core/src/js/feedback/FeedbackFormManager.tsx | 16 +++++++++-------
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index 57d407adf3..5c742c037b 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -79,7 +79,21 @@ const defaultStyles: FeedbackFormStyles = {
   },
   modalBackground: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  modalSheetContainer: {
+    backgroundColor: BACKROUND_COLOR,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+    alignSelf: 'stretch',
+    height: '98%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
   },
 };
 
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index fbeee76896..c77bf2c6f7 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -205,6 +205,7 @@ export interface FeedbackFormStyles {
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
   modalBackground?: ViewStyle;
+  modalSheetContainer?: ViewStyle;
 }
 
 /**
diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index 4676f90258..db412e0acf 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,6 +1,6 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Modal, View } from 'react-native';
+import { Modal, SafeAreaView, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
 import defaultStyles from './FeedbackForm.styles';
@@ -70,12 +70,14 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
         {isVisible && (
           <View>
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <View style={styles.modalBackground}>
-                <FeedbackForm {...getFeedbackOptions()}
-                  onFormClose={this._handleClose}
-                  onFormSubmitted={this._handleClose}
-                />
-              </View>
+              <SafeAreaView style={styles.modalBackground}>
+                <View style={styles.modalSheetContainer}>
+                  <FeedbackForm {...getFeedbackOptions()}
+                    onFormClose={this._handleClose}
+                    onFormSubmitted={this._handleClose}
+                    />
+                </View>
+              </SafeAreaView>
             </Modal>
           </View>
         )}

From ccc808b5d2a8651d0950caacfafdc90929d1a952 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 30 Jan 2025 14:29:03 +0200
Subject: [PATCH 03/22] Update snapshot tests

---
 .../__snapshots__/FeedbackForm.test.tsx.snap  | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap
index a642bd88da..a3c2857ac9 100644
--- a/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap
+++ b/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap
@@ -31,7 +31,9 @@ exports[`FeedbackForm matches the snapshot with custom styles 1`] = `
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -299,7 +301,9 @@ exports[`FeedbackForm matches the snapshot with custom styles and screenshot but
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -617,7 +621,9 @@ exports[`FeedbackForm matches the snapshot with custom texts 1`] = `
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -916,7 +922,9 @@ exports[`FeedbackForm matches the snapshot with custom texts and screenshot butt
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -1265,7 +1273,9 @@ exports[`FeedbackForm matches the snapshot with default configuration 1`] = `
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -1564,7 +1574,9 @@ exports[`FeedbackForm matches the snapshot with default configuration and screen
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={

From fd47fd22a4bc6c44240536efa73ad08b0a592267 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 30 Jan 2025 16:17:09 +0200
Subject: [PATCH 04/22] Fix bottom margin

---
 packages/core/src/js/feedback/FeedbackForm.styles.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index 5c742c037b..cff6092d7b 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -87,8 +87,9 @@ const defaultStyles: FeedbackFormStyles = {
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 16,
+    marginBottom: -32,
     alignSelf: 'stretch',
-    height: '98%',
+    height: '100%',
     shadowColor: '#000',
     shadowOffset: { width: 0, height: -3 },
     shadowOpacity: 0.1,

From 9ecd8a20f2011b84f748694e7517611ff9e1b535 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 31 Jan 2025 14:01:25 +0200
Subject: [PATCH 05/22] Fix sheet height

---
 packages/core/src/js/feedback/FeedbackForm.styles.ts  | 5 ++---
 packages/core/src/js/feedback/FeedbackFormManager.tsx | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index cff6092d7b..97ffac4a20 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -80,16 +80,15 @@ const defaultStyles: FeedbackFormStyles = {
   modalBackground: {
     flex: 1,
     justifyContent: 'flex-end',
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
   },
   modalSheetContainer: {
     backgroundColor: BACKROUND_COLOR,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 16,
-    marginBottom: -32,
     alignSelf: 'stretch',
-    height: '100%',
+    height: '92%',
     shadowColor: '#000',
     shadowOffset: { width: 0, height: -3 },
     shadowOpacity: 0.1,
diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index db412e0acf..caf26d5fce 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,6 +1,6 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Modal, SafeAreaView, View } from 'react-native';
+import { Modal, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
 import defaultStyles from './FeedbackForm.styles';
@@ -70,14 +70,14 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
         {isVisible && (
           <View>
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <SafeAreaView style={styles.modalBackground}>
+              <View style={styles.modalBackground}>
                 <View style={styles.modalSheetContainer}>
                   <FeedbackForm {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
                     />
                 </View>
-              </SafeAreaView>
+              </View>
             </Modal>
           </View>
         )}

From 05f94f85ceaad44f88c199b3371098c3065f1842 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 31 Jan 2025 14:12:01 +0200
Subject: [PATCH 06/22] Remove extra modal border

---
 packages/core/src/js/feedback/FeedbackForm.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index 97ffac4a20..d0944c8fc1 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -86,7 +86,7 @@ const defaultStyles: FeedbackFormStyles = {
     backgroundColor: BACKROUND_COLOR,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
-    padding: 16,
+    overflow: 'hidden',
     alignSelf: 'stretch',
     height: '92%',
     shadowColor: '#000',

From d88a59910d4e4b67b7a0d7621c7bdf2454688912 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 31 Jan 2025 16:29:40 +0200
Subject: [PATCH 07/22] Do not expose modal styles

---
 .../src/js/feedback/FeedbackForm.styles.ts     | 18 ------------------
 .../core/src/js/feedback/FeedbackForm.types.ts |  2 --
 2 files changed, 20 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index d0944c8fc1..9cbbfab7f7 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -77,24 +77,6 @@ const defaultStyles: FeedbackFormStyles = {
     width: 40,
     height: 40,
   },
-  modalBackground: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    backgroundColor: 'rgba(0, 0, 0, 0.9)',
-  },
-  modalSheetContainer: {
-    backgroundColor: BACKROUND_COLOR,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    overflow: 'hidden',
-    alignSelf: 'stretch',
-    height: '92%',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -3 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5,
-  },
 };
 
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index c77bf2c6f7..cffe54447a 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -204,8 +204,6 @@ export interface FeedbackFormStyles {
   screenshotText?: TextStyle;
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
-  modalBackground?: ViewStyle;
-  modalSheetContainer?: ViewStyle;
 }
 
 /**

From ce1de86607d31502c42f827010b4bc9a49105da0 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 31 Jan 2025 16:46:51 +0200
Subject: [PATCH 08/22] Animate background color

---
 .../src/js/feedback/FeedbackForm.styles.ts    | 29 +++++++++++++
 .../src/js/feedback/FeedbackFormManager.tsx   | 43 +++++++++++++++----
 2 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index 9cbbfab7f7..1e90af07c6 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -1,3 +1,5 @@
+import type { ViewStyle } from 'react-native';
+
 import type { FeedbackFormStyles } from './FeedbackForm.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
@@ -79,4 +81,31 @@ const defaultStyles: FeedbackFormStyles = {
   },
 };
 
+export const modalWrapper: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+export const modalBackground: ViewStyle = {
+  flex: 1,
+  justifyContent: 'flex-end',
+};
+
+export const modalSheetContainer: ViewStyle = {
+  backgroundColor: '#ffffff',
+  borderTopLeftRadius: 16,
+  borderTopRightRadius: 16,
+  overflow: 'hidden',
+  alignSelf: 'stretch',
+  height: '92%',
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: -3 },
+  shadowOpacity: 0.1,
+  shadowRadius: 4,
+  elevation: 5,
+};
+
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index caf26d5fce..c6a31fcc70 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,9 +1,9 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Modal, View } from 'react-native';
+import { Animated, Modal, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
-import defaultStyles from './FeedbackForm.styles';
+import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles';
 import type { FeedbackFormStyles } from './FeedbackForm.types';
 import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
@@ -40,9 +40,15 @@ interface FeedbackFormProviderProps {
   styles?: FeedbackFormStyles;
 }
 
+interface FeedbackFormProviderState {
+  isVisible: boolean;
+  backgroundOpacity: Animated.Value;
+}
+
 class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
-  public state = {
+  public state: FeedbackFormProviderState = {
     isVisible: false,
+    backgroundOpacity: new Animated.Value(0),
   };
 
   public constructor(props: FeedbackFormProviderProps) {
@@ -50,6 +56,21 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
     FeedbackFormManager.initialize(this._setVisibilityFunction);
   }
 
+  /**
+   * Animates the background opacity when the modal is shown.
+   */
+  public componentDidUpdate(_prevProps: any, prevState: FeedbackFormProviderState): void {
+    if (!prevState.isVisible && this.state.isVisible) {
+      Animated.timing(this.state.backgroundOpacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else if (prevState.isVisible && !this.state.isVisible) {
+      this.state.backgroundOpacity.setValue(0);
+    }
+  }
+
   /**
    * Renders the feedback form modal.
    */
@@ -59,8 +80,12 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
       return <>{this.props.children}</>;
     }
 
-    const { isVisible } = this.state;
-    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
+    const { isVisible, backgroundOpacity } = this.state;
+
+    const backgroundColor = backgroundOpacity.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],
+    });
 
     // Wrapping the `Modal` component in a `View` component is necessary to avoid
     // issues like https://github.com/software-mansion/react-native-reanimated/issues/6035
@@ -68,10 +93,10 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
       <>
         {this.props.children}
         {isVisible && (
-          <View>
+          <Animated.View style={[modalWrapper, { backgroundColor }]} >
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <View style={styles.modalBackground}>
-                <View style={styles.modalSheetContainer}>
+              <View style={modalBackground}>
+                <View style={modalSheetContainer}>
                   <FeedbackForm {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
@@ -79,7 +104,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
                 </View>
               </View>
             </Modal>
-          </View>
+          </Animated.View>
         )}
       </>
     );

From a7a4e56ddd257781b6905ae51e706b1343042049 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 31 Jan 2025 18:57:59 +0200
Subject: [PATCH 09/22] Avoid keyboard in modal

---
 packages/core/src/js/feedback/FeedbackForm.tsx        | 6 +++++-
 packages/core/src/js/feedback/FeedbackFormManager.tsx | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 61cf757410..5b8dc28b70 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -7,6 +7,7 @@ import {
   Image,
   Keyboard,
   KeyboardAvoidingView,
+  Platform,
   SafeAreaView,
   ScrollView,
   Text,
@@ -130,7 +131,10 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     return (
     <SafeAreaView style={[styles.container, { padding: 0 }]}>
-      <KeyboardAvoidingView behavior={'padding'} style={[styles.container, { padding: 0 }]}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={[styles.container, { padding: 0 }]}
+      >
         <ScrollView bounces={false}>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.container}>
diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index c6a31fcc70..b7b9f9fe55 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,6 +1,6 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Animated, Modal, View } from 'react-native';
+import { Animated, KeyboardAvoidingView, Modal, Platform, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
 import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles';
@@ -95,14 +95,17 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
         {isVisible && (
           <Animated.View style={[modalWrapper, { backgroundColor }]} >
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <View style={modalBackground}>
+              <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                style={modalBackground}
+              >
                 <View style={modalSheetContainer}>
                   <FeedbackForm {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
                     />
                 </View>
-              </View>
+              </KeyboardAvoidingView>
             </Modal>
           </Animated.View>
         )}

From c4d502edde307d60f60323078b1eddb7c135c312 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 11 Feb 2025 11:31:24 +0200
Subject: [PATCH 10/22] Use Image Picker interface matching `expo-image-picker`
 and `react-native-image-picker`

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 43 ++++++++++++++----
 .../src/js/feedback/FeedbackForm.types.ts     | 45 ++++++++++++++++++-
 packages/core/src/js/feedback/utils.ts        | 30 +++++++++++++
 yarn.lock                                     | 34 ++++++++------
 4 files changed, 130 insertions(+), 22 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 5b8dc28b70..236a93ab12 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/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 { base64ToUint8Array, isValidEmail } from './utils';
 
 /**
  * @beta
@@ -100,12 +100,38 @@ 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 && imagePickerConfiguration.imagePicker.launchImageLibraryAsync) {
+        // expo-image-picker library is available
+        const result = await imagePickerConfiguration.imagePicker.launchImageLibraryAsync({
+          mediaTypes: ['images'], base64: true
+        });
+        if (!result.canceled) {
+          const filename = result.assets[0].fileName;
+          const attachement = base64ToUint8Array(result.assets[0].base64);
+          this.setState({ filename, attachment: attachement });
+        }
+      } else if (imagePickerConfiguration.imagePicker && imagePickerConfiguration.imagePicker.launchImageLibrary) {
+        // react-native-image-picker library is available
+        const result = await imagePickerConfiguration.imagePicker.launchImageLibrary({
+          mediaType: 'photo', includeBase64: true
+        });
+        if (!result.didCancel && !result.errorCode) {
+          const filename = result.assets[0].fileName;
+          const attachement = base64ToUint8Array(result.assets[0].base64);
+          this.setState({ filename, attachment: attachement });
+        }
+      } else {
+        logger.warn('No image picker library found. Please provide an image picker library to use this feature.');
+
+        // 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 +144,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 +218,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
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index cffe54447a..4300e7ebb8 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/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,45 @@ export interface FeedbackCallbacks {
   onFormSubmitted?: () => void;
 }
 
+/**
+ * Image Picker configuration interfact matching `expo-image-picker` and `react-native-image-picker`
+ */
+export interface ImagePickerConfiguration {
+  imagePicker?: ImagePicker;
+}
+
+interface ExpoImagePickerResponse {
+  canceled?: boolean;
+  assets?: ImagePickerAsset[];
+}
+
+interface ReactNativeImagePickerResponse {
+  didCancel?: boolean;
+  errorCode?: string;
+  assets?: ImagePickerAsset[];
+}
+
+interface ImagePickerAsset {
+  fileName?: string;
+  base64?: string;
+}
+
+interface ExpoImageLibraryOptions {
+  mediaTypes?: any[];
+  base64?: boolean;
+}
+
+interface ReactNativeImageLibraryOptions {
+  mediaType: any;
+  includeBase64?: boolean;
+}
+
+interface ImagePicker {
+  launchImageLibraryAsync?: (options?: ExpoImageLibraryOptions) => Promise<ExpoImagePickerResponse>;
+
+  launchImageLibrary?: (options: ReactNativeImageLibraryOptions) => Promise<ReactNativeImagePickerResponse>;
+}
+
 /**
  * The styles for the feedback form
  */
diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index b27fb3ea8d..3e5bc15dc0 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -14,3 +14,33 @@ export const isValidEmail = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(email);
 };
+
+/* eslint-disable no-bitwise */
+export const base64ToUint8Array = (base64?: string): Uint8Array | undefined => {
+  if (!base64) return undefined;
+
+  const cleanedBase64 = base64.replace(/^data:.*;base64,/, ''); // Remove any prefix before the base64 string
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  const bytes: number[] = [];
+
+  let buffer = 0;
+  let bits = 0;
+
+  for (const char of cleanedBase64) {
+    if (char === '=') break;
+
+    const value = chars.indexOf(char); // Validate each character
+    if (value === -1) return undefined;
+
+    buffer = (buffer << 6) | value; // Shift 6 bits to the left and add the value
+    bits += 6;
+
+    if (bits >= 8) {
+      // Add a byte when we have 8 or more bits
+      bits -= 8;
+      bytes.push((buffer >> bits) & 0xff);
+    }
+  }
+
+  return new Uint8Array(bytes);
+};
diff --git a/yarn.lock b/yarn.lock
index 73ef62958c..f29bc21f66 100644
--- a/yarn.lock
+++ b/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.5
+  resolution: "expo-image-picker@npm:16.0.5"
+  dependencies:
+    expo-image-loader: ~5.0.0
+  peerDependencies:
+    expo: "*"
+  checksum: 8391455480d07a2fa785a0246b8eb892d393e64173f4663d77ee26bc497a0f52d9e1690b0fa04094d03ada8cc78aa5477505d870bdcbdb05d5c48c791ddac168
+  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

From 1b74b45d5b497f0fc0e13315b07db373b0f26be7 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 11 Feb 2025 11:32:00 +0200
Subject: [PATCH 11/22] Update samples to pass the ImagePicker library
 implementation

---
 samples/expo/app/(tabs)/index.tsx |  6 ++++++
 samples/expo/app/_layout.tsx      |  4 ++++
 samples/expo/package.json         |  1 +
 samples/react-native/package.json |  1 -
 samples/react-native/src/App.tsx  | 22 ++--------------------
 5 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/samples/expo/app/(tabs)/index.tsx b/samples/expo/app/(tabs)/index.tsx
index 952f21ca44..6c8d39a0c5 100644
--- a/samples/expo/app/(tabs)/index.tsx
+++ b/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={() => {
diff --git a/samples/expo/app/_layout.tsx b/samples/expo/app/_layout.tsx
index 0791ec47d0..b3836cf6d3 100644
--- a/samples/expo/app/_layout.tsx
+++ b/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());
diff --git a/samples/expo/package.json b/samples/expo/package.json
index 16fb02be58..8cb37707f3 100644
--- a/samples/expo/package.json
+++ b/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",
diff --git a/samples/react-native/package.json b/samples/react-native/package.json
index 43526c91d8..c8548f2f41 100644
--- a/samples/react-native/package.json
+++ b/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",
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index a9e36e7fd5..86b66d8cd8 100644
--- a/samples/react-native/src/App.tsx
+++ b/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={{

From a0f4a77771118ee43f0d50423d5ade1ed2c6488f Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 11 Feb 2025 13:41:28 +0200
Subject: [PATCH 12/22] Get image data from uri

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 41 +++++++--------
 .../src/js/feedback/FeedbackForm.types.ts     | 17 ++-----
 packages/core/src/js/feedback/utils.ts        | 51 ++++++++-----------
 yarn.lock                                     |  6 +--
 4 files changed, 50 insertions(+), 65 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 236a93ab12..f1fef55217 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -21,7 +21,7 @@ import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types';
-import { base64ToUint8Array, isValidEmail } from './utils';
+import { getDataFromUri, isValidEmail } from './utils';
 
 /**
  * @beta
@@ -103,29 +103,30 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
   public onScreenshotButtonPress: () => void = async () => {
     if (!this.state.filename && !this.state.attachment) {
       const imagePickerConfiguration: ImagePickerConfiguration = this.props;
-      if (imagePickerConfiguration.imagePicker && imagePickerConfiguration.imagePicker.launchImageLibraryAsync) {
-        // expo-image-picker library is available
-        const result = await imagePickerConfiguration.imagePicker.launchImageLibraryAsync({
-          mediaTypes: ['images'], base64: true
-        });
-        if (!result.canceled) {
-          const filename = result.assets[0].fileName;
-          const attachement = base64ToUint8Array(result.assets[0].base64);
-          this.setState({ filename, attachment: attachement });
+      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.');
         }
-      } else if (imagePickerConfiguration.imagePicker && imagePickerConfiguration.imagePicker.launchImageLibrary) {
-        // react-native-image-picker library is available
-        const result = await imagePickerConfiguration.imagePicker.launchImageLibrary({
-          mediaType: 'photo', includeBase64: true
-        });
-        if (!result.didCancel && !result.errorCode) {
+
+        const result = await launchImageLibrary();
+        if (result.assets && result.assets.length > 0) {
           const filename = result.assets[0].fileName;
-          const attachement = base64ToUint8Array(result.assets[0].base64);
-          this.setState({ filename, attachment: attachement });
+          const imageUri = result.assets[0].uri;
+          getDataFromUri(imageUri).then((data) => {
+            this.setState({ filename, attachment: data });
+          })
+          .catch((error) => {
+            logger.error("Error:", error);
+          });
         }
       } else {
-        logger.warn('No image picker library found. Please provide an image picker library to use this feature.');
-
         // Defaulting to the onAddScreenshot callback
         const { onAddScreenshot } = { ...defaultConfiguration, ...this.props };
         onAddScreenshot((filename: string, attachement: Uint8Array) => {
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 4300e7ebb8..8c1ff26362 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -198,36 +198,27 @@ export interface ImagePickerConfiguration {
   imagePicker?: ImagePicker;
 }
 
-interface ExpoImagePickerResponse {
-  canceled?: boolean;
-  assets?: ImagePickerAsset[];
-}
-
-interface ReactNativeImagePickerResponse {
-  didCancel?: boolean;
-  errorCode?: string;
+interface ImagePickerResponse {
   assets?: ImagePickerAsset[];
 }
 
 interface ImagePickerAsset {
   fileName?: string;
-  base64?: string;
+  uri?: string;
 }
 
 interface ExpoImageLibraryOptions {
   mediaTypes?: any[];
-  base64?: boolean;
 }
 
 interface ReactNativeImageLibraryOptions {
   mediaType: any;
-  includeBase64?: boolean;
 }
 
 interface ImagePicker {
-  launchImageLibraryAsync?: (options?: ExpoImageLibraryOptions) => Promise<ExpoImagePickerResponse>;
+  launchImageLibraryAsync?: (options?: ExpoImageLibraryOptions) => Promise<ImagePickerResponse>;
 
-  launchImageLibrary?: (options: ReactNativeImageLibraryOptions) => Promise<ReactNativeImagePickerResponse>;
+  launchImageLibrary?: (options: ReactNativeImageLibraryOptions) => Promise<ImagePickerResponse>;
 }
 
 /**
diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index 3e5bc15dc0..97f239c426 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -15,32 +15,25 @@ export const isValidEmail = (email: string): boolean => {
   return emailRegex.test(email);
 };
 
-/* eslint-disable no-bitwise */
-export const base64ToUint8Array = (base64?: string): Uint8Array | undefined => {
-  if (!base64) return undefined;
-
-  const cleanedBase64 = base64.replace(/^data:.*;base64,/, ''); // Remove any prefix before the base64 string
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-  const bytes: number[] = [];
-
-  let buffer = 0;
-  let bits = 0;
-
-  for (const char of cleanedBase64) {
-    if (char === '=') break;
-
-    const value = chars.indexOf(char); // Validate each character
-    if (value === -1) return undefined;
-
-    buffer = (buffer << 6) | value; // Shift 6 bits to the left and add the value
-    bits += 6;
-
-    if (bits >= 8) {
-      // Add a byte when we have 8 or more bits
-      bits -= 8;
-      bytes.push((buffer >> bits) & 0xff);
-    }
-  }
-
-  return new Uint8Array(bytes);
-};
+/**
+ * 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);
+  });
+}
diff --git a/yarn.lock b/yarn.lock
index f29bc21f66..53eebae647 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14696,13 +14696,13 @@ __metadata:
   linkType: hard
 
 "expo-image-picker@npm:~16.0.5":
-  version: 16.0.5
-  resolution: "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: 8391455480d07a2fa785a0246b8eb892d393e64173f4663d77ee26bc497a0f52d9e1690b0fa04094d03ada8cc78aa5477505d870bdcbdb05d5c48c791ddac168
+  checksum: 448097075ad08c99a9c2857547e36f07e5e491fe5264fe03e77418271f077478a89f1ad462febedb9070013bf90f826b75ad4b2855d98a93593f76ae20c121de
   languageName: node
   linkType: hard
 

From 357dea8e8b552e3bcfafbe188ff7ae3cf9d109a5 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 11 Feb 2025 13:50:03 +0200
Subject: [PATCH 13/22] Add early return and dev note

---
 packages/core/src/js/feedback/FeedbackForm.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index f1fef55217..62953f7d44 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -113,6 +113,13 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
             : 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();

From 192220b0c168e3541c7f986f72af435271625e65 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 11 Feb 2025 15:21:15 +0200
Subject: [PATCH 14/22] Adds tests

---
 .../src/js/feedback/FeedbackForm.types.ts     |  2 +-
 .../core/test/feedback/FeedbackForm.test.tsx  | 38 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 8c1ff26362..3b6b863ad3 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -215,7 +215,7 @@ interface ReactNativeImageLibraryOptions {
   mediaType: any;
 }
 
-interface ImagePicker {
+export interface ImagePicker {
   launchImageLibraryAsync?: (options?: ExpoImageLibraryOptions) => Promise<ImagePickerResponse>;
 
   launchImageLibrary?: (options: ReactNativeImageLibraryOptions) => Promise<ImagePickerResponse>;
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 33cf9d5811..92ed48fe4a 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/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} />);
 

From c3991ff2653207eb20961112255d0ace8655db4e Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 11 Feb 2025 15:36:54 +0200
Subject: [PATCH 15/22] Adds sample expo plugin configuration

---
 samples/expo/app.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/samples/expo/app.json b/samples/expo/app.json
index c97346d0b5..8121030ff9 100644
--- a/samples/expo/app.json
+++ b/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",
         {

From 6666cf688ac0a08c30e75c3dcdad3c4c7629594f Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 12 Feb 2025 13:40:14 +0200
Subject: [PATCH 16/22] Update media type for expo

---
 packages/core/src/js/feedback/FeedbackForm.tsx      | 2 +-
 packages/core/src/js/feedback/FeedbackForm.types.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 62953f7d44..7b6cdcb4e1 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -106,7 +106,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       if (imagePickerConfiguration.imagePicker) {
         const launchImageLibrary = imagePickerConfiguration.imagePicker.launchImageLibraryAsync
           // expo-image-picker library is available
-          ? () => imagePickerConfiguration.imagePicker.launchImageLibraryAsync({ mediaTypes: ["images"] })
+          ? () => imagePickerConfiguration.imagePicker.launchImageLibraryAsync({ mediaTypes: ['images'] })
           // react-native-image-picker library is available
           : imagePickerConfiguration.imagePicker.launchImageLibrary
             ? () => imagePickerConfiguration.imagePicker.launchImageLibrary({ mediaType: "photo" })
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 3b6b863ad3..347bdd33ae 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -208,7 +208,7 @@ interface ImagePickerAsset {
 }
 
 interface ExpoImageLibraryOptions {
-  mediaTypes?: any[];
+  mediaTypes?: 'images'[];
 }
 
 interface ReactNativeImageLibraryOptions {

From d1e51071e73273a2b0c67a6224c1daa7b19c0836 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 12 Feb 2025 13:41:12 +0200
Subject: [PATCH 17/22] Update media type for rn

---
 packages/core/src/js/feedback/FeedbackForm.tsx      | 2 +-
 packages/core/src/js/feedback/FeedbackForm.types.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 7b6cdcb4e1..062339a1cc 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -109,7 +109,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
           ? () => imagePickerConfiguration.imagePicker.launchImageLibraryAsync({ mediaTypes: ['images'] })
           // react-native-image-picker library is available
           : imagePickerConfiguration.imagePicker.launchImageLibrary
-            ? () => imagePickerConfiguration.imagePicker.launchImageLibrary({ mediaType: "photo" })
+            ? () => imagePickerConfiguration.imagePicker.launchImageLibrary({ mediaType: 'photo' })
             : null;
         if (!launchImageLibrary) {
           logger.warn('No compatible image picker library found. Please provide a valid image picker library.');
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 347bdd33ae..69fcd62f6a 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -212,7 +212,7 @@ interface ExpoImageLibraryOptions {
 }
 
 interface ReactNativeImageLibraryOptions {
-  mediaType: any;
+  mediaType: 'photo';
 }
 
 export interface ImagePicker {

From d780fc10fbcf24dc287de127b3215024f15942ba Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 13 Feb 2025 12:05:52 +0200
Subject: [PATCH 18/22] Add native implementation for getDataFromUri

---
 .../io/sentry/react/RNSentryModuleImpl.java   | 35 +++++++++++++++++++
 .../java/io/sentry/react/RNSentryModule.java  |  5 +++
 .../java/io/sentry/react/RNSentryModule.java  |  5 +++
 packages/core/ios/RNSentry.mm                 | 29 +++++++++++++++
 packages/core/src/js/NativeRNSentry.ts        |  1 +
 .../core/src/js/feedback/FeedbackForm.tsx     | 13 ++++---
 packages/core/src/js/feedback/utils.ts        | 23 ------------
 packages/core/src/js/wrapper.ts               | 15 ++++++++
 packages/core/test/mockWrapper.ts             |  1 +
 9 files changed, 100 insertions(+), 27 deletions(-)

diff --git a/packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java b/packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java
index 486ae72c48..38ce09c84c 100644
--- a/packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java
+++ b/packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java
@@ -10,6 +10,7 @@
 import android.content.pm.PackageInfo;
 import android.content.pm.PackageManager;
 import android.content.res.AssetManager;
+import android.net.Uri;
 import android.util.SparseIntArray;
 import androidx.core.app.FrameMetricsAggregator;
 import androidx.fragment.app.FragmentActivity;
@@ -72,6 +73,7 @@
 import io.sentry.vendor.Base64;
 import java.io.BufferedInputStream;
 import java.io.BufferedReader;
+import java.io.ByteArrayOutputStream;
 import java.io.File;
 import java.io.FileNotFoundException;
 import java.io.FileReader;
@@ -970,6 +972,39 @@ public String fetchNativePackageName() {
     return packageInfo.packageName;
   }
 
+  public void getDataFromUri(String uri, Promise promise) {
+    try {
+      Uri contentUri = Uri.parse(uri);
+      try (InputStream is =
+          getReactApplicationContext().getContentResolver().openInputStream(contentUri)) {
+        if (is == null) {
+          String msg = "File not found for uri: " + uri;
+          logger.log(SentryLevel.ERROR, msg);
+          promise.reject(new Exception(msg));
+          return;
+        }
+
+        ByteArrayOutputStream byteBuffer = new ByteArrayOutputStream();
+        int bufferSize = 1024;
+        byte[] buffer = new byte[bufferSize];
+        int len;
+        while ((len = is.read(buffer)) != -1) {
+          byteBuffer.write(buffer, 0, len);
+        }
+        byte[] byteArray = byteBuffer.toByteArray();
+        WritableArray jsArray = Arguments.createArray();
+        for (byte b : byteArray) {
+          jsArray.pushInt(b & 0xFF);
+        }
+        promise.resolve(jsArray);
+      }
+    } catch (IOException e) {
+      String msg = "Error reading uri: " + uri + ": " + e.getMessage();
+      logger.log(SentryLevel.ERROR, msg);
+      promise.reject(new Exception(msg));
+    }
+  }
+
   public void crashedLastRun(Promise promise) {
     promise.resolve(Sentry.isCrashedLastRun());
   }
diff --git a/packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java b/packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java
index 6ea8542e8b..92ef2c0614 100644
--- a/packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java
+++ b/packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java
@@ -177,4 +177,9 @@ public void crashedLastRun(Promise promise) {
   public void getNewScreenTimeToDisplay(Promise promise) {
     this.impl.getNewScreenTimeToDisplay(promise);
   }
+
+  @Override
+  public void getDataFromUri(String uri, Promise promise) {
+    this.impl.getDataFromUri(uri, promise);
+  }
 }
diff --git a/packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java b/packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java
index 57fcbf0a73..7896d45fde 100644
--- a/packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java
+++ b/packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java
@@ -152,6 +152,11 @@ public String fetchNativePackageName() {
     return this.impl.fetchNativePackageName();
   }
 
+  @ReactMethod
+  public void getDataFromUri(String uri, Promise promise) {
+    this.impl.getDataFromUri(uri, promise);
+  }
+
   @ReactMethod(isBlockingSynchronousMethod = true)
   public WritableMap fetchNativeStackFramesBy(ReadableArray instructionsAddr) {
     // Not used on Android
diff --git a/packages/core/ios/RNSentry.mm b/packages/core/ios/RNSentry.mm
index 79ff76d0ae..f0ea379cc4 100644
--- a/packages/core/ios/RNSentry.mm
+++ b/packages/core/ios/RNSentry.mm
@@ -745,6 +745,35 @@ - (NSDictionary *)fetchNativeStackFramesBy:(NSArray<NSNumber *> *)instructionsAd
 #endif
 }
 
+RCT_EXPORT_METHOD(getDataFromUri
+                  : (NSString *_Nonnull)uri resolve
+                  : (RCTPromiseResolveBlock)resolve rejecter
+                  : (RCTPromiseRejectBlock)reject)
+{
+#if TARGET_OS_IPHONE || TARGET_OS_MACCATALYST
+    NSURL *fileURL = [NSURL URLWithString:uri];
+    if (![fileURL isFileURL]) {
+        reject(@"SentryReactNative", @"The provided URI is not a valid file:// URL", nil);
+        return;
+    }
+    NSError *error = nil;
+    NSData *fileData = [NSData dataWithContentsOfURL:fileURL options:0 error:&error];
+    if (error || !fileData) {
+        reject(@"SentryReactNative", @"Failed to read file data", error);
+        return;
+    }
+    NSMutableArray *byteArray = [NSMutableArray arrayWithCapacity:fileData.length];
+    const unsigned char *bytes = (const unsigned char *)fileData.bytes;
+
+    for (NSUInteger i = 0; i < fileData.length; i++) {
+        [byteArray addObject:@(bytes[i])];
+    }
+    resolve(byteArray);
+#else
+    resolve(nil);
+#endif
+}
+
 RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(NSString *, getCurrentReplayId)
 {
 #if SENTRY_TARGET_REPLAY_SUPPORTED
diff --git a/packages/core/src/js/NativeRNSentry.ts b/packages/core/src/js/NativeRNSentry.ts
index 2d553e548f..125dc3b082 100644
--- a/packages/core/src/js/NativeRNSentry.ts
+++ b/packages/core/src/js/NativeRNSentry.ts
@@ -48,6 +48,7 @@ export interface Spec extends TurboModule {
   captureReplay(isHardCrash: boolean): Promise<string | undefined | null>;
   getCurrentReplayId(): string | undefined | null;
   crashedLastRun(): Promise<boolean | undefined | null>;
+  getDataFromUri(uri: string): Promise<number[]>;
 }
 
 export type NativeStackFrame = {
diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 062339a1cc..b6aac2f412 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -17,11 +17,12 @@ import {
   View
 } from 'react-native';
 
+import { NATIVE } from './../wrapper';
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types';
-import { getDataFromUri, isValidEmail } from './utils';
+import { isValidEmail } from './utils';
 
 /**
  * @beta
@@ -126,11 +127,15 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
         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 });
+          NATIVE.getDataFromUri(imageUri).then((data) => {
+            if (data != null) {
+              this.setState({ filename, attachment: data });
+            } else {
+              logger.error('Failed to read image data from uri:', imageUri);
+            }
           })
           .catch((error) => {
-            logger.error("Error:", error);
+            logger.error('Failed to read image data from uri:', imageUri, 'error: ', error);
           });
         }
       } else {
diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index 97f239c426..b27fb3ea8d 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -14,26 +14,3 @@ 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);
-  });
-}
diff --git a/packages/core/src/js/wrapper.ts b/packages/core/src/js/wrapper.ts
index 4db45f0855..bbef288d2b 100644
--- a/packages/core/src/js/wrapper.ts
+++ b/packages/core/src/js/wrapper.ts
@@ -120,6 +120,8 @@ interface SentryNativeWrapper {
 
   crashedLastRun(): Promise<boolean | null>;
   getNewScreenTimeToDisplay(): Promise<number | null | undefined>;
+
+  getDataFromUri(uri: string): Promise<Uint8Array>;
 }
 
 const EOL = utf8ToBytes('\n');
@@ -702,6 +704,19 @@ export const NATIVE: SentryNativeWrapper = {
     return RNSentry.getNewScreenTimeToDisplay();
   },
 
+  async getDataFromUri(uri: string): Promise<Uint8Array | null> {
+    if (!this.enableNative || !this._isModuleLoaded(RNSentry)) {
+      return null;
+    }
+    try {
+      const data: number[] = await RNSentry.getDataFromUri(uri);
+      return new Uint8Array(data);
+    } catch (error) {
+      logger.error('Error:', error);
+      return null;
+    }
+  },
+
   /**
    * Gets the event from envelopeItem and applies the level filter to the selected event.
    * @param data An envelope item containing the event.
diff --git a/packages/core/test/mockWrapper.ts b/packages/core/test/mockWrapper.ts
index 82b2b9194c..fe6a611394 100644
--- a/packages/core/test/mockWrapper.ts
+++ b/packages/core/test/mockWrapper.ts
@@ -59,6 +59,7 @@ const NATIVE: MockInterface<NativeType> = {
 
   crashedLastRun: jest.fn(),
   getNewScreenTimeToDisplay: jest.fn().mockResolvedValue(42),
+  getDataFromUri: jest.fn(),
 };
 
 NATIVE.isNativeAvailable.mockReturnValue(true);

From 85dff80543c2bd803acd6aa2f1d64acc907c66f1 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 13 Feb 2025 13:22:47 +0200
Subject: [PATCH 19/22] Bumped to the latest react-native-image-picker version
 8

---
 packages/core/src/js/feedback/FeedbackForm.types.ts |  4 +++-
 samples/react-native/package.json                   |  2 +-
 yarn.lock                                           | 10 +++++-----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 69fcd62f6a..b0393c788a 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -192,7 +192,9 @@ export interface FeedbackCallbacks {
 }
 
 /**
- * Image Picker configuration interfact matching `expo-image-picker` and `react-native-image-picker`
+ * Image Picker configuration interface compatible with:
+ * - `react-native-image-picker`: 7.2, 8.0
+ * - `expo-image-picker`: 16.0`
  */
 export interface ImagePickerConfiguration {
   imagePicker?: ImagePicker;
diff --git a/samples/react-native/package.json b/samples/react-native/package.json
index 36bee014d6..0c21338555 100644
--- a/samples/react-native/package.json
+++ b/samples/react-native/package.json
@@ -30,7 +30,7 @@
     "react": "18.3.1",
     "react-native": "0.77.0",
     "react-native-gesture-handler": "^2.22.1",
-    "react-native-image-picker": "^7.2.2",
+    "react-native-image-picker": "^8.0.0",
     "react-native-reanimated": "3.16.7",
     "react-native-safe-area-context": "5.2.0",
     "react-native-screens": "4.6.0",
diff --git a/yarn.lock b/yarn.lock
index 85af1922f6..9c988f9a8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22928,13 +22928,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-image-picker@npm:^7.2.2":
-  version: 7.2.2
-  resolution: "react-native-image-picker@npm:7.2.2"
+"react-native-image-picker@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "react-native-image-picker@npm:8.0.0"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 34289e29a28c3f8d869db46fdf5bfdeec8b37221ee4dcd9a63698b106f0097d11f4c40f3a2789c23a728dc94e37e02a0cf61add80aa04ffe60a6cf82115cddea
+  checksum: d1b90219f4ff77d700307bd3dfc7475463dfe5c1d9dc4da365535075df4baf44d0c411cf9f19a3f83226830ada18ad3728abc2b14f67c77b1f5e146ebbb0bdec
   languageName: node
   linkType: hard
 
@@ -24703,7 +24703,7 @@ __metadata:
     react: 18.3.1
     react-native: 0.77.0
     react-native-gesture-handler: ^2.22.1
-    react-native-image-picker: ^7.2.2
+    react-native-image-picker: ^8.0.0
     react-native-reanimated: 3.16.7
     react-native-safe-area-context: 5.2.0
     react-native-screens: 4.6.0

From e92fea69b0feb25324998e626017f9f9429d2c8d Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 13 Feb 2025 13:53:11 +0200
Subject: [PATCH 20/22] Add missing null in return type

---
 packages/core/src/js/wrapper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/js/wrapper.ts b/packages/core/src/js/wrapper.ts
index bbef288d2b..9b37a9b87b 100644
--- a/packages/core/src/js/wrapper.ts
+++ b/packages/core/src/js/wrapper.ts
@@ -121,7 +121,7 @@ interface SentryNativeWrapper {
   crashedLastRun(): Promise<boolean | null>;
   getNewScreenTimeToDisplay(): Promise<number | null | undefined>;
 
-  getDataFromUri(uri: string): Promise<Uint8Array>;
+  getDataFromUri(uri: string): Promise<Uint8Array | null>;
 }
 
 const EOL = utf8ToBytes('\n');

From becede1fc7ce859998c133adaad2d2b1a7bc0131 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 13 Feb 2025 18:57:16 +0200
Subject: [PATCH 21/22] Pull down to cancel on iOS

---
 .../src/js/feedback/FeedbackFormManager.tsx   | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index b7b9f9fe55..ff9767b64f 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,6 +1,6 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Animated, KeyboardAvoidingView, Modal, Platform, View } from 'react-native';
+import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
 import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles';
@@ -43,14 +43,47 @@ interface FeedbackFormProviderProps {
 interface FeedbackFormProviderState {
   isVisible: boolean;
   backgroundOpacity: Animated.Value;
+  panY: Animated.Value;
 }
 
 class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
   public state: FeedbackFormProviderState = {
     isVisible: false,
     backgroundOpacity: new Animated.Value(0),
+    panY: new Animated.Value(0),
   };
 
+  private _panResponder = (Platform.OS === 'android') ?
+    PanResponder.create({ // Disable swiping on Android since it interferes with the platform gestures
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: () => false,
+    }):
+    PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderMove: (_, gestureState) => {
+      if (gestureState.dy > 0) {
+        this.state.panY.setValue(gestureState.dy);
+      }
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      if (gestureState.dy > 200) { // Close on swipe below a certain threshold
+        Animated.timing(this.state.panY, {
+          toValue: 600,
+          duration: 200,
+          useNativeDriver: true,
+        }).start(() => {
+          this._handleClose();
+        });
+      } else { // Animate it back to the original position
+        Animated.spring(this.state.panY, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start();
+      }
+    },
+  });
+
   public constructor(props: FeedbackFormProviderProps) {
     super(props);
     FeedbackFormManager.initialize(this._setVisibilityFunction);
@@ -99,12 +132,15 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
                 behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                 style={modalBackground}
               >
-                <View style={modalSheetContainer}>
+                <Animated.View
+                  style={[modalSheetContainer, { transform: [{ translateY: this.state.panY }] }]}
+                  {...this._panResponder.panHandlers}
+                >
                   <FeedbackForm {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
                     />
-                </View>
+                </Animated.View>
               </KeyboardAvoidingView>
             </Modal>
           </Animated.View>
@@ -115,6 +151,9 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
 
   private _setVisibilityFunction = (visible: boolean): void => {
     this.setState({ isVisible: visible });
+    if (visible) {
+      this.state.panY.setValue(0);
+    }
   };
 
   private _handleClose = (): void => {

From 3238fe0a2e4b3d062acb8d561af2ed94f5edbc4a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 14 Feb 2025 11:57:43 +0200
Subject: [PATCH 22/22] On Android allow pulling down only from the top to
 avoid breaking native gestures

---
 .../src/js/feedback/FeedbackFormManager.tsx   | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index ff9767b64f..3cf1c114d0 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -8,6 +8,9 @@ import type { FeedbackFormStyles } from './FeedbackForm.types';
 import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
 
+const PULL_DOWN_CLOSE_THREESHOLD = 200;
+const PULL_DOWN_ANDROID_ACTIVATION_HEIGHT = 150;
+
 class FeedbackFormManager {
   private static _isVisible = false;
   private static _setVisibility: (visible: boolean) => void;
@@ -53,21 +56,22 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
     panY: new Animated.Value(0),
   };
 
-  private _panResponder = (Platform.OS === 'android') ?
-    PanResponder.create({ // Disable swiping on Android since it interferes with the platform gestures
-      onStartShouldSetPanResponder: () => false,
-      onMoveShouldSetPanResponder: () => false,
-    }):
-    PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: () => true,
+
+  private _panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: (evt, _gestureState) => {
+      // On Android allow pulling down only from the top to avoid breaking native gestures
+      return Platform.OS !== 'android' || evt.nativeEvent.pageY < PULL_DOWN_ANDROID_ACTIVATION_HEIGHT;
+    },
+    onMoveShouldSetPanResponder: (evt, _gestureState) => {
+      return Platform.OS !== 'android' || evt.nativeEvent.pageY < PULL_DOWN_ANDROID_ACTIVATION_HEIGHT;
+    },
     onPanResponderMove: (_, gestureState) => {
       if (gestureState.dy > 0) {
         this.state.panY.setValue(gestureState.dy);
       }
     },
     onPanResponderRelease: (_, gestureState) => {
-      if (gestureState.dy > 200) { // Close on swipe below a certain threshold
+      if (gestureState.dy > PULL_DOWN_CLOSE_THREESHOLD) { // Close on swipe below a certain threshold
         Animated.timing(this.state.panY, {
           toValue: 600,
           duration: 200,