From 638377d3b2d5ed2a20a5813ae630a59ad60fdb27 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 23 Jan 2025 16:09:16 +0200
Subject: [PATCH 01/18] Auto-inject feedback form

---
 .../src/js/feedback/FeedbackFormManager.tsx   | 92 +++++++++++++++++++
 packages/core/src/js/index.ts                 |  1 +
 packages/core/src/js/sdk.tsx                  |  5 +-
 .../react-native/src/Screens/ErrorsScreen.tsx |  6 ++
 4 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/js/feedback/FeedbackFormManager.tsx

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
new file mode 100644
index 0000000000..0b82e61693
--- /dev/null
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Modal, StyleSheet,View } from 'react-native';
+
+import { FeedbackForm } from './FeedbackForm';
+
+class FeedbackFormManager {
+  private static _isVisible = false;
+  private static _setVisibility: (visible: boolean) => void;
+
+  public static initialize(setVisibility: (visible: boolean) => void): void {
+    this._setVisibility = setVisibility;
+  }
+
+  public static show(): void {
+    if (this._setVisibility) {
+      this._isVisible = true;
+      this._setVisibility(true);
+    }
+  }
+
+  public static hide(): void {
+    if (this._setVisibility) {
+      this._isVisible = false;
+      this._setVisibility(false);
+    }
+  }
+
+  public static isFormVisible(): boolean {
+    return this._isVisible;
+  }
+}
+
+interface FeedbackFormProviderProps {
+  children: React.ReactNode;
+}
+
+class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
+  public state = {
+    isVisible: false,
+  };
+
+  public constructor(props: FeedbackFormProviderProps) {
+    super(props);
+    FeedbackFormManager.initialize(this._setVisibilityFunction);
+  }
+
+  /**
+   * Renders the feedback form modal.
+   */
+  public render(): React.ReactNode {
+    const { isVisible } = this.state;
+
+    return (
+      <>
+        {this.props.children}
+        {isVisible && (
+          <Modal visible={isVisible} transparent animationType="slide">
+            <View style={styles.modalBackground}>
+              <FeedbackForm
+                onFormClose={this._handleClose}
+                onFormSubmitted={this._handleClose}
+              />
+            </View>
+          </Modal>
+        )}
+      </>
+    );
+  }
+
+  private _setVisibilityFunction = (visible: boolean): void => {
+    this.setState({ isVisible: visible });
+  };
+
+  private _handleClose = (): void => {
+    FeedbackFormManager.hide();
+    this.setState({ isVisible: false });
+  };
+}
+
+const showFeedbackForm = (): void => {
+  FeedbackFormManager.show();
+};
+
+const styles = StyleSheet.create({
+  modalBackground: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+});
+
+export { showFeedbackForm, FeedbackFormProvider };
diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts
index 53abd065b8..a07e89f92a 100644
--- a/packages/core/src/js/index.ts
+++ b/packages/core/src/js/index.ts
@@ -86,3 +86,4 @@ export type { TimeToDisplayProps } from './tracing';
 export { Mask, Unmask } from './replay/CustomMask';
 
 export { FeedbackForm } from './feedback/FeedbackForm';
+export { showFeedbackForm } from './feedback/FeedbackFormManager';
diff --git a/packages/core/src/js/sdk.tsx b/packages/core/src/js/sdk.tsx
index 3c6fdff90c..606e2cf5ea 100644
--- a/packages/core/src/js/sdk.tsx
+++ b/packages/core/src/js/sdk.tsx
@@ -8,6 +8,7 @@ import {
 import * as React from 'react';
 
 import { ReactNativeClient } from './client';
+import { FeedbackFormProvider } from './feedback/FeedbackFormManager';
 import { getDevServer } from './integrations/debugsymbolicatorutils';
 import { getDefaultIntegrations } from './integrations/default';
 import type { ReactNativeClientOptions, ReactNativeOptions, ReactNativeWrapperOptions } from './options';
@@ -163,7 +164,9 @@ export function wrap<P extends Record<string, unknown>>(
     return (
       <TouchEventBoundary {...(options?.touchEventBoundaryProps ?? {})}>
         <ReactNativeProfiler {...profilerProps}>
-          <RootComponent {...appProps} />
+          <FeedbackFormProvider>
+            <RootComponent {...appProps} />
+          </FeedbackFormProvider>
         </ReactNativeProfiler>
       </TouchEventBoundary>
     );
diff --git a/samples/react-native/src/Screens/ErrorsScreen.tsx b/samples/react-native/src/Screens/ErrorsScreen.tsx
index 4788fa407a..cc2810fd1d 100644
--- a/samples/react-native/src/Screens/ErrorsScreen.tsx
+++ b/samples/react-native/src/Screens/ErrorsScreen.tsx
@@ -226,6 +226,12 @@ const ErrorsScreen = (_props: Props) => {
             _props.navigation.navigate('FeedbackForm');
           }}
         />
+        <Button
+          title="Feedback form (auto)"
+          onPress={() => {
+            Sentry.showFeedbackForm();
+          }}
+        />
         <Button
           title="Send user feedback"
           onPress={() => {

From db407ce2fb0035ea4d729e07834eae25811d9917 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 23 Jan 2025 16:12:14 +0200
Subject: [PATCH 02/18] Temporarily disable sample rotating indicator

---
 samples/react-native/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 2df2079c0b..3c14167897 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -318,7 +318,6 @@ function App() {
   return (
     <>
       <RootNavigationContainer />
-      <RunningIndicator />
     </>
   );
 }

From e9f428daeaa368a3372526a6863e508eddfbe761 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 09:26:17 +0200
Subject: [PATCH 03/18] Revert "Temporarily disable sample rotating indicator"

This reverts commit db407ce2fb0035ea4d729e07834eae25811d9917.
---
 samples/react-native/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 3c14167897..2df2079c0b 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -318,6 +318,7 @@ function App() {
   return (
     <>
       <RootNavigationContainer />
+      <RunningIndicator />
     </>
   );
 }

From 011fea7fafab764ac49e240a7c21cbffb541da97 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 09:43:31 +0200
Subject: [PATCH 04/18] Wrap Modal in a View

---
 .../src/js/feedback/FeedbackFormManager.tsx   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index 0b82e61693..7c1f765313 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -50,18 +50,22 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
   public render(): React.ReactNode {
     const { isVisible } = this.state;
 
+    // Wrapping the `Modal` component in a `View` component is necessary to avoid
+    // issues like https://github.com/software-mansion/react-native-reanimated/issues/6035
     return (
       <>
         {this.props.children}
         {isVisible && (
-          <Modal visible={isVisible} transparent animationType="slide">
-            <View style={styles.modalBackground}>
-              <FeedbackForm
-                onFormClose={this._handleClose}
-                onFormSubmitted={this._handleClose}
-              />
-            </View>
-          </Modal>
+          <View>
+            <Modal visible={isVisible} transparent animationType="slide">
+              <View style={styles.modalBackground}>
+                <FeedbackForm
+                  onFormClose={this._handleClose}
+                  onFormSubmitted={this._handleClose}
+                />
+              </View>
+            </Modal>
+          </View>
         )}
       </>
     );

From a4962b9694dadc50ee6ca24e49440e652ee20a45 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 09:48:45 +0200
Subject: [PATCH 05/18] Handles Android back button

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

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index 7c1f765313..b808e8a45a 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -57,7 +57,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
         {this.props.children}
         {isVisible && (
           <View>
-            <Modal visible={isVisible} transparent animationType="slide">
+            <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose}>
               <View style={styles.modalBackground}>
                 <FeedbackForm
                   onFormClose={this._handleClose}

From 2d4abb37a3a0612d740b98d75539adf3184cc7d2 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 10:00:58 +0200
Subject: [PATCH 06/18] Make modal style configurable

---
 .../core/src/js/feedback/FeedbackForm.styles.ts    |  4 ++++
 .../core/src/js/feedback/FeedbackForm.types.ts     |  1 +
 .../core/src/js/feedback/FeedbackFormManager.tsx   | 14 +++++---------
 3 files changed, 10 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..57d407adf3 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -77,6 +77,10 @@ const defaultStyles: FeedbackFormStyles = {
     width: 40,
     height: 40,
   },
+  modalBackground: {
+    flex: 1,
+    justifyContent: 'center',
+  },
 };
 
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index cffe54447a..fbeee76896 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -204,6 +204,7 @@ export interface FeedbackFormStyles {
   screenshotText?: TextStyle;
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
+  modalBackground?: ViewStyle;
 }
 
 /**
diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index b808e8a45a..d77e8cfe9f 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { Modal, StyleSheet,View } from 'react-native';
+import { Modal, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
+import defaultStyles from './FeedbackForm.styles';
+import type { FeedbackFormStyles } from './FeedbackForm.types';
 
 class FeedbackFormManager {
   private static _isVisible = false;
@@ -32,6 +34,7 @@ class FeedbackFormManager {
 
 interface FeedbackFormProviderProps {
   children: React.ReactNode;
+  styles?: FeedbackFormStyles;
 }
 
 class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
@@ -49,6 +52,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
    */
   public render(): React.ReactNode {
     const { isVisible } = this.state;
+    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
 
     // Wrapping the `Modal` component in a `View` component is necessary to avoid
     // issues like https://github.com/software-mansion/react-native-reanimated/issues/6035
@@ -85,12 +89,4 @@ const showFeedbackForm = (): void => {
   FeedbackFormManager.show();
 };
 
-const styles = StyleSheet.create({
-  modalBackground: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0,0,0,0.5)',
-  },
-});
-
 export { showFeedbackForm, FeedbackFormProvider };

From 84108f151b0e4dcfe8c24ca402f98cc09086020a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 11:20:43 +0200
Subject: [PATCH 07/18] Print an error when the modal is not supported

---
 .../core/src/js/feedback/FeedbackFormManager.tsx  |  7 +++++++
 packages/core/src/js/feedback/utils.ts            | 15 +++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index d77e8cfe9f..d0ac108b43 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -1,9 +1,11 @@
+import { logger } from '@sentry/core';
 import * as React from 'react';
 import { Modal, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormStyles } from './FeedbackForm.types';
+import { isModalSupported } from './utils';
 
 class FeedbackFormManager {
   private static _isVisible = false;
@@ -51,6 +53,11 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
    * Renders the feedback form modal.
    */
   public render(): React.ReactNode {
+    if (!isModalSupported()) {
+      logger.error('FeedbackForm Modal is not supported in React Native < 0.71 with Fabric renderer.');
+      return <>{this.props.children}</>;
+    }
+
     const { isVisible } = this.state;
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
 
diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index 4d4efff42b..31dd0de94d 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -1,3 +1,18 @@
+import { isFabricEnabled } from '../utils/environment';
+import { ReactNativeLibraries } from './../utils/rnlibraries';
+
+/**
+ * Modal is not supported in React Native < 0.71 with Fabric renderer.
+ * ref: https://github.com/facebook/react-native/issues/33652
+ */
+export function isModalSupported(): boolean {
+  const rnVersion = ReactNativeLibraries.ReactNativeVersion?.version;
+  if (isFabricEnabled() && rnVersion && rnVersion.major === 0 && rnVersion.minor < 71) {
+    return false;
+  }
+  return true;
+}
+
 export const isValidEmail = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(email);

From 587c3fc26080e50781d7b5af59d334acce396e78 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 11:25:01 +0200
Subject: [PATCH 08/18] Add changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7095dc52fc..300f993cbc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@
 - Send Sentry react-native SDK version in the session replay event (#4450)
 - User Feedback Form Component Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435))
 
-  To collect user feedback from inside your application add the `FeedbackForm` component.
+  To collect user feedback from inside your application call `Sentry.showFeedbackForm()` or add the `FeedbackForm` component.
 
   ```jsx
   import { FeedbackForm } from "@sentry/react-native";

From f4df57c2c52ac2c6709863ad4fab39e0fecaec44 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 13:46:58 +0200
Subject: [PATCH 09/18] Adds tests

---
 .../src/js/feedback/FeedbackFormManager.tsx   |  2 +-
 .../feedback/FeedbackFormManager.test.tsx     | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/test/feedback/FeedbackFormManager.test.tsx

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index d0ac108b43..e69ac11e6c 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -68,7 +68,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
         {this.props.children}
         {isVisible && (
           <View>
-            <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose}>
+            <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
               <View style={styles.modalBackground}>
                 <FeedbackForm
                   onFormClose={this._handleClose}
diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackFormManager.test.tsx
new file mode 100644
index 0000000000..d01db0691b
--- /dev/null
+++ b/packages/core/test/feedback/FeedbackFormManager.test.tsx
@@ -0,0 +1,53 @@
+import { logger } from '@sentry/core';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import { FeedbackFormProvider, showFeedbackForm } from '../../src/js/feedback/FeedbackFormManager';
+
+jest.mock('../../src/js/feedback/utils', () => ({
+  isModalSupported: jest.fn(),
+}));
+
+beforeEach(() => {
+  logger.error = jest.fn();
+});
+
+describe('FeedbackFormManager', () => {
+  it('showFeedbackForm displays the form when FeedbackFormProvider is used', () => {
+    require('../../src/js/feedback/utils').isModalSupported.mockReturnValue(true);
+    const { getByText, getByTestId } = render(
+      <FeedbackFormProvider>
+        <Text>App Components</Text>
+      </FeedbackFormProvider>
+    );
+
+    showFeedbackForm();
+
+    expect(getByTestId('feedback-form-modal')).toBeTruthy();
+    expect(getByText('App Components')).toBeTruthy();
+  });
+
+  it('showFeedbackForm does not display the form when Modal is not available', () => {
+    require('../../src/js/feedback/utils').isModalSupported.mockReturnValue(false);
+    const { getByText, queryByTestId } = render(
+      <FeedbackFormProvider>
+        <Text>App Components</Text>
+      </FeedbackFormProvider>
+    );
+
+    showFeedbackForm();
+
+    expect(queryByTestId('feedback-form-modal')).toBeNull();
+    expect(getByText('App Components')).toBeTruthy();
+    expect(logger.error).toHaveBeenLastCalledWith(
+      'FeedbackForm Modal is not supported in React Native < 0.71 with Fabric renderer.',
+    );
+  });
+
+  it('showFeedbackForm does not throw an error when FeedbackFormProvider is not used', () => {
+    expect(() => {
+      showFeedbackForm();
+    }).not.toThrow();
+  });
+});

From 0d466d24de8ea65a5640e6ed2f6811d706b91775 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 15:16:47 +0200
Subject: [PATCH 10/18] Get major, minor version with deconstruct declaration

Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com>
---
 packages/core/src/js/feedback/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index 31dd0de94d..6d1ffad45e 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -6,7 +6,7 @@ import { ReactNativeLibraries } from './../utils/rnlibraries';
  * ref: https://github.com/facebook/react-native/issues/33652
  */
 export function isModalSupported(): boolean {
-  const rnVersion = ReactNativeLibraries.ReactNativeVersion?.version;
+  const { major, minor } = ReactNativeLibraries.ReactNativeVersion?.version || {};
   if (isFabricEnabled() && rnVersion && rnVersion.major === 0 && rnVersion.minor < 71) {
     return false;
   }

From caa075be72d1a61f915a1a09116135bbcd8cc132 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 15:17:08 +0200
Subject: [PATCH 11/18] Remove if condition

Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com>
---
 packages/core/src/js/feedback/utils.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index 6d1ffad45e..9480eab321 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -7,10 +7,8 @@ import { ReactNativeLibraries } from './../utils/rnlibraries';
  */
 export function isModalSupported(): boolean {
   const { major, minor } = ReactNativeLibraries.ReactNativeVersion?.version || {};
-  if (isFabricEnabled() && rnVersion && rnVersion.major === 0 && rnVersion.minor < 71) {
-    return false;
-  }
-  return true;
+  return !(isFabricEnabled() && major === 0 && minor < 71);
+
 }
 
 export const isValidEmail = (email: string): boolean => {

From 8071e8d3954459cf311f77e4570292a7fc54f08c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 15:21:38 +0200
Subject: [PATCH 12/18] Prettier

---
 packages/core/src/js/feedback/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/js/feedback/utils.ts b/packages/core/src/js/feedback/utils.ts
index 9480eab321..b27fb3ea8d 100644
--- a/packages/core/src/js/feedback/utils.ts
+++ b/packages/core/src/js/feedback/utils.ts
@@ -8,7 +8,6 @@ import { ReactNativeLibraries } from './../utils/rnlibraries';
 export function isModalSupported(): boolean {
   const { major, minor } = ReactNativeLibraries.ReactNativeVersion?.version || {};
   return !(isFabricEnabled() && major === 0 && minor < 71);
-
 }
 
 export const isValidEmail = (email: string): boolean => {

From caa1237cf33f36e04f0b0d203855d2577009ef95 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 16:57:54 +0200
Subject: [PATCH 13/18] Adds feedbackIntegration for configuring the feedback
 form

---
 .../src/js/feedback/FeedbackFormManager.tsx   |  3 +-
 packages/core/src/js/feedback/integration.ts  | 31 +++++++++++++++++++
 packages/core/src/js/integrations/exports.ts  |  1 +
 samples/react-native/src/App.tsx              | 12 +++++++
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/js/feedback/integration.ts

diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx
index e69ac11e6c..4676f90258 100644
--- a/packages/core/src/js/feedback/FeedbackFormManager.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx
@@ -5,6 +5,7 @@ import { Modal, View } from 'react-native';
 import { FeedbackForm } from './FeedbackForm';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormStyles } from './FeedbackForm.types';
+import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
 
 class FeedbackFormManager {
@@ -70,7 +71,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
           <View>
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
               <View style={styles.modalBackground}>
-                <FeedbackForm
+                <FeedbackForm {...getFeedbackOptions()}
                   onFormClose={this._handleClose}
                   onFormSubmitted={this._handleClose}
                 />
diff --git a/packages/core/src/js/feedback/integration.ts b/packages/core/src/js/feedback/integration.ts
new file mode 100644
index 0000000000..33fd8d146d
--- /dev/null
+++ b/packages/core/src/js/feedback/integration.ts
@@ -0,0 +1,31 @@
+import type { Integration } from '@sentry/core';
+
+import { defaultConfiguration } from './defaults';
+import defaultStyles from './FeedbackForm.styles';
+import type { FeedbackFormProps } from './FeedbackForm.types';
+
+export const FEEDBACK_FORM_INTEGRATION_NAME = 'Feedback Form';
+
+type FeedbackIntegration = Integration & {
+  options: Partial<FeedbackFormProps>;
+};
+
+let savedOptions: Partial<FeedbackFormProps> = {};
+
+export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): FeedbackIntegration => {
+  savedOptions = {
+    ...defaultConfiguration,
+    ...initOptions,
+    styles: {
+      ...defaultStyles,
+      ...initOptions.styles,
+    },
+  };
+
+  return {
+    name: FEEDBACK_FORM_INTEGRATION_NAME,
+    options: savedOptions,
+  };
+};
+
+export const getFeedbackOptions = (): Partial<FeedbackFormProps> => savedOptions;
diff --git a/packages/core/src/js/integrations/exports.ts b/packages/core/src/js/integrations/exports.ts
index dfc9e2c3e1..f5fabb397e 100644
--- a/packages/core/src/js/integrations/exports.ts
+++ b/packages/core/src/js/integrations/exports.ts
@@ -13,6 +13,7 @@ export { viewHierarchyIntegration } from './viewhierarchy';
 export { expoContextIntegration } from './expocontext';
 export { spotlightIntegration } from './spotlight';
 export { mobileReplayIntegration } from '../replay/mobilereplay';
+export { feedbackIntegration } from '../feedback/integration';
 export { browserReplayIntegration } from '../replay/browserReplay';
 export { appStartIntegration } from '../tracing/integrations/appStart';
 export { nativeFramesIntegration, createNativeFramesIntegrations } from '../tracing/integrations/nativeFrames';
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 2df2079c0b..a9e36e7fd5 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -106,6 +106,18 @@ Sentry.init({
           ? false
           : true,
       }),
+      Sentry.feedbackIntegration({
+        styles:{
+          submitButton: {
+            backgroundColor: '#6a1b9a',
+            paddingVertical: 15,
+            borderRadius: 5,
+            alignItems: 'center',
+            marginBottom: 10,
+          },
+        },
+        namePlaceholder: 'Fullname',
+      }),
     );
     return integrations.filter(i => i.name !== 'Dedupe');
   },

From a5a3fb486adf829dc2c80164ae37cc94017942d9 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 27 Jan 2025 17:32:59 +0200
Subject: [PATCH 14/18] Adds test

---
 .../feedback/FeedbackFormManager.test.tsx     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackFormManager.test.tsx
index d01db0691b..a500b17343 100644
--- a/packages/core/test/feedback/FeedbackFormManager.test.tsx
+++ b/packages/core/test/feedback/FeedbackFormManager.test.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Text } from 'react-native';
 
 import { FeedbackFormProvider, showFeedbackForm } from '../../src/js/feedback/FeedbackFormManager';
+import { feedbackIntegration } from '../../src/js/feedback/integration';
 
 jest.mock('../../src/js/feedback/utils', () => ({
   isModalSupported: jest.fn(),
@@ -50,4 +51,23 @@ describe('FeedbackFormManager', () => {
       showFeedbackForm();
     }).not.toThrow();
   });
+
+  it('showFeedbackForm displays the form with the feedbackIntegration options', () => {
+    require('../../src/js/feedback/utils').isModalSupported.mockReturnValue(true);
+    const { getByPlaceholderText, getByText } = render(
+      <FeedbackFormProvider>
+        <Text>App Components</Text>
+      </FeedbackFormProvider>
+    );
+
+    feedbackIntegration({
+      messagePlaceholder: 'Custom Message Placeholder',
+      submitButtonLabel: 'Custom Submit Button',
+    });
+
+    showFeedbackForm();
+
+    expect(getByPlaceholderText('Custom Message Placeholder')).toBeTruthy();
+    expect(getByText('Custom Submit Button')).toBeTruthy();
+  });
 });

From d8ab9146f4fc130dd1a5b5c1c46af6fc8b98a831 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 29 Jan 2025 09:29:38 +0200
Subject: [PATCH 15/18] Fix test import

---
 packages/core/test/feedback/FeedbackFormManager.test.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackFormManager.test.tsx
index d01db0691b..7c93b9eb5a 100644
--- a/packages/core/test/feedback/FeedbackFormManager.test.tsx
+++ b/packages/core/test/feedback/FeedbackFormManager.test.tsx
@@ -4,18 +4,21 @@ import * as React from 'react';
 import { Text } from 'react-native';
 
 import { FeedbackFormProvider, showFeedbackForm } from '../../src/js/feedback/FeedbackFormManager';
+import { isModalSupported } from '../../src/js/feedback/utils';
 
 jest.mock('../../src/js/feedback/utils', () => ({
   isModalSupported: jest.fn(),
 }));
 
+const mockedIsModalSupported = isModalSupported as jest.MockedFunction<typeof isModalSupported>;
+
 beforeEach(() => {
   logger.error = jest.fn();
 });
 
 describe('FeedbackFormManager', () => {
   it('showFeedbackForm displays the form when FeedbackFormProvider is used', () => {
-    require('../../src/js/feedback/utils').isModalSupported.mockReturnValue(true);
+    mockedIsModalSupported.mockReturnValue(true);
     const { getByText, getByTestId } = render(
       <FeedbackFormProvider>
         <Text>App Components</Text>
@@ -29,7 +32,7 @@ describe('FeedbackFormManager', () => {
   });
 
   it('showFeedbackForm does not display the form when Modal is not available', () => {
-    require('../../src/js/feedback/utils').isModalSupported.mockReturnValue(false);
+    mockedIsModalSupported.mockReturnValue(false);
     const { getByText, queryByTestId } = render(
       <FeedbackFormProvider>
         <Text>App Components</Text>

From 016f77aebd59ee604624d059fd5292e68ef1779d Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 29 Jan 2025 09:34:05 +0200
Subject: [PATCH 16/18] Update integration name to match existing convention

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
---
 packages/core/src/js/feedback/integration.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/integration.ts b/packages/core/src/js/feedback/integration.ts
index 33fd8d146d..0c8acf48c9 100644
--- a/packages/core/src/js/feedback/integration.ts
+++ b/packages/core/src/js/feedback/integration.ts
@@ -4,7 +4,7 @@ import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps } from './FeedbackForm.types';
 
-export const FEEDBACK_FORM_INTEGRATION_NAME = 'Feedback Form';
+export const FEEDBACK_FORM_INTEGRATION_NAME = 'MobileFeedback';
 
 type FeedbackIntegration = Integration & {
   options: Partial<FeedbackFormProps>;

From cbb1fd198864d777027efca9d8c9d87e4163dacc Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 29 Jan 2025 18:44:33 +0200
Subject: [PATCH 17/18] Simplify the integration by directly saving the passed
 options

---
 packages/core/src/js/feedback/integration.ts  | 11 +---------
 .../feedback/FeedbackFormManager.test.tsx     | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/js/feedback/integration.ts b/packages/core/src/js/feedback/integration.ts
index 0c8acf48c9..31fb463971 100644
--- a/packages/core/src/js/feedback/integration.ts
+++ b/packages/core/src/js/feedback/integration.ts
@@ -1,7 +1,5 @@
 import type { Integration } from '@sentry/core';
 
-import { defaultConfiguration } from './defaults';
-import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps } from './FeedbackForm.types';
 
 export const FEEDBACK_FORM_INTEGRATION_NAME = 'MobileFeedback';
@@ -13,14 +11,7 @@ type FeedbackIntegration = Integration & {
 let savedOptions: Partial<FeedbackFormProps> = {};
 
 export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): FeedbackIntegration => {
-  savedOptions = {
-    ...defaultConfiguration,
-    ...initOptions,
-    styles: {
-      ...defaultStyles,
-      ...initOptions.styles,
-    },
-  };
+  savedOptions = initOptions;
 
   return {
     name: FEEDBACK_FORM_INTEGRATION_NAME,
diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackFormManager.test.tsx
index f2bd47da0c..426381a83c 100644
--- a/packages/core/test/feedback/FeedbackFormManager.test.tsx
+++ b/packages/core/test/feedback/FeedbackFormManager.test.tsx
@@ -3,6 +3,7 @@ import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import { Text } from 'react-native';
 
+import { defaultConfiguration } from '../../src/js/feedback/defaults';
 import { FeedbackFormProvider, showFeedbackForm } from '../../src/js/feedback/FeedbackFormManager';
 import { feedbackIntegration } from '../../src/js/feedback/integration';
 import { isModalSupported } from '../../src/js/feedback/utils';
@@ -73,4 +74,23 @@ describe('FeedbackFormManager', () => {
     expect(getByPlaceholderText('Custom Message Placeholder')).toBeTruthy();
     expect(getByText('Custom Submit Button')).toBeTruthy();
   });
+
+  it('showFeedbackForm displays the form with the feedbackIntegration options merged with the defaults', () => {
+    mockedIsModalSupported.mockReturnValue(true);
+    const { getByPlaceholderText, getByText } = render(
+      <FeedbackFormProvider>
+        <Text>App Components</Text>
+      </FeedbackFormProvider>
+    );
+
+    feedbackIntegration({
+      submitButtonLabel: 'Custom Submit Button',
+    }),
+
+    showFeedbackForm();
+
+    expect(getByText(defaultConfiguration.submitButtonLabel)).toBeFalsy(); // overridden value
+    expect(getByText('Custom Submit Button')).toBeTruthy(); // overridden value
+    expect(getByPlaceholderText(defaultConfiguration.messagePlaceholder)).toBeTruthy(); // default configuration value
+  });
 });

From 8b813557356b68a2fb6030ac2485377254cc2c3d Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 29 Jan 2025 18:49:41 +0200
Subject: [PATCH 18/18] Fixes broken test

---
 packages/core/test/feedback/FeedbackFormManager.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackFormManager.test.tsx
index 426381a83c..9fe53af4c6 100644
--- a/packages/core/test/feedback/FeedbackFormManager.test.tsx
+++ b/packages/core/test/feedback/FeedbackFormManager.test.tsx
@@ -77,7 +77,7 @@ describe('FeedbackFormManager', () => {
 
   it('showFeedbackForm displays the form with the feedbackIntegration options merged with the defaults', () => {
     mockedIsModalSupported.mockReturnValue(true);
-    const { getByPlaceholderText, getByText } = render(
+    const { getByPlaceholderText, getByText, queryByText } = render(
       <FeedbackFormProvider>
         <Text>App Components</Text>
       </FeedbackFormProvider>
@@ -89,7 +89,7 @@ describe('FeedbackFormManager', () => {
 
     showFeedbackForm();
 
-    expect(getByText(defaultConfiguration.submitButtonLabel)).toBeFalsy(); // overridden value
+    expect(queryByText(defaultConfiguration.submitButtonLabel)).toBeFalsy(); // overridden value
     expect(getByText('Custom Submit Button')).toBeTruthy(); // overridden value
     expect(getByPlaceholderText(defaultConfiguration.messagePlaceholder)).toBeTruthy(); // default configuration value
   });