From 817eac82107f668f71ab51e8d071ca62c472e62d Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 27 Nov 2024 14:00:17 +0200
Subject: [PATCH 01/68] Update the client implementation to use the new capture
 feedback js api

---
 packages/core/src/js/client.ts    | 16 +++-----
 packages/core/test/client.test.ts | 64 ++++++++++++++-----------------
 packages/core/test/testutils.ts   |  9 +----
 3 files changed, 34 insertions(+), 55 deletions(-)

diff --git a/packages/core/src/js/client.ts b/packages/core/src/js/client.ts
index b9fe2ad27d..d2f7b1ab71 100644
--- a/packages/core/src/js/client.ts
+++ b/packages/core/src/js/client.ts
@@ -1,4 +1,4 @@
-import { eventFromException, eventFromMessage } from '@sentry/browser';
+import { captureFeedback as captureFeedbackApi, eventFromException, eventFromMessage } from '@sentry/browser';
 import { BaseClient } from '@sentry/core';
 import type {
   ClientReportEnvelope,
@@ -7,9 +7,9 @@ import type {
   Event,
   EventHint,
   Outcome,
+  SendFeedbackParams,
   SeverityLevel,
   TransportMakeRequestResponse,
-  UserFeedback,
 } from '@sentry/types';
 import { dateTimestampInSeconds, logger, SentryError } from '@sentry/utils';
 import { Alert } from 'react-native';
@@ -20,7 +20,7 @@ import { getDefaultSidecarUrl } from './integrations/spotlight';
 import type { ReactNativeClientOptions } from './options';
 import type { mobileReplayIntegration } from './replay/mobilereplay';
 import { MOBILE_REPLAY_INTEGRATION_NAME } from './replay/mobilereplay';
-import { createUserFeedbackEnvelope, items } from './utils/envelope';
+import { items } from './utils/envelope';
 import { ignoreRequireCycleLogs } from './utils/ignorerequirecyclelogs';
 import { mergeOutcomes } from './utils/outcome';
 import { ReactNativeLibraries } from './utils/rnlibraries';
@@ -86,14 +86,8 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
   /**
    * Sends user feedback to Sentry.
    */
-  public captureUserFeedback(feedback: UserFeedback): void {
-    const envelope = createUserFeedbackEnvelope(feedback, {
-      metadata: this._options._metadata,
-      dsn: this.getDsn(),
-      tunnel: undefined,
-    });
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.sendEnvelope(envelope);
+  public captureFeedback(feedback: SendFeedbackParams): void {
+    captureFeedbackApi(feedback);
   }
 
   /**
diff --git a/packages/core/test/client.test.ts b/packages/core/test/client.test.ts
index a0e5b13201..9d4a430089 100644
--- a/packages/core/test/client.test.ts
+++ b/packages/core/test/client.test.ts
@@ -1,8 +1,15 @@
 import * as mockedtimetodisplaynative from './tracing/mockedtimetodisplaynative';
 jest.mock('../src/js/tracing/timetodisplaynative', () => mockedtimetodisplaynative);
 
-import { defaultStackParser } from '@sentry/browser';
-import type { Envelope, Event, Outcome, Transport, TransportMakeRequestResponse } from '@sentry/types';
+import { captureFeedback as captureFeedbackApi, defaultStackParser } from '@sentry/browser';
+import type {
+  Envelope,
+  Event,
+  Outcome,
+  SendFeedbackParams,
+  Transport,
+  TransportMakeRequestResponse,
+} from '@sentry/types';
 import { rejectedSyncPromise, SentryError } from '@sentry/utils';
 import * as RN from 'react-native';
 
@@ -19,7 +26,6 @@ import {
   envelopeItems,
   firstArg,
   getMockSession,
-  getMockUserFeedback,
   getSyncPromiseRejectOnFirstCall,
 } from './testutils';
 
@@ -76,6 +82,14 @@ jest.mock(
   }),
 );
 
+jest.mock('@sentry/browser', () => {
+  const actual = jest.requireActual('@sentry/browser');
+  return {
+    ...actual,
+    captureFeedback: jest.fn(),
+  };
+});
+
 const EXAMPLE_DSN = 'https://6890c2f6677340daa4804f8194804ea2@o19635.ingest.sentry.io/148053';
 
 const DEFAULT_OPTIONS: ReactNativeClientOptions = {
@@ -187,15 +201,6 @@ describe('Tests ReactNativeClient', () => {
       expect(mockTransport.send).not.toBeCalled();
     });
 
-    test('captureUserFeedback does not call transport when enabled false', () => {
-      const mockTransport = createMockTransport();
-      const client = createDisabledClientWith(mockTransport);
-
-      client.captureUserFeedback(getMockUserFeedback());
-
-      expect(mockTransport.send).not.toBeCalled();
-    });
-
     function createDisabledClientWith(transport: Transport) {
       return new ReactNativeClient({
         ...DEFAULT_OPTIONS,
@@ -290,34 +295,26 @@ describe('Tests ReactNativeClient', () => {
   });
 
   describe('UserFeedback', () => {
-    test('sends UserFeedback to native Layer', () => {
+    test('sends UserFeedback', () => {
       const mockTransportSend: jest.Mock = jest.fn(() => Promise.resolve());
       const client = new ReactNativeClient({
         ...DEFAULT_OPTIONS,
         dsn: EXAMPLE_DSN,
-        transport: () => ({
-          send: mockTransportSend,
-          flush: jest.fn(),
-        }),
       });
+      jest.mock('@sentry/browser', () => ({
+        captureFeedback: jest.fn(),
+      }));
 
-      client.captureUserFeedback({
-        comments: 'Test Comments',
+      const feedback: SendFeedbackParams = {
+        message: 'Test Comments',
         email: 'test@email.com',
         name: 'Test User',
-        event_id: 'testEvent123',
-      });
+        associatedEventId: 'testEvent123',
+      };
 
-      expect(mockTransportSend.mock.calls[0][firstArg][envelopeHeader].event_id).toEqual('testEvent123');
-      expect(mockTransportSend.mock.calls[0][firstArg][envelopeItems][0][envelopeItemHeader].type).toEqual(
-        'user_report',
-      );
-      expect(mockTransportSend.mock.calls[0][firstArg][envelopeItems][0][envelopeItemPayload]).toEqual({
-        comments: 'Test Comments',
-        email: 'test@email.com',
-        name: 'Test User',
-        event_id: 'testEvent123',
-      });
+      client.captureFeedback(feedback);
+
+      expect(captureFeedbackApi).toHaveBeenCalledWith(feedback);
     });
   });
 
@@ -417,11 +414,6 @@ describe('Tests ReactNativeClient', () => {
       client.captureSession(getMockSession());
       expect(getSdkInfoFrom(mockTransportSend)).toStrictEqual(expectedSdkInfo);
     });
-
-    test('send SdkInfo in the user feedback envelope header', () => {
-      client.captureUserFeedback(getMockUserFeedback());
-      expect(getSdkInfoFrom(mockTransportSend)).toStrictEqual(expectedSdkInfo);
-    });
   });
 
   describe('event data enhancement', () => {
diff --git a/packages/core/test/testutils.ts b/packages/core/test/testutils.ts
index 4548eef092..593a51f838 100644
--- a/packages/core/test/testutils.ts
+++ b/packages/core/test/testutils.ts
@@ -1,4 +1,4 @@
-import type { Session, Transport, UserFeedback } from '@sentry/types';
+import type { Session, Transport } from '@sentry/types';
 import { rejectedSyncPromise } from '@sentry/utils';
 
 export type MockInterface<T> = {
@@ -36,13 +36,6 @@ export const getMockSession = (): Session => ({
   }),
 });
 
-export const getMockUserFeedback = (): UserFeedback => ({
-  comments: 'comments_test_value',
-  email: 'email_test_value',
-  name: 'name_test_value',
-  event_id: 'event_id_test_value',
-});
-
 export const getSyncPromiseRejectOnFirstCall = <Y extends any[]>(reason: unknown): jest.Mock => {
   let shouldSyncReject = true;
   return jest.fn((..._args: Y) => {

From 5370a990006b5d53b738ebc250c7e240a7bffa36 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 27 Nov 2024 14:00:54 +0200
Subject: [PATCH 02/68] Updates SDK API

---
 packages/core/src/js/index.ts | 13 ++++++++++++-
 packages/core/src/js/sdk.tsx  | 18 ++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts
index f62a8624eb..079ec253d4 100644
--- a/packages/core/src/js/index.ts
+++ b/packages/core/src/js/index.ts
@@ -4,6 +4,7 @@ export type {
   SdkInfo,
   Event,
   Exception,
+  SendFeedbackParams,
   SeverityLevel,
   StackFrame,
   Stacktrace,
@@ -59,7 +60,17 @@ export { SDK_NAME, SDK_VERSION } from './version';
 export type { ReactNativeOptions } from './options';
 export { ReactNativeClient } from './client';
 
-export { init, wrap, nativeCrash, flush, close, captureUserFeedback, withScope, crashedLastRun } from './sdk';
+export {
+  init,
+  wrap,
+  nativeCrash,
+  flush,
+  close,
+  captureFeedback,
+  captureUserFeedback,
+  withScope,
+  crashedLastRun,
+} from './sdk';
 export { TouchEventBoundary, withTouchEventBoundary } from './touchevents';
 
 export {
diff --git a/packages/core/src/js/sdk.tsx b/packages/core/src/js/sdk.tsx
index 039b44850d..f17a6ef058 100644
--- a/packages/core/src/js/sdk.tsx
+++ b/packages/core/src/js/sdk.tsx
@@ -4,7 +4,7 @@ import {
   defaultStackParser,
   makeFetchTransport,
 } from '@sentry/react';
-import type { Breadcrumb, BreadcrumbHint, Integration, Scope, UserFeedback } from '@sentry/types';
+import type { Breadcrumb, BreadcrumbHint, Integration, Scope, SendFeedbackParams, UserFeedback } from '@sentry/types';
 import { logger, stackParserFromStackParserOptions } from '@sentry/utils';
 import * as React from 'react';
 
@@ -219,9 +219,23 @@ export async function close(): Promise<void> {
 
 /**
  * Captures user feedback and sends it to Sentry.
+ * @deprecated Use `Sentry.captureFeedback` instead.
  */
 export function captureUserFeedback(feedback: UserFeedback): void {
-  getClient<ReactNativeClient>()?.captureUserFeedback(feedback);
+  const feedbackParams = {
+    name: feedback.name,
+    email: feedback.email,
+    message: feedback.comments,
+    associatedEventId: feedback.event_id,
+  };
+  captureFeedback(feedbackParams);
+}
+
+/**
+ * Captures user feedback and sends it to Sentry.
+ */
+export function captureFeedback(feedbackParams: SendFeedbackParams): void {
+  getClient<ReactNativeClient>()?.captureFeedback(feedbackParams);
 }
 
 /**

From 42e2fa14823f067a6b4088770f5ff0aea9a22b69 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 27 Nov 2024 14:01:18 +0200
Subject: [PATCH 03/68] Adds new feedback button in the sample

---
 .../src/components/UserFeedbackModal.tsx      | 19 ++++++++++++++++++-
 .../src/components/UserFeedbackModal.tsx      | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/samples/react-native-macos/src/components/UserFeedbackModal.tsx b/samples/react-native-macos/src/components/UserFeedbackModal.tsx
index 60e17af757..1f8dd6a4a3 100644
--- a/samples/react-native-macos/src/components/UserFeedbackModal.tsx
+++ b/samples/react-native-macos/src/components/UserFeedbackModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, Text, TextInput, Image, Button } from 'react-native';
 import * as Sentry from '@sentry/react-native';
-import { UserFeedback } from '@sentry/react-native';
+import { SendFeedbackParams, UserFeedback } from '@sentry/react-native';
 
 export const DEFAULT_COMMENTS = "It's broken again! Please fix it.";
 
@@ -48,6 +48,23 @@ export function UserFeedbackModal(props: { onDismiss: () => void }) {
             }}
           />
           <View style={styles.buttonSpacer} />
+          <Button
+            title="Send feedback without event"
+            color="#6C5FC7"
+            onPress={async () => {
+              onDismiss();
+
+              const userFeedback: SendFeedbackParams = {
+                message: comments,
+                name: 'John Doe',
+                email: 'john@doe.com',
+              };
+
+              Sentry.captureFeedback(userFeedback);
+              clearComments();
+            }}
+          />
+          <View style={styles.buttonSpacer} />
           <Button
             title="Close"
             color="#6C5FC7"
diff --git a/samples/react-native/src/components/UserFeedbackModal.tsx b/samples/react-native/src/components/UserFeedbackModal.tsx
index 60e17af757..1f8dd6a4a3 100644
--- a/samples/react-native/src/components/UserFeedbackModal.tsx
+++ b/samples/react-native/src/components/UserFeedbackModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, Text, TextInput, Image, Button } from 'react-native';
 import * as Sentry from '@sentry/react-native';
-import { UserFeedback } from '@sentry/react-native';
+import { SendFeedbackParams, UserFeedback } from '@sentry/react-native';
 
 export const DEFAULT_COMMENTS = "It's broken again! Please fix it.";
 
@@ -48,6 +48,23 @@ export function UserFeedbackModal(props: { onDismiss: () => void }) {
             }}
           />
           <View style={styles.buttonSpacer} />
+          <Button
+            title="Send feedback without event"
+            color="#6C5FC7"
+            onPress={async () => {
+              onDismiss();
+
+              const userFeedback: SendFeedbackParams = {
+                message: comments,
+                name: 'John Doe',
+                email: 'john@doe.com',
+              };
+
+              Sentry.captureFeedback(userFeedback);
+              clearComments();
+            }}
+          />
+          <View style={styles.buttonSpacer} />
           <Button
             title="Close"
             color="#6C5FC7"

From 514b102ba091403966c44db4a08146684278422f Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 27 Nov 2024 14:12:21 +0200
Subject: [PATCH 04/68] Adds changelog

---
 CHANGELOG.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9ce7b8f1a..65ea93baf8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,26 @@
 
 ## Unreleased
 
+### Features
+
+- Adds new `captureFeedback` and deprecates the `captureUserFeedback` API ([#4320](https://github.com/getsentry/sentry-react-native/pull/4320))
+
+  ```jsx
+  import * as Sentry from "@sentry/react-native";
+  import { SendFeedbackParams } from "@sentry/react-native";
+
+  const eventId = Sentry.captureMessage("My Message");
+  // OR: const eventId = Sentry.lastEventId();
+
+  const userFeedback: SendFeedbackParams = {
+    name: "John Doe",
+    email: "john@doe.com",
+    message: "Hello World!",
+    associatedEventId: eventId,// Optional
+  };
+  Sentry.captureFeedback(userFeedback);
+  ```
+
 ### Fixes
 
 - Return `lastEventId` export from `@sentry/core` ([#4315](https://github.com/getsentry/sentry-react-native/pull/4315))

From 0935bbdca47ad0afcc19e7260afc1f4b33d5fefe Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 27 Nov 2024 14:17:08 +0200
Subject: [PATCH 05/68] Removes unused mock

---
 packages/core/test/client.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/test/client.test.ts b/packages/core/test/client.test.ts
index 9d4a430089..879f0fb4ce 100644
--- a/packages/core/test/client.test.ts
+++ b/packages/core/test/client.test.ts
@@ -296,7 +296,6 @@ describe('Tests ReactNativeClient', () => {
 
   describe('UserFeedback', () => {
     test('sends UserFeedback', () => {
-      const mockTransportSend: jest.Mock = jest.fn(() => Promise.resolve());
       const client = new ReactNativeClient({
         ...DEFAULT_OPTIONS,
         dsn: EXAMPLE_DSN,

From 9ea5496ccffe8408a52c966e2601322fc014b12c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 13:42:48 +0200
Subject: [PATCH 06/68] Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
---
 CHANGELOG.md | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65ea93baf8..0f4cfc6fc5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,20 +12,18 @@
 
 - Adds new `captureFeedback` and deprecates the `captureUserFeedback` API ([#4320](https://github.com/getsentry/sentry-react-native/pull/4320))
 
+
   ```jsx
   import * as Sentry from "@sentry/react-native";
-  import { SendFeedbackParams } from "@sentry/react-native";
 
-  const eventId = Sentry.captureMessage("My Message");
-  // OR: const eventId = Sentry.lastEventId();
+  const eventId = Sentry.lastEventId();
 
-  const userFeedback: SendFeedbackParams = {
+  Sentry.captureFeedback({
     name: "John Doe",
     email: "john@doe.com",
     message: "Hello World!",
-    associatedEventId: eventId,// Optional
-  };
-  Sentry.captureFeedback(userFeedback);
+    associatedEventId: eventId, // optional
+  });
   ```
 
 ### Fixes

From da0d4ac091e20b0232f841ff9a5597597e47070c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 15:41:33 +0200
Subject: [PATCH 07/68] Directly use captureFeedback from sentry/core

---
 packages/core/src/js/client.ts    |  8 ------
 packages/core/src/js/index.ts     | 13 ++--------
 packages/core/src/js/sdk.tsx      | 11 ++------
 packages/core/test/client.test.ts | 42 ++-----------------------------
 4 files changed, 6 insertions(+), 68 deletions(-)

diff --git a/packages/core/src/js/client.ts b/packages/core/src/js/client.ts
index d2f7b1ab71..5708b52f3a 100644
--- a/packages/core/src/js/client.ts
+++ b/packages/core/src/js/client.ts
@@ -7,7 +7,6 @@ import type {
   Event,
   EventHint,
   Outcome,
-  SendFeedbackParams,
   SeverityLevel,
   TransportMakeRequestResponse,
 } from '@sentry/types';
@@ -83,13 +82,6 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
     });
   }
 
-  /**
-   * Sends user feedback to Sentry.
-   */
-  public captureFeedback(feedback: SendFeedbackParams): void {
-    captureFeedbackApi(feedback);
-  }
-
   /**
    * @inheritdoc
    */
diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts
index 079ec253d4..4aa7e2fa21 100644
--- a/packages/core/src/js/index.ts
+++ b/packages/core/src/js/index.ts
@@ -17,6 +17,7 @@ export {
   addBreadcrumb,
   captureException,
   captureEvent,
+  captureFeedback,
   captureMessage,
   Scope,
   setContext,
@@ -60,17 +61,7 @@ export { SDK_NAME, SDK_VERSION } from './version';
 export type { ReactNativeOptions } from './options';
 export { ReactNativeClient } from './client';
 
-export {
-  init,
-  wrap,
-  nativeCrash,
-  flush,
-  close,
-  captureFeedback,
-  captureUserFeedback,
-  withScope,
-  crashedLastRun,
-} from './sdk';
+export { init, wrap, nativeCrash, flush, close, captureUserFeedback, withScope, crashedLastRun } from './sdk';
 export { TouchEventBoundary, withTouchEventBoundary } from './touchevents';
 
 export {
diff --git a/packages/core/src/js/sdk.tsx b/packages/core/src/js/sdk.tsx
index f17a6ef058..448ce99148 100644
--- a/packages/core/src/js/sdk.tsx
+++ b/packages/core/src/js/sdk.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable complexity */
-import { getClient, getGlobalScope,getIntegrationsToSetup, getIsolationScope,initAndBind, withScope as coreWithScope } from '@sentry/core';
+import { captureFeedback, getClient, getGlobalScope,getIntegrationsToSetup, getIsolationScope,initAndBind, withScope as coreWithScope } from '@sentry/core';
 import {
   defaultStackParser,
   makeFetchTransport,
@@ -222,7 +222,7 @@ export async function close(): Promise<void> {
  * @deprecated Use `Sentry.captureFeedback` instead.
  */
 export function captureUserFeedback(feedback: UserFeedback): void {
-  const feedbackParams = {
+  const feedbackParams: SendFeedbackParams = {
     name: feedback.name,
     email: feedback.email,
     message: feedback.comments,
@@ -231,13 +231,6 @@ export function captureUserFeedback(feedback: UserFeedback): void {
   captureFeedback(feedbackParams);
 }
 
-/**
- * Captures user feedback and sends it to Sentry.
- */
-export function captureFeedback(feedbackParams: SendFeedbackParams): void {
-  getClient<ReactNativeClient>()?.captureFeedback(feedbackParams);
-}
-
 /**
  * Creates a new scope with and executes the given operation within.
  * The scope is automatically removed once the operation
diff --git a/packages/core/test/client.test.ts b/packages/core/test/client.test.ts
index 879f0fb4ce..3d732e194c 100644
--- a/packages/core/test/client.test.ts
+++ b/packages/core/test/client.test.ts
@@ -1,15 +1,8 @@
 import * as mockedtimetodisplaynative from './tracing/mockedtimetodisplaynative';
 jest.mock('../src/js/tracing/timetodisplaynative', () => mockedtimetodisplaynative);
 
-import { captureFeedback as captureFeedbackApi, defaultStackParser } from '@sentry/browser';
-import type {
-  Envelope,
-  Event,
-  Outcome,
-  SendFeedbackParams,
-  Transport,
-  TransportMakeRequestResponse,
-} from '@sentry/types';
+import { defaultStackParser } from '@sentry/browser';
+import type { Envelope, Event, Outcome, Transport, TransportMakeRequestResponse } from '@sentry/types';
 import { rejectedSyncPromise, SentryError } from '@sentry/utils';
 import * as RN from 'react-native';
 
@@ -82,14 +75,6 @@ jest.mock(
   }),
 );
 
-jest.mock('@sentry/browser', () => {
-  const actual = jest.requireActual('@sentry/browser');
-  return {
-    ...actual,
-    captureFeedback: jest.fn(),
-  };
-});
-
 const EXAMPLE_DSN = 'https://6890c2f6677340daa4804f8194804ea2@o19635.ingest.sentry.io/148053';
 
 const DEFAULT_OPTIONS: ReactNativeClientOptions = {
@@ -294,29 +279,6 @@ describe('Tests ReactNativeClient', () => {
     });
   });
 
-  describe('UserFeedback', () => {
-    test('sends UserFeedback', () => {
-      const client = new ReactNativeClient({
-        ...DEFAULT_OPTIONS,
-        dsn: EXAMPLE_DSN,
-      });
-      jest.mock('@sentry/browser', () => ({
-        captureFeedback: jest.fn(),
-      }));
-
-      const feedback: SendFeedbackParams = {
-        message: 'Test Comments',
-        email: 'test@email.com',
-        name: 'Test User',
-        associatedEventId: 'testEvent123',
-      };
-
-      client.captureFeedback(feedback);
-
-      expect(captureFeedbackApi).toHaveBeenCalledWith(feedback);
-    });
-  });
-
   describe('attachStacktrace', () => {
     let mockTransportSend: jest.Mock;
     let client: ReactNativeClient;

From 3e36c6dcfcc20c32f8d0d0bc5585cf1d6dd4df30 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 15:41:49 +0200
Subject: [PATCH 08/68] Use import from core

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

diff --git a/packages/core/src/js/client.ts b/packages/core/src/js/client.ts
index 5708b52f3a..ba794ed4d8 100644
--- a/packages/core/src/js/client.ts
+++ b/packages/core/src/js/client.ts
@@ -1,4 +1,5 @@
-import { captureFeedback as captureFeedbackApi, eventFromException, eventFromMessage } from '@sentry/browser';
+import { eventFromMessage } from '@sentry/core';
+import { eventFromException } from '@sentry/browser';
 import { BaseClient } from '@sentry/core';
 import type {
   ClientReportEnvelope,

From 5f3df64d0ecca29e826782239e37d796cee81b7a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 15:46:17 +0200
Subject: [PATCH 09/68] Fixes imports order lint issue

---
 packages/core/src/js/client.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core/src/js/client.ts b/packages/core/src/js/client.ts
index ba794ed4d8..e8de5e92fe 100644
--- a/packages/core/src/js/client.ts
+++ b/packages/core/src/js/client.ts
@@ -1,6 +1,5 @@
-import { eventFromMessage } from '@sentry/core';
 import { eventFromException } from '@sentry/browser';
-import { BaseClient } from '@sentry/core';
+import { BaseClient, eventFromMessage } from '@sentry/core';
 import type {
   ClientReportEnvelope,
   ClientReportItem,

From 71b28e8e48f5c997d74de43221fbe7c7bdb3304f Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 15:56:12 +0200
Subject: [PATCH 10/68] Fixes build issue

---
 packages/core/src/js/client.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/js/client.ts b/packages/core/src/js/client.ts
index e8de5e92fe..1ae478ca71 100644
--- a/packages/core/src/js/client.ts
+++ b/packages/core/src/js/client.ts
@@ -1,5 +1,5 @@
-import { eventFromException } from '@sentry/browser';
-import { BaseClient, eventFromMessage } from '@sentry/core';
+import { eventFromException, eventFromMessage } from '@sentry/browser';
+import { BaseClient } from '@sentry/core';
 import type {
   ClientReportEnvelope,
   ClientReportItem,

From f9d2b59500ea58956f42f5250d395270a385ae31 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 16:55:57 +0200
Subject: [PATCH 11/68] Adds captureFeedback tests from sentry-javascript

---
 packages/core/test/feedback.test.ts | 473 ++++++++++++++++++++++++++++
 1 file changed, 473 insertions(+)
 create mode 100644 packages/core/test/feedback.test.ts

diff --git a/packages/core/test/feedback.test.ts b/packages/core/test/feedback.test.ts
new file mode 100644
index 0000000000..f36a697001
--- /dev/null
+++ b/packages/core/test/feedback.test.ts
@@ -0,0 +1,473 @@
+import {
+  addBreadcrumb,
+  captureFeedback,
+  getCurrentScope,
+  Scope,
+  setCurrentClient,
+  startSpan,
+  withIsolationScope,
+  withScope,
+} from '@sentry/core';
+import type { Span } from '@sentry/types';
+
+import { getDefaultTestClientOptions, TestClient } from './mocks/client';
+
+describe('captureFeedback', () => {
+  beforeEach(() => {
+    getCurrentScope().setClient(undefined);
+    getCurrentScope().clear();
+  });
+
+  test('it works without a client', () => {
+    const res = captureFeedback({
+      message: 'test',
+    });
+
+    expect(typeof res).toBe('string');
+  });
+
+  test('it works with minimal options', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+
+    const eventId = captureFeedback({
+      message: 'test',
+    });
+
+    await client.flush();
+
+    expect(typeof eventId).toBe('string');
+
+    expect(mockTransport).toHaveBeenCalledWith([
+      {
+        event_id: eventId,
+        sent_at: expect.any(String),
+      },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              trace: {
+                span_id: expect.any(String),
+                trace_id: expect.any(String),
+              },
+              feedback: {
+                message: 'test',
+              },
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: eventId,
+            timestamp: expect.any(Number),
+            tags: undefined,
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+
+  test('it works with full options', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+
+    const eventId = captureFeedback({
+      name: 'doe',
+      email: 're@example.org',
+      message: 'mi',
+      url: 'http://example.com/',
+      source: 'custom-source',
+      associatedEventId: '1234',
+    });
+
+    await client.flush();
+
+    expect(typeof eventId).toBe('string');
+
+    expect(mockTransport).toHaveBeenCalledWith([
+      {
+        event_id: eventId,
+        sent_at: expect.any(String),
+      },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              trace: {
+                span_id: expect.any(String),
+                trace_id: expect.any(String),
+              },
+              feedback: {
+                name: 'doe',
+                contact_email: 're@example.org',
+                message: 'mi',
+                url: 'http://example.com/',
+                source: 'custom-source',
+                associated_event_id: '1234',
+              },
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: eventId,
+            timestamp: expect.any(Number),
+            tags: undefined,
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+
+  test('it captures attachments', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+
+    const attachment1 = new Uint8Array([1, 2, 3, 4, 5]);
+    const attachment2 = new Uint8Array([6, 7, 8, 9]);
+
+    const eventId = captureFeedback(
+      {
+        message: 'test',
+      },
+      {
+        attachments: [
+          {
+            data: attachment1,
+            filename: 'test-file.txt',
+          },
+          {
+            data: attachment2,
+            filename: 'test-file2.txt',
+          },
+        ],
+      },
+    );
+
+    await client.flush();
+
+    expect(typeof eventId).toBe('string');
+
+    expect(mockTransport).toHaveBeenCalledTimes(1);
+
+    const [feedbackEnvelope] = mockTransport.mock.calls;
+
+    expect(feedbackEnvelope).toHaveLength(1);
+    expect(feedbackEnvelope![0]).toEqual([
+      {
+        event_id: eventId,
+        sent_at: expect.any(String),
+      },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              trace: {
+                span_id: expect.any(String),
+                trace_id: expect.any(String),
+              },
+              feedback: {
+                message: 'test',
+              },
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: eventId,
+            timestamp: expect.any(Number),
+            tags: undefined,
+            type: 'feedback',
+          },
+        ],
+        [
+          {
+            type: 'attachment',
+            length: 5,
+            filename: 'test-file.txt',
+          },
+          attachment1,
+        ],
+        [
+          {
+            type: 'attachment',
+            length: 4,
+            filename: 'test-file2.txt',
+          },
+          attachment2,
+        ],
+      ],
+    ]);
+  });
+
+  test('it captures DSC from scope', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+
+    const traceId = '4C79F60C11214EB38604F4AE0781BFB2';
+    const spanId = 'FA90FDEAD5F74052';
+    const dsc = {
+      trace_id: traceId,
+      span_id: spanId,
+      sampled: 'true',
+    };
+
+    getCurrentScope().setPropagationContext({
+      traceId,
+      spanId,
+      dsc,
+    });
+
+    const eventId = captureFeedback({
+      message: 'test',
+    });
+
+    await client.flush();
+
+    expect(typeof eventId).toBe('string');
+
+    expect(mockTransport).toHaveBeenCalledWith([
+      {
+        event_id: eventId,
+        sent_at: expect.any(String),
+      },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              trace: {
+                trace_id: traceId,
+                span_id: spanId,
+              },
+              feedback: {
+                message: 'test',
+              },
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: eventId,
+            timestamp: expect.any(Number),
+            tags: undefined,
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+
+  test('it captures data from active span', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+        enableTracing: true,
+        // We don't care about transactions here...
+        beforeSendTransaction() {
+          return null;
+        },
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+
+    let span: Span | undefined;
+    const eventId = startSpan({ name: 'test-span' }, _span => {
+      span = _span;
+      return captureFeedback({
+        message: 'test',
+      });
+    });
+
+    await client.flush();
+
+    expect(typeof eventId).toBe('string');
+    expect(span).toBeDefined();
+
+    const { spanId, traceId } = span!.spanContext();
+
+    expect(mockTransport).toHaveBeenCalledWith([
+      {
+        event_id: eventId,
+        sent_at: expect.any(String),
+      },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              trace: {
+                trace_id: traceId,
+                span_id: spanId,
+              },
+              feedback: {
+                message: 'test',
+              },
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: eventId,
+            timestamp: expect.any(Number),
+            tags: undefined,
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+
+  it('applies scope data to feedback', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+        enableTracing: true,
+        // We don't care about transactions here...
+        beforeSendTransaction() {
+          return null;
+        },
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+
+    withIsolationScope(isolationScope => {
+      isolationScope.setTag('test-1', 'tag');
+      isolationScope.setExtra('test-1', 'extra');
+
+      return withScope(scope => {
+        scope.setTag('test-2', 'tag');
+        scope.setExtra('test-2', 'extra');
+
+        addBreadcrumb({ message: 'test breadcrumb', timestamp: 12345 });
+
+        captureFeedback({
+          name: 'doe',
+          email: 're@example.org',
+          message: 'mi',
+        });
+      });
+    });
+
+    expect(mockTransport).toHaveBeenCalledWith([
+      {
+        event_id: expect.any(String),
+        sent_at: expect.any(String),
+      },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: [{ message: 'test breadcrumb', timestamp: 12345 }],
+            contexts: {
+              trace: {
+                span_id: expect.any(String),
+                trace_id: expect.any(String),
+              },
+              feedback: {
+                contact_email: 're@example.org',
+                message: 'mi',
+                name: 'doe',
+              },
+            },
+            extra: {
+              'test-1': 'extra',
+              'test-2': 'extra',
+            },
+            tags: {
+              'test-1': 'tag',
+              'test-2': 'tag',
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: expect.any(String),
+            timestamp: expect.any(Number),
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+
+  test('it allows to pass a custom client', async () => {
+    const client = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const client2 = new TestClient(
+      getDefaultTestClientOptions({
+        dsn: 'https://dsn@ingest.f00.f00/1',
+        enableSend: true,
+        defaultIntegrations: false,
+      }),
+    );
+    client2.init();
+    const scope = new Scope();
+    scope.setClient(client2);
+
+    const mockTransport = jest.spyOn(client.getTransport()!, 'send');
+    const mockTransport2 = jest.spyOn(client2.getTransport()!, 'send');
+
+    const eventId = captureFeedback(
+      {
+        message: 'test',
+      },
+      {},
+      scope,
+    );
+
+    await client.flush();
+    await client2.flush();
+
+    expect(typeof eventId).toBe('string');
+
+    expect(mockTransport).not.toHaveBeenCalled();
+    expect(mockTransport2).toHaveBeenCalledTimes(1);
+  });
+});

From d05d5315356a03f4c050ad906ac53e4bb6ff0d26 Mon Sep 17 00:00:00 2001
From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
Date: Thu, 28 Nov 2024 16:53:39 +0100
Subject: [PATCH 12/68] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f4cfc6fc5..e34ec75485 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,6 @@
 
 - Adds new `captureFeedback` and deprecates the `captureUserFeedback` API ([#4320](https://github.com/getsentry/sentry-react-native/pull/4320))
 
-
   ```jsx
   import * as Sentry from "@sentry/react-native";
 

From 2bb104b889fe1b3ca5ddae559c2eebf4d47085ab Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Thu, 28 Nov 2024 18:14:45 +0200
Subject: [PATCH 13/68] Only deprecate client captureUserFeedback

---
 packages/core/src/js/client.ts    | 17 ++++++++++-
 packages/core/test/client.test.ts | 47 +++++++++++++++++++++++++++++++
 packages/core/test/testutils.ts   |  9 +++++-
 3 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/js/client.ts b/packages/core/src/js/client.ts
index 1ae478ca71..1e2c858264 100644
--- a/packages/core/src/js/client.ts
+++ b/packages/core/src/js/client.ts
@@ -9,6 +9,7 @@ import type {
   Outcome,
   SeverityLevel,
   TransportMakeRequestResponse,
+  UserFeedback,
 } from '@sentry/types';
 import { dateTimestampInSeconds, logger, SentryError } from '@sentry/utils';
 import { Alert } from 'react-native';
@@ -19,7 +20,7 @@ import { getDefaultSidecarUrl } from './integrations/spotlight';
 import type { ReactNativeClientOptions } from './options';
 import type { mobileReplayIntegration } from './replay/mobilereplay';
 import { MOBILE_REPLAY_INTEGRATION_NAME } from './replay/mobilereplay';
-import { items } from './utils/envelope';
+import { createUserFeedbackEnvelope, items } from './utils/envelope';
 import { ignoreRequireCycleLogs } from './utils/ignorerequirecyclelogs';
 import { mergeOutcomes } from './utils/outcome';
 import { ReactNativeLibraries } from './utils/rnlibraries';
@@ -82,6 +83,20 @@ export class ReactNativeClient extends BaseClient<ReactNativeClientOptions> {
     });
   }
 
+  /**
+   * Sends user feedback to Sentry.
+   * @deprecated Use `Sentry.captureFeedback` instead.
+   */
+  public captureUserFeedback(feedback: UserFeedback): void {
+    const envelope = createUserFeedbackEnvelope(feedback, {
+      metadata: this._options._metadata,
+      dsn: this.getDsn(),
+      tunnel: undefined,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.sendEnvelope(envelope);
+  }
+
   /**
    * @inheritdoc
    */
diff --git a/packages/core/test/client.test.ts b/packages/core/test/client.test.ts
index 3d732e194c..a0e5b13201 100644
--- a/packages/core/test/client.test.ts
+++ b/packages/core/test/client.test.ts
@@ -19,6 +19,7 @@ import {
   envelopeItems,
   firstArg,
   getMockSession,
+  getMockUserFeedback,
   getSyncPromiseRejectOnFirstCall,
 } from './testutils';
 
@@ -186,6 +187,15 @@ describe('Tests ReactNativeClient', () => {
       expect(mockTransport.send).not.toBeCalled();
     });
 
+    test('captureUserFeedback does not call transport when enabled false', () => {
+      const mockTransport = createMockTransport();
+      const client = createDisabledClientWith(mockTransport);
+
+      client.captureUserFeedback(getMockUserFeedback());
+
+      expect(mockTransport.send).not.toBeCalled();
+    });
+
     function createDisabledClientWith(transport: Transport) {
       return new ReactNativeClient({
         ...DEFAULT_OPTIONS,
@@ -279,6 +289,38 @@ describe('Tests ReactNativeClient', () => {
     });
   });
 
+  describe('UserFeedback', () => {
+    test('sends UserFeedback to native Layer', () => {
+      const mockTransportSend: jest.Mock = jest.fn(() => Promise.resolve());
+      const client = new ReactNativeClient({
+        ...DEFAULT_OPTIONS,
+        dsn: EXAMPLE_DSN,
+        transport: () => ({
+          send: mockTransportSend,
+          flush: jest.fn(),
+        }),
+      });
+
+      client.captureUserFeedback({
+        comments: 'Test Comments',
+        email: 'test@email.com',
+        name: 'Test User',
+        event_id: 'testEvent123',
+      });
+
+      expect(mockTransportSend.mock.calls[0][firstArg][envelopeHeader].event_id).toEqual('testEvent123');
+      expect(mockTransportSend.mock.calls[0][firstArg][envelopeItems][0][envelopeItemHeader].type).toEqual(
+        'user_report',
+      );
+      expect(mockTransportSend.mock.calls[0][firstArg][envelopeItems][0][envelopeItemPayload]).toEqual({
+        comments: 'Test Comments',
+        email: 'test@email.com',
+        name: 'Test User',
+        event_id: 'testEvent123',
+      });
+    });
+  });
+
   describe('attachStacktrace', () => {
     let mockTransportSend: jest.Mock;
     let client: ReactNativeClient;
@@ -375,6 +417,11 @@ describe('Tests ReactNativeClient', () => {
       client.captureSession(getMockSession());
       expect(getSdkInfoFrom(mockTransportSend)).toStrictEqual(expectedSdkInfo);
     });
+
+    test('send SdkInfo in the user feedback envelope header', () => {
+      client.captureUserFeedback(getMockUserFeedback());
+      expect(getSdkInfoFrom(mockTransportSend)).toStrictEqual(expectedSdkInfo);
+    });
   });
 
   describe('event data enhancement', () => {
diff --git a/packages/core/test/testutils.ts b/packages/core/test/testutils.ts
index 593a51f838..4548eef092 100644
--- a/packages/core/test/testutils.ts
+++ b/packages/core/test/testutils.ts
@@ -1,4 +1,4 @@
-import type { Session, Transport } from '@sentry/types';
+import type { Session, Transport, UserFeedback } from '@sentry/types';
 import { rejectedSyncPromise } from '@sentry/utils';
 
 export type MockInterface<T> = {
@@ -36,6 +36,13 @@ export const getMockSession = (): Session => ({
   }),
 });
 
+export const getMockUserFeedback = (): UserFeedback => ({
+  comments: 'comments_test_value',
+  email: 'email_test_value',
+  name: 'name_test_value',
+  event_id: 'event_id_test_value',
+});
+
 export const getSyncPromiseRejectOnFirstCall = <Y extends any[]>(reason: unknown): jest.Mock => {
   let shouldSyncReject = true;
   return jest.fn((..._args: Y) => {

From 4339274aaaad995213eceb1a284551ac8376c24c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 29 Nov 2024 16:56:34 +0200
Subject: [PATCH 14/68] Add simple form UI

---
 .../src/js/feedback/FeedbackFormScreen.tsx    | 112 ++++++++++++++++++
 packages/core/src/js/index.ts                 |   2 +
 samples/react-native/src/App.tsx              |  12 ++
 .../react-native/src/Screens/ErrorsScreen.tsx |   6 +
 4 files changed, 132 insertions(+)
 create mode 100644 packages/core/src/js/feedback/FeedbackFormScreen.tsx

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
new file mode 100644
index 0000000000..1a1aacb9be
--- /dev/null
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import type { KeyboardTypeOptions } from "react-native";
+import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+
+interface FeedbackFormScreenProps {
+  closeScreen: () => void;
+}
+
+export const FeedbackFormScreen: React.FC<FeedbackFormScreenProps> = ({ closeScreen }) => {
+
+  const handleFeedbackSubmit = (): void => {
+    closeScreen();
+  };
+
+  const addScreenshot = (): void => {
+    Alert.alert("Info", "Attachments are not supported yet.");
+    // TODO
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Feedback Form</Text>
+
+      <TextInput
+        style={styles.input}
+        placeholder="Name"
+      />
+
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        keyboardType={"email-address" as KeyboardTypeOptions}
+      />
+
+      <TextInput
+        style={[styles.input, styles.textArea]}
+        placeholder="Description (required)"
+        multiline
+      />
+
+      <TouchableOpacity style={styles.screenshotButton} onPress={addScreenshot}>
+        <Text style={styles.screenshotText}>Add Screenshot</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.submitButton} onPress={handleFeedbackSubmit}>
+        <Text style={styles.submitText}>Send Feedback</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.cancelButton} onPress={closeScreen}>
+        <Text style={styles.cancelText}>Cancel</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: "#fff",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  input: {
+    height: 50,
+    borderColor: "#ccc",
+    borderWidth: 1,
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    marginBottom: 15,
+    fontSize: 16,
+  },
+  textArea: {
+    height: 100,
+    textAlignVertical: "top",
+  },
+  screenshotButton: {
+    backgroundColor: "#eee",
+    padding: 15,
+    borderRadius: 5,
+    marginBottom: 20,
+    alignItems: "center",
+  },
+  screenshotText: {
+    color: "#333",
+    fontSize: 16,
+  },
+  submitButton: {
+    backgroundColor: "#6a1b9a",
+    paddingVertical: 15,
+    borderRadius: 5,
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  submitText: {
+    color: "#fff",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  cancelButton: {
+    paddingVertical: 15,
+    alignItems: "center",
+  },
+  cancelText: {
+    color: "#6a1b9a",
+    fontSize: 16,
+  },
+});
diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts
index 4aa7e2fa21..ba28710da8 100644
--- a/packages/core/src/js/index.ts
+++ b/packages/core/src/js/index.ts
@@ -83,3 +83,5 @@ export {
 export type { TimeToDisplayProps } from './tracing';
 
 export { Mask, Unmask } from './replay/CustomMask';
+
+export { FeedbackFormScreen } from './feedback/FeedbackFormScreen';
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 04348fa5c6..5a30fcafba 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -16,6 +16,7 @@ import Animated, {
 
 // Import the Sentry React Native SDK
 import * as Sentry from '@sentry/react-native';
+import { FeedbackFormScreen } from '@sentry/react-native';
 
 import { SENTRY_INTERNAL_DSN } from './dsn';
 import ErrorsScreen from './Screens/ErrorsScreen';
@@ -151,6 +152,17 @@ const ErrorsTabNavigator = Sentry.withProfiler(
               component={ErrorsScreen}
               options={{ title: 'Errors' }}
             />
+            <Stack.Screen
+              name="FeedbackForm"
+              options={{ presentation: 'modal', headerShown: false }}
+            >
+              {(props) => (
+                <FeedbackFormScreen
+                  {...props}
+                  closeScreen={props.navigation.goBack}
+                />
+              )}
+            </Stack.Screen>
           </Stack.Navigator>
         </Provider>
       </GestureHandlerRootView>
diff --git a/samples/react-native/src/Screens/ErrorsScreen.tsx b/samples/react-native/src/Screens/ErrorsScreen.tsx
index 5f2f405677..4788fa407a 100644
--- a/samples/react-native/src/Screens/ErrorsScreen.tsx
+++ b/samples/react-native/src/Screens/ErrorsScreen.tsx
@@ -220,6 +220,12 @@ const ErrorsScreen = (_props: Props) => {
             }
           }}
         />
+        <Button
+          title="Feedback form"
+          onPress={() => {
+            _props.navigation.navigate('FeedbackForm');
+          }}
+        />
         <Button
           title="Send user feedback"
           onPress={() => {

From 6ce799b2646adff1653f7a1469d7b29a5dc143d6 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 29 Nov 2024 23:15:26 +0200
Subject: [PATCH 15/68] Adds basic form functionality

---
 .../src/js/feedback/FeedbackFormScreen.tsx    | 121 +++++++++++++-----
 samples/react-native/src/App.tsx              |  10 ++
 2 files changed, 96 insertions(+), 35 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index 1a1aacb9be..6d8aaa20e6 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -1,73 +1,124 @@
-import React from 'react';
-import type { KeyboardTypeOptions } from "react-native";
-import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { captureFeedback } from '@sentry/core';
+import React, { useState } from 'react';
+import type { KeyboardTypeOptions, TextStyle,ViewStyle } from 'react-native';
+import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+import type { SendFeedbackParams } from '..';
 
 interface FeedbackFormScreenProps {
   closeScreen: () => void;
+  text: FeedbackFormText;
+  styles?: FeedbackFormScreenStyles;
+}
+
+interface FeedbackFormText {
+  formTitle?: string;
+  namePlaceholder?: string;
+  emailPlaceholder?: string;
+  descriptionPlaceholder?: string;
+  addAttachmentButton?: string;
+  submitButton?: string;
+  cancelButton?: string;
+  formError?: string;
 }
 
-export const FeedbackFormScreen: React.FC<FeedbackFormScreenProps> = ({ closeScreen }) => {
+interface FeedbackFormScreenStyles {
+  container?: ViewStyle;
+  title?: TextStyle;
+  input?: TextStyle;
+  textArea?: ViewStyle;
+  screenshotButton?: ViewStyle;
+  screenshotText?: TextStyle;
+  submitButton?: ViewStyle;
+  submitText?: TextStyle;
+  cancelButton?: ViewStyle;
+  cancelText?: TextStyle;
+}
+
+export const FeedbackFormScreen: React.FC<FeedbackFormScreenProps> = ({ closeScreen, text, styles }) => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [description, setDescription] = useState('');
 
   const handleFeedbackSubmit = (): void => {
+    if (!name || !email || !description) {
+      const errorMessage = text?.formError || 'Please fill out all required fields.';
+      Alert.alert('Error', errorMessage);
+      return;
+    }
+    const userFeedback: SendFeedbackParams = {
+      message: description,
+      name: name,
+      email: email,
+    };
+
+    captureFeedback(userFeedback);
+
     closeScreen();
   };
 
   const addScreenshot = (): void => {
-    Alert.alert("Info", "Attachments are not supported yet.");
+    Alert.alert('Info', 'Attachments are not supported yet.');
     // TODO
   };
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Feedback Form</Text>
+    <View style={styles?.container || defaultStyles.container}>
+      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || 'Feedback Form'}</Text>
 
       <TextInput
-        style={styles.input}
-        placeholder="Name"
+        style={styles?.input || defaultStyles.input}
+        placeholder={text?.namePlaceholder || 'Name'}
+        value={name}
+        onChangeText={setName}
       />
 
       <TextInput
-        style={styles.input}
-        placeholder="Email"
-        keyboardType={"email-address" as KeyboardTypeOptions}
+        style={styles?.input || defaultStyles.input}
+        placeholder={text?.emailPlaceholder || 'Email'}
+        keyboardType={'email-address' as KeyboardTypeOptions}
+        value={email}
+        onChangeText={setEmail}
       />
 
       <TextInput
-        style={[styles.input, styles.textArea]}
-        placeholder="Description (required)"
+        style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
+        placeholder={text?.descriptionPlaceholder || 'Description (required)'}
+        value={description}
+        onChangeText={setDescription}
         multiline
       />
 
-      <TouchableOpacity style={styles.screenshotButton} onPress={addScreenshot}>
-        <Text style={styles.screenshotText}>Add Screenshot</Text>
+      <TouchableOpacity style={styles?.screenshotButton || defaultStyles.screenshotButton} onPress={addScreenshot}>
+        <Text style={styles?.screenshotText || defaultStyles.screenshotText}>{text?.addAttachmentButton || 'Add Screenshot'}</Text>
       </TouchableOpacity>
 
-      <TouchableOpacity style={styles.submitButton} onPress={handleFeedbackSubmit}>
-        <Text style={styles.submitText}>Send Feedback</Text>
+      <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={handleFeedbackSubmit}>
+        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || 'Send Feedback'}</Text>
       </TouchableOpacity>
 
-      <TouchableOpacity style={styles.cancelButton} onPress={closeScreen}>
-        <Text style={styles.cancelText}>Cancel</Text>
+      <TouchableOpacity style={styles?.cancelButton || defaultStyles.cancelButton} onPress={closeScreen}>
+        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || 'Cancel'}</Text>
       </TouchableOpacity>
     </View>
   );
 };
 
-const styles = StyleSheet.create({
+const defaultStyles = StyleSheet.create({
   container: {
     flex: 1,
     padding: 20,
-    backgroundColor: "#fff",
+    backgroundColor: '#fff',
   },
   title: {
     fontSize: 24,
-    fontWeight: "bold",
+    fontWeight: 'bold',
     marginBottom: 20,
-    textAlign: "center",
+    textAlign: 'center',
   },
   input: {
     height: 50,
-    borderColor: "#ccc",
+    borderColor: '#ccc',
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 10,
@@ -76,37 +127,37 @@ const styles = StyleSheet.create({
   },
   textArea: {
     height: 100,
-    textAlignVertical: "top",
+    textAlignVertical: 'top',
   },
   screenshotButton: {
-    backgroundColor: "#eee",
+    backgroundColor: '#eee',
     padding: 15,
     borderRadius: 5,
     marginBottom: 20,
-    alignItems: "center",
+    alignItems: 'center',
   },
   screenshotText: {
-    color: "#333",
+    color: '#333',
     fontSize: 16,
   },
   submitButton: {
-    backgroundColor: "#6a1b9a",
+    backgroundColor: '#6a1b9a',
     paddingVertical: 15,
     borderRadius: 5,
-    alignItems: "center",
+    alignItems: 'center',
     marginBottom: 10,
   },
   submitText: {
-    color: "#fff",
+    color: '#fff',
     fontSize: 18,
-    fontWeight: "bold",
+    fontWeight: 'bold',
   },
   cancelButton: {
     paddingVertical: 15,
-    alignItems: "center",
+    alignItems: 'center',
   },
   cancelText: {
-    color: "#6a1b9a",
+    color: '#6a1b9a',
     fontSize: 16,
   },
 });
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 5a30fcafba..532966ad11 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -160,6 +160,16 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                 <FeedbackFormScreen
                   {...props}
                   closeScreen={props.navigation.goBack}
+                  styles={{
+                    submitButton: {
+                      backgroundColor: '#ff0000',
+                      paddingVertical: 15,
+                      borderRadius: 5,
+                      alignItems: 'center',
+                      marginBottom: 10,
+                    },
+                  }}
+                  text={{namePlaceholder: 'Fullname', addAttachmentButton: 'Add Attachment'}}
                 />
               )}
             </Stack.Screen>

From f2cefc6a5e8f4ed43df03796c4848a9d22dc37ea Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 29 Nov 2024 23:31:16 +0200
Subject: [PATCH 16/68] Update imports

---
 packages/core/src/js/feedback/FeedbackFormScreen.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index 6d8aaa20e6..e4b293eef7 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -1,10 +1,9 @@
 import { captureFeedback } from '@sentry/core';
+import type { SendFeedbackParams } from '@sentry/types';
 import React, { useState } from 'react';
 import type { KeyboardTypeOptions, TextStyle,ViewStyle } from 'react-native';
 import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import type { SendFeedbackParams } from '..';
-
 interface FeedbackFormScreenProps {
   closeScreen: () => void;
   text: FeedbackFormText;

From 694ee333a5a7027e35ddccef68f5d8f33cd75c26 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 10:59:56 +0200
Subject: [PATCH 17/68] Update imports

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

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index e4b293eef7..3e3715e53e 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -1,6 +1,7 @@
 import { captureFeedback } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
-import React, { useState } from 'react';
+import * as React from 'react';
+import { useState } from 'react';
 import type { KeyboardTypeOptions, TextStyle,ViewStyle } from 'react-native';
 import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 

From 034efdea49b2da296842969a58e73c6819b788e7 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 17:22:13 +0200
Subject: [PATCH 18/68] Remove useState hook to avoid multiple react instances
 issues

---
 .../src/js/feedback/FeedbackFormScreen.tsx    | 162 ++++++++++--------
 1 file changed, 93 insertions(+), 69 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index 3e3715e53e..d522e8fade 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -1,7 +1,6 @@
 import { captureFeedback } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
-import { useState } from 'react';
 import type { KeyboardTypeOptions, TextStyle,ViewStyle } from 'react-native';
 import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
@@ -35,74 +34,11 @@ interface FeedbackFormScreenStyles {
   cancelText?: TextStyle;
 }
 
-export const FeedbackFormScreen: React.FC<FeedbackFormScreenProps> = ({ closeScreen, text, styles }) => {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [description, setDescription] = useState('');
-
-  const handleFeedbackSubmit = (): void => {
-    if (!name || !email || !description) {
-      const errorMessage = text?.formError || 'Please fill out all required fields.';
-      Alert.alert('Error', errorMessage);
-      return;
-    }
-    const userFeedback: SendFeedbackParams = {
-      message: description,
-      name: name,
-      email: email,
-    };
-
-    captureFeedback(userFeedback);
-
-    closeScreen();
-  };
-
-  const addScreenshot = (): void => {
-    Alert.alert('Info', 'Attachments are not supported yet.');
-    // TODO
-  };
-
-  return (
-    <View style={styles?.container || defaultStyles.container}>
-      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || 'Feedback Form'}</Text>
-
-      <TextInput
-        style={styles?.input || defaultStyles.input}
-        placeholder={text?.namePlaceholder || 'Name'}
-        value={name}
-        onChangeText={setName}
-      />
-
-      <TextInput
-        style={styles?.input || defaultStyles.input}
-        placeholder={text?.emailPlaceholder || 'Email'}
-        keyboardType={'email-address' as KeyboardTypeOptions}
-        value={email}
-        onChangeText={setEmail}
-      />
-
-      <TextInput
-        style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
-        placeholder={text?.descriptionPlaceholder || 'Description (required)'}
-        value={description}
-        onChangeText={setDescription}
-        multiline
-      />
-
-      <TouchableOpacity style={styles?.screenshotButton || defaultStyles.screenshotButton} onPress={addScreenshot}>
-        <Text style={styles?.screenshotText || defaultStyles.screenshotText}>{text?.addAttachmentButton || 'Add Screenshot'}</Text>
-      </TouchableOpacity>
-
-      <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={handleFeedbackSubmit}>
-        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || 'Send Feedback'}</Text>
-      </TouchableOpacity>
-
-      <TouchableOpacity style={styles?.cancelButton || defaultStyles.cancelButton} onPress={closeScreen}>
-        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || 'Cancel'}</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
+interface FeedbackFormScreenState {
+  name: string;
+  email: string;
+  description: string;
+}
 
 const defaultStyles = StyleSheet.create({
   container: {
@@ -161,3 +97,91 @@ const defaultStyles = StyleSheet.create({
     fontSize: 16,
   },
 });
+
+/**
+ *
+ */
+export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps, FeedbackFormScreenState> {
+  public constructor(props: FeedbackFormScreenProps) {
+    super(props);
+    this.state = {
+      name: '',
+      email: '',
+      description: '',
+    };
+  }
+
+  public handleFeedbackSubmit: () => void = () => {
+    const { name, email, description } = this.state;
+    const { closeScreen, text } = this.props;
+
+    if (!name || !email || !description) {
+      const errorMessage = text?.formError || 'Please fill out all required fields.';
+      Alert.alert('Error', errorMessage);
+      return;
+    }
+
+    const userFeedback: SendFeedbackParams = {
+      message: description,
+      name,
+      email,
+    };
+
+    captureFeedback(userFeedback);
+    closeScreen();
+  };
+
+  public addScreenshot: () => void = () => {
+    Alert.alert('Info', 'Attachments are not supported yet.');
+    // TODO
+  };
+
+  /**
+   *
+   */
+  public render(): React.ReactNode {
+    const { closeScreen, text, styles } = this.props;
+    const { name, email, description } = this.state;
+
+    return (
+    <View style={styles?.container || defaultStyles.container}>
+      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || 'Feedback Form'}</Text>
+
+      <TextInput
+        style={styles?.input || defaultStyles.input}
+        placeholder={text?.namePlaceholder || 'Name'}
+        value={name}
+        onChangeText={(value) => this.setState({ name: value })}
+        />
+
+      <TextInput
+        style={styles?.input || defaultStyles.input}
+        placeholder={text?.emailPlaceholder || 'Email'}
+        keyboardType={'email-address' as KeyboardTypeOptions}
+        value={email}
+        onChangeText={(value) => this.setState({ email: value })}
+        />
+
+      <TextInput
+        style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
+        placeholder={text?.descriptionPlaceholder || 'Description (required)'}
+        value={description}
+        onChangeText={(value) => this.setState({ description: value })}
+        multiline
+      />
+
+      <TouchableOpacity style={styles?.screenshotButton || defaultStyles.screenshotButton} onPress={this.addScreenshot}>
+        <Text style={styles?.screenshotText || defaultStyles.screenshotText}>{text?.addAttachmentButton || 'Add Screenshot'}</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={this.handleFeedbackSubmit}>
+        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || 'Send Feedback'}</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles?.cancelButton || defaultStyles.cancelButton} onPress={closeScreen}>
+        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || 'Cancel'}</Text>
+      </TouchableOpacity>
+    </View>
+    );
+  }
+}

From 67a492dfa3aeb8d4bf1a9939dc4f4cddd8156f14 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 17:34:53 +0200
Subject: [PATCH 19/68] Move types and styles in different files

---
 .../js/feedback/FeedbackFormScreen.styles.ts  |  61 +++++++++++
 .../src/js/feedback/FeedbackFormScreen.tsx    | 103 +-----------------
 .../js/feedback/FeedbackFormScreen.types.ts   |  37 +++++++
 samples/react-native/src/App.tsx              |   2 +-
 4 files changed, 105 insertions(+), 98 deletions(-)
 create mode 100644 packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
 create mode 100644 packages/core/src/js/feedback/FeedbackFormScreen.types.ts

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts b/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
new file mode 100644
index 0000000000..d5fff2f385
--- /dev/null
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+
+const defaultStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  input: {
+    height: 50,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    marginBottom: 15,
+    fontSize: 16,
+  },
+  textArea: {
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  screenshotButton: {
+    backgroundColor: '#eee',
+    padding: 15,
+    borderRadius: 5,
+    marginBottom: 20,
+    alignItems: 'center',
+  },
+  screenshotText: {
+    color: '#333',
+    fontSize: 16,
+  },
+  submitButton: {
+    backgroundColor: '#6a1b9a',
+    paddingVertical: 15,
+    borderRadius: 5,
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  submitText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  cancelButton: {
+    paddingVertical: 15,
+    alignItems: 'center',
+  },
+  cancelText: {
+    color: '#6a1b9a',
+    fontSize: 16,
+  },
+});
+
+export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index d522e8fade..0c250b8950 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -1,105 +1,14 @@
 import { captureFeedback } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
-import type { KeyboardTypeOptions, TextStyle,ViewStyle } from 'react-native';
-import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import type { KeyboardTypeOptions } from 'react-native';
+import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-interface FeedbackFormScreenProps {
-  closeScreen: () => void;
-  text: FeedbackFormText;
-  styles?: FeedbackFormScreenStyles;
-}
-
-interface FeedbackFormText {
-  formTitle?: string;
-  namePlaceholder?: string;
-  emailPlaceholder?: string;
-  descriptionPlaceholder?: string;
-  addAttachmentButton?: string;
-  submitButton?: string;
-  cancelButton?: string;
-  formError?: string;
-}
-
-interface FeedbackFormScreenStyles {
-  container?: ViewStyle;
-  title?: TextStyle;
-  input?: TextStyle;
-  textArea?: ViewStyle;
-  screenshotButton?: ViewStyle;
-  screenshotText?: TextStyle;
-  submitButton?: ViewStyle;
-  submitText?: TextStyle;
-  cancelButton?: ViewStyle;
-  cancelText?: TextStyle;
-}
-
-interface FeedbackFormScreenState {
-  name: string;
-  email: string;
-  description: string;
-}
-
-const defaultStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#fff',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  input: {
-    height: 50,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-    paddingHorizontal: 10,
-    marginBottom: 15,
-    fontSize: 16,
-  },
-  textArea: {
-    height: 100,
-    textAlignVertical: 'top',
-  },
-  screenshotButton: {
-    backgroundColor: '#eee',
-    padding: 15,
-    borderRadius: 5,
-    marginBottom: 20,
-    alignItems: 'center',
-  },
-  screenshotText: {
-    color: '#333',
-    fontSize: 16,
-  },
-  submitButton: {
-    backgroundColor: '#6a1b9a',
-    paddingVertical: 15,
-    borderRadius: 5,
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  submitText: {
-    color: '#fff',
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-  cancelButton: {
-    paddingVertical: 15,
-    alignItems: 'center',
-  },
-  cancelText: {
-    color: '#6a1b9a',
-    fontSize: 16,
-  },
-});
+import defaultStyles from './FeedbackFormScreen.styles';
+import type { FeedbackFormScreenProps, FeedbackFormScreenState } from './FeedbackFormScreen.types';
 
 /**
- *
+ * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
 export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps, FeedbackFormScreenState> {
   public constructor(props: FeedbackFormScreenProps) {
@@ -137,7 +46,7 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
   };
 
   /**
-   *
+   * Renders the feedback form screen.
    */
   public render(): React.ReactNode {
     const { closeScreen, text, styles } = this.props;
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
new file mode 100644
index 0000000000..a0d4fd6795
--- /dev/null
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
@@ -0,0 +1,37 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export interface FeedbackFormScreenProps {
+  closeScreen: () => void;
+  text: FeedbackFormText;
+  styles?: FeedbackFormScreenStyles;
+}
+
+export interface FeedbackFormText {
+  formTitle?: string;
+  namePlaceholder?: string;
+  emailPlaceholder?: string;
+  descriptionPlaceholder?: string;
+  addAttachmentButton?: string;
+  submitButton?: string;
+  cancelButton?: string;
+  formError?: string;
+}
+
+export interface FeedbackFormScreenStyles {
+  container?: ViewStyle;
+  title?: TextStyle;
+  input?: TextStyle;
+  textArea?: ViewStyle;
+  screenshotButton?: ViewStyle;
+  screenshotText?: TextStyle;
+  submitButton?: ViewStyle;
+  submitText?: TextStyle;
+  cancelButton?: ViewStyle;
+  cancelText?: TextStyle;
+}
+
+export interface FeedbackFormScreenState {
+  name: string;
+  email: string;
+  description: string;
+}
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 532966ad11..7bce1b6067 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -162,7 +162,7 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                   closeScreen={props.navigation.goBack}
                   styles={{
                     submitButton: {
-                      backgroundColor: '#ff0000',
+                      backgroundColor: '#6a1b9a',
                       paddingVertical: 15,
                       borderRadius: 5,
                       alignItems: 'center',

From 8eaa61d34cb062caf10b0e7113df009965b43b43 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 17:47:01 +0200
Subject: [PATCH 20/68] Removes attachment button to be added back separately
 along with the implementation

---
 .../core/src/js/feedback/FeedbackFormScreen.styles.ts | 11 -----------
 packages/core/src/js/feedback/FeedbackFormScreen.tsx  |  9 ---------
 .../core/src/js/feedback/FeedbackFormScreen.types.ts  |  3 ---
 samples/react-native/src/App.tsx                      |  2 +-
 4 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts b/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
index d5fff2f385..dbc936c7f3 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
@@ -25,17 +25,6 @@ const defaultStyles = StyleSheet.create({
     height: 100,
     textAlignVertical: 'top',
   },
-  screenshotButton: {
-    backgroundColor: '#eee',
-    padding: 15,
-    borderRadius: 5,
-    marginBottom: 20,
-    alignItems: 'center',
-  },
-  screenshotText: {
-    color: '#333',
-    fontSize: 16,
-  },
   submitButton: {
     backgroundColor: '#6a1b9a',
     paddingVertical: 15,
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index 0c250b8950..c9a984897f 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -40,11 +40,6 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
     closeScreen();
   };
 
-  public addScreenshot: () => void = () => {
-    Alert.alert('Info', 'Attachments are not supported yet.');
-    // TODO
-  };
-
   /**
    * Renders the feedback form screen.
    */
@@ -79,10 +74,6 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
         multiline
       />
 
-      <TouchableOpacity style={styles?.screenshotButton || defaultStyles.screenshotButton} onPress={this.addScreenshot}>
-        <Text style={styles?.screenshotText || defaultStyles.screenshotText}>{text?.addAttachmentButton || 'Add Screenshot'}</Text>
-      </TouchableOpacity>
-
       <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={this.handleFeedbackSubmit}>
         <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || 'Send Feedback'}</Text>
       </TouchableOpacity>
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
index a0d4fd6795..85b36b95d5 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
@@ -11,7 +11,6 @@ export interface FeedbackFormText {
   namePlaceholder?: string;
   emailPlaceholder?: string;
   descriptionPlaceholder?: string;
-  addAttachmentButton?: string;
   submitButton?: string;
   cancelButton?: string;
   formError?: string;
@@ -22,8 +21,6 @@ export interface FeedbackFormScreenStyles {
   title?: TextStyle;
   input?: TextStyle;
   textArea?: ViewStyle;
-  screenshotButton?: ViewStyle;
-  screenshotText?: TextStyle;
   submitButton?: ViewStyle;
   submitText?: TextStyle;
   cancelButton?: ViewStyle;
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 7bce1b6067..4599d5725c 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -169,7 +169,7 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                       marginBottom: 10,
                     },
                   }}
-                  text={{namePlaceholder: 'Fullname', addAttachmentButton: 'Add Attachment'}}
+                  text={{namePlaceholder: 'Fullname'}}
                 />
               )}
             </Stack.Screen>

From 0b88cc55f433c851a64037199aa5429e8e16f9ea Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 17:56:22 +0200
Subject: [PATCH 21/68] Add basic field validation

---
 .../core/src/js/feedback/FeedbackFormScreen.tsx  | 16 +++++++++++++++-
 .../src/js/feedback/FeedbackFormScreen.types.ts  |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index c9a984897f..5f4e996c97 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -24,12 +24,21 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
     const { name, email, description } = this.state;
     const { closeScreen, text } = this.props;
 
-    if (!name || !email || !description) {
+    const trimmedName = name?.trim();
+    const trimmedEmail = email?.trim();
+    const trimmedDescription = description?.trim();
+
+    if (!trimmedName || !trimmedEmail || !trimmedDescription) {
       const errorMessage = text?.formError || 'Please fill out all required fields.';
       Alert.alert('Error', errorMessage);
       return;
     }
 
+    if (!this._isValidEmail(trimmedEmail)) {
+      Alert.alert('Error', text?.emailError || 'Please enter a valid email address.');
+      return;
+    }
+
     const userFeedback: SendFeedbackParams = {
       message: description,
       name,
@@ -84,4 +93,9 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
     </View>
     );
   }
+
+  private _isValidEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
 }
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
index 85b36b95d5..ca21d7df8f 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
@@ -14,6 +14,7 @@ export interface FeedbackFormText {
   submitButton?: string;
   cancelButton?: string;
   formError?: string;
+  emailError?: string;
 }
 
 export interface FeedbackFormScreenStyles {

From ae11b8d26b5674654efa02a6fa3fc66390b51de8 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 18:05:41 +0200
Subject: [PATCH 22/68] Adds changelog

---
 CHANGELOG.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66be6a45c1..425182efd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,28 @@
   });
   ```
 
+  - Adds feedback form ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+  You can add the form component in your UI and customise it like:
+  ```jsx
+  import { FeedbackFormScreen } from "@sentry/react-native";
+  ...
+  <FeedbackFormScreen
+    {...props}
+    closeScreen={props.navigation.goBack}
+    styles={{
+      submitButton: {
+        backgroundColor: '#6a1b9a',
+        paddingVertical: 15,
+        borderRadius: 5,
+        alignItems: 'center',
+        marginBottom: 10,
+      },
+    }}
+    text={{namePlaceholder: 'Fullname'}}
+  />
+  ```
+  Check [the documentation](https://docs.sentry.io/platforms/react-native/user-feedback/) for more configuration options.
+
 ### Fixes
 
 - Return `lastEventId` export from `@sentry/core` ([#4315](https://github.com/getsentry/sentry-react-native/pull/4315))

From 7f2ca06b5520cb4a3f2ed31e548f640a381dc8de Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 18:06:27 +0200
Subject: [PATCH 23/68] Updates changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 425182efd5..f056754b1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,7 +25,7 @@
   });
   ```
 
-  - Adds feedback form ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+- Adds feedback form ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
   You can add the form component in your UI and customise it like:
   ```jsx
   import { FeedbackFormScreen } from "@sentry/react-native";

From 064b6c4f6f70b63cc50ce961409e1548b601ec18 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 18:07:18 +0200
Subject: [PATCH 24/68] Updates changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f056754b1d..d946cd5c4e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
   ```
 
 - Adds feedback form ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+
   You can add the form component in your UI and customise it like:
   ```jsx
   import { FeedbackFormScreen } from "@sentry/react-native";

From e21718a28ca072608fc2301af453e1c56d9ab3b4 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 18:47:30 +0200
Subject: [PATCH 25/68] Trim whitespaces from the submitted feedback

---
 packages/core/src/js/feedback/FeedbackFormScreen.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index 5f4e996c97..219225ec08 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -40,9 +40,9 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
     }
 
     const userFeedback: SendFeedbackParams = {
-      message: description,
-      name,
-      email,
+      message: trimmedDescription,
+      name: trimmedName,
+      email: trimmedEmail,
     };
 
     captureFeedback(userFeedback);

From 407f179b425be81ce759868d81d4e81d19705f96 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 2 Dec 2024 19:41:06 +0200
Subject: [PATCH 26/68] Adds tests

---
 .../src/js/feedback/FeedbackFormScreen.tsx    |   5 +-
 .../js/feedback/FeedbackFormScreen.types.ts   |   1 +
 .../test/feedback/FeedbackFormScreen.test.tsx | 111 ++++++++++++++++++
 3 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/test/feedback/FeedbackFormScreen.test.tsx

diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
index 219225ec08..aea2a38fe0 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.tsx
@@ -30,12 +30,13 @@ export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps,
 
     if (!trimmedName || !trimmedEmail || !trimmedDescription) {
       const errorMessage = text?.formError || 'Please fill out all required fields.';
-      Alert.alert('Error', errorMessage);
+      Alert.alert(text?.errorTitle || 'Error', errorMessage);
       return;
     }
 
     if (!this._isValidEmail(trimmedEmail)) {
-      Alert.alert('Error', text?.emailError || 'Please enter a valid email address.');
+      const errorMessage = text?.emailError || 'Please enter a valid email address.';
+      Alert.alert(text?.errorTitle || 'Error', errorMessage);
       return;
     }
 
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
index ca21d7df8f..dbe5ce850b 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
+++ b/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
@@ -13,6 +13,7 @@ export interface FeedbackFormText {
   descriptionPlaceholder?: string;
   submitButton?: string;
   cancelButton?: string;
+  errorTitle?: string;
   formError?: string;
   emailError?: string;
 }
diff --git a/packages/core/test/feedback/FeedbackFormScreen.test.tsx b/packages/core/test/feedback/FeedbackFormScreen.test.tsx
new file mode 100644
index 0000000000..3232186f7b
--- /dev/null
+++ b/packages/core/test/feedback/FeedbackFormScreen.test.tsx
@@ -0,0 +1,111 @@
+import { captureFeedback } from '@sentry/core';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import * as React from 'react';
+import { Alert } from 'react-native';
+
+import { FeedbackFormScreen } from '../../src/js/feedback/FeedbackFormScreen';
+import type { FeedbackFormScreenProps } from '../../src/js/feedback/FeedbackFormScreen.types';
+
+const mockCloseScreen = jest.fn();
+
+jest.spyOn(Alert, 'alert');
+
+jest.mock('@sentry/core', () => ({
+  captureFeedback: jest.fn(),
+}));
+
+const defaultProps: FeedbackFormScreenProps = {
+  closeScreen: mockCloseScreen,
+  text: {
+    formTitle: 'Feedback Form',
+    namePlaceholder: 'Name',
+    emailPlaceholder: 'Email',
+    descriptionPlaceholder: 'Description',
+    submitButton: 'Submit',
+    cancelButton: 'Cancel',
+    errorTitle: 'Error',
+    formError: 'Please fill out all required fields.',
+    emailError: 'The email address is not valid.',
+  },
+};
+
+describe('FeedbackFormScreen', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly', () => {
+    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+
+    expect(getByText(defaultProps.text.formTitle)).toBeTruthy();
+    expect(getByPlaceholderText(defaultProps.text.namePlaceholder)).toBeTruthy();
+    expect(getByPlaceholderText(defaultProps.text.emailPlaceholder)).toBeTruthy();
+    expect(getByPlaceholderText(defaultProps.text.descriptionPlaceholder)).toBeTruthy();
+    expect(getByText(defaultProps.text.submitButton)).toBeTruthy();
+    expect(getByText(defaultProps.text.cancelButton)).toBeTruthy();
+  });
+
+  it('shows an error message if required fields are empty', async () => {
+    const { getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+
+    fireEvent.press(getByText(defaultProps.text.submitButton));
+
+    await waitFor(() => {
+      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.text.errorTitle, defaultProps.text.formError);
+    });
+  });
+
+  it('shows an error message if the email is not valid', async () => {
+    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'not-an-email');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.descriptionPlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.text.submitButton));
+
+    await waitFor(() => {
+      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.text.errorTitle, defaultProps.text.emailError);
+    });
+  });
+
+  it('calls captureFeedback when the form is submitted successfully', async () => {
+    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.descriptionPlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.text.submitButton));
+
+    await waitFor(() => {
+      expect(captureFeedback).toHaveBeenCalledWith({
+        message: 'This is a feedback message.',
+        name: 'John Doe',
+        email: 'john.doe@example.com',
+      });
+    });
+  });
+
+  it('calls closeScreen when the form is submitted successfully', async () => {
+    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.text.descriptionPlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.text.submitButton));
+
+    await waitFor(() => {
+      expect(mockCloseScreen).toHaveBeenCalled();
+    });
+  });
+
+  it('calls closeScreen when the cancel button is pressed', () => {
+    const { getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+
+    fireEvent.press(getByText(defaultProps.text.cancelButton));
+
+    expect(mockCloseScreen).toHaveBeenCalled();
+  });
+});

From ddade0036d6c24513d7942c841b59849f5bc345c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 6 Dec 2024 13:53:21 +0100
Subject: [PATCH 27/68] Renames FeedbackFormScreen to FeedbackForm

---
 CHANGELOG.md                                  |  4 ++--
 ...creen.styles.ts => FeedbackForm.styles.ts} |  0
 ...eedbackFormScreen.tsx => FeedbackForm.tsx} |  8 ++++----
 ...mScreen.types.ts => FeedbackForm.types.ts} |  8 ++++----
 packages/core/src/js/index.ts                 |  2 +-
 ...mScreen.test.tsx => FeedbackForm.test.tsx} | 20 +++++++++----------
 samples/react-native/src/App.tsx              |  4 ++--
 7 files changed, 23 insertions(+), 23 deletions(-)
 rename packages/core/src/js/feedback/{FeedbackFormScreen.styles.ts => FeedbackForm.styles.ts} (100%)
 rename packages/core/src/js/feedback/{FeedbackFormScreen.tsx => FeedbackForm.tsx} (91%)
 rename packages/core/src/js/feedback/{FeedbackFormScreen.types.ts => FeedbackForm.types.ts} (79%)
 rename packages/core/test/feedback/{FeedbackFormScreen.test.tsx => FeedbackForm.test.tsx} (87%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91d3f0f9ce..40dbcec5da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,9 +39,9 @@
 
   You can add the form component in your UI and customise it like:
   ```jsx
-  import { FeedbackFormScreen } from "@sentry/react-native";
+  import { FeedbackForm } from "@sentry/react-native";
   ...
-  <FeedbackFormScreen
+  <FeedbackForm
     {...props}
     closeScreen={props.navigation.goBack}
     styles={{
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
similarity index 100%
rename from packages/core/src/js/feedback/FeedbackFormScreen.styles.ts
rename to packages/core/src/js/feedback/FeedbackForm.styles.ts
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
similarity index 91%
rename from packages/core/src/js/feedback/FeedbackFormScreen.tsx
rename to packages/core/src/js/feedback/FeedbackForm.tsx
index aea2a38fe0..a4e8972be5 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -4,14 +4,14 @@ import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
 import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import defaultStyles from './FeedbackFormScreen.styles';
-import type { FeedbackFormScreenProps, FeedbackFormScreenState } from './FeedbackFormScreen.types';
+import defaultStyles from './FeedbackForm.styles';
+import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
 
 /**
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
-export class FeedbackFormScreen extends React.Component<FeedbackFormScreenProps, FeedbackFormScreenState> {
-  public constructor(props: FeedbackFormScreenProps) {
+export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
+  public constructor(props: FeedbackFormProps) {
     super(props);
     this.state = {
       name: '',
diff --git a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
similarity index 79%
rename from packages/core/src/js/feedback/FeedbackFormScreen.types.ts
rename to packages/core/src/js/feedback/FeedbackForm.types.ts
index dbe5ce850b..7ece6590ac 100644
--- a/packages/core/src/js/feedback/FeedbackFormScreen.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -1,9 +1,9 @@
 import type { TextStyle, ViewStyle } from 'react-native';
 
-export interface FeedbackFormScreenProps {
+export interface FeedbackFormProps {
   closeScreen: () => void;
   text: FeedbackFormText;
-  styles?: FeedbackFormScreenStyles;
+  styles?: FeedbackFormStyles;
 }
 
 export interface FeedbackFormText {
@@ -18,7 +18,7 @@ export interface FeedbackFormText {
   emailError?: string;
 }
 
-export interface FeedbackFormScreenStyles {
+export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
   input?: TextStyle;
@@ -29,7 +29,7 @@ export interface FeedbackFormScreenStyles {
   cancelText?: TextStyle;
 }
 
-export interface FeedbackFormScreenState {
+export interface FeedbackFormState {
   name: string;
   email: string;
   description: string;
diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts
index ba28710da8..5dc78efa45 100644
--- a/packages/core/src/js/index.ts
+++ b/packages/core/src/js/index.ts
@@ -84,4 +84,4 @@ export type { TimeToDisplayProps } from './tracing';
 
 export { Mask, Unmask } from './replay/CustomMask';
 
-export { FeedbackFormScreen } from './feedback/FeedbackFormScreen';
+export { FeedbackForm } from './feedback/FeedbackForm';
diff --git a/packages/core/test/feedback/FeedbackFormScreen.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
similarity index 87%
rename from packages/core/test/feedback/FeedbackFormScreen.test.tsx
rename to packages/core/test/feedback/FeedbackForm.test.tsx
index 3232186f7b..4f26fab428 100644
--- a/packages/core/test/feedback/FeedbackFormScreen.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -3,8 +3,8 @@ import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import * as React from 'react';
 import { Alert } from 'react-native';
 
-import { FeedbackFormScreen } from '../../src/js/feedback/FeedbackFormScreen';
-import type { FeedbackFormScreenProps } from '../../src/js/feedback/FeedbackFormScreen.types';
+import { FeedbackForm } from '../../src/js/feedback/FeedbackForm';
+import type { FeedbackFormProps } from '../../src/js/feedback/FeedbackForm.types';
 
 const mockCloseScreen = jest.fn();
 
@@ -14,7 +14,7 @@ jest.mock('@sentry/core', () => ({
   captureFeedback: jest.fn(),
 }));
 
-const defaultProps: FeedbackFormScreenProps = {
+const defaultProps: FeedbackFormProps = {
   closeScreen: mockCloseScreen,
   text: {
     formTitle: 'Feedback Form',
@@ -29,13 +29,13 @@ const defaultProps: FeedbackFormScreenProps = {
   },
 };
 
-describe('FeedbackFormScreen', () => {
+describe('FeedbackForm', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders correctly', () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
     expect(getByText(defaultProps.text.formTitle)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.text.namePlaceholder)).toBeTruthy();
@@ -46,7 +46,7 @@ describe('FeedbackFormScreen', () => {
   });
 
   it('shows an error message if required fields are empty', async () => {
-    const { getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+    const { getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.press(getByText(defaultProps.text.submitButton));
 
@@ -56,7 +56,7 @@ describe('FeedbackFormScreen', () => {
   });
 
   it('shows an error message if the email is not valid', async () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
     fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'not-an-email');
@@ -70,7 +70,7 @@ describe('FeedbackFormScreen', () => {
   });
 
   it('calls captureFeedback when the form is submitted successfully', async () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
     fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'john.doe@example.com');
@@ -88,7 +88,7 @@ describe('FeedbackFormScreen', () => {
   });
 
   it('calls closeScreen when the form is submitted successfully', async () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
     fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'john.doe@example.com');
@@ -102,7 +102,7 @@ describe('FeedbackFormScreen', () => {
   });
 
   it('calls closeScreen when the cancel button is pressed', () => {
-    const { getByText } = render(<FeedbackFormScreen {...defaultProps} />);
+    const { getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.press(getByText(defaultProps.text.cancelButton));
 
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 4599d5725c..cd2656edcf 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -16,7 +16,7 @@ import Animated, {
 
 // Import the Sentry React Native SDK
 import * as Sentry from '@sentry/react-native';
-import { FeedbackFormScreen } from '@sentry/react-native';
+import { FeedbackForm } from '@sentry/react-native';
 
 import { SENTRY_INTERNAL_DSN } from './dsn';
 import ErrorsScreen from './Screens/ErrorsScreen';
@@ -157,7 +157,7 @@ const ErrorsTabNavigator = Sentry.withProfiler(
               options={{ presentation: 'modal', headerShown: false }}
             >
               {(props) => (
-                <FeedbackFormScreen
+                <FeedbackForm
                   {...props}
                   closeScreen={props.navigation.goBack}
                   styles={{

From 1bc1e4c5cc33a1080f0e0768e8ff221351107fde Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 6 Dec 2024 14:01:34 +0100
Subject: [PATCH 28/68] Add beta label

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

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index a4e8972be5..b36029cc4e 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -8,6 +8,7 @@ import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
 
 /**
+ * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
 export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {

From 793475679677fde090d48686116c7346dde51663 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 6 Dec 2024 14:20:51 +0100
Subject: [PATCH 29/68] Extract default text to constants

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index b36029cc4e..9270227404 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -7,6 +7,16 @@ import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
 
+const defaultFormTitle = 'Feedback Form';
+const defaultNamePlaceholder ='Name';
+const defaultEmailPlaceholder = 'Email';
+const defaultDescriptionPlaceholder = 'Description (required)';
+const defaultSubmitButton = 'Send Feedback';
+const defaultCancelButton = 'Cancel';
+const defaultErrorTitle = 'Error';
+const defaultFormError = 'Please fill out all required fields.';
+const defaultEmailError = 'Please enter a valid email address.';
+
 /**
  * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
@@ -30,14 +40,14 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     const trimmedDescription = description?.trim();
 
     if (!trimmedName || !trimmedEmail || !trimmedDescription) {
-      const errorMessage = text?.formError || 'Please fill out all required fields.';
-      Alert.alert(text?.errorTitle || 'Error', errorMessage);
+      const errorMessage = text?.formError || defaultFormError;
+      Alert.alert(text?.errorTitle || defaultErrorTitle, errorMessage);
       return;
     }
 
     if (!this._isValidEmail(trimmedEmail)) {
-      const errorMessage = text?.emailError || 'Please enter a valid email address.';
-      Alert.alert(text?.errorTitle || 'Error', errorMessage);
+      const errorMessage = text?.emailError || defaultEmailError;
+      Alert.alert(text?.errorTitle || defaultErrorTitle, errorMessage);
       return;
     }
 
@@ -60,18 +70,18 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     return (
     <View style={styles?.container || defaultStyles.container}>
-      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || 'Feedback Form'}</Text>
+      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || defaultFormTitle}</Text>
 
       <TextInput
         style={styles?.input || defaultStyles.input}
-        placeholder={text?.namePlaceholder || 'Name'}
+        placeholder={text?.namePlaceholder || defaultNamePlaceholder}
         value={name}
         onChangeText={(value) => this.setState({ name: value })}
         />
 
       <TextInput
         style={styles?.input || defaultStyles.input}
-        placeholder={text?.emailPlaceholder || 'Email'}
+        placeholder={text?.emailPlaceholder || defaultEmailPlaceholder}
         keyboardType={'email-address' as KeyboardTypeOptions}
         value={email}
         onChangeText={(value) => this.setState({ email: value })}
@@ -79,18 +89,18 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
       <TextInput
         style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
-        placeholder={text?.descriptionPlaceholder || 'Description (required)'}
+        placeholder={text?.descriptionPlaceholder || defaultDescriptionPlaceholder}
         value={description}
         onChangeText={(value) => this.setState({ description: value })}
         multiline
       />
 
       <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={this.handleFeedbackSubmit}>
-        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || 'Send Feedback'}</Text>
+        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || defaultSubmitButton}</Text>
       </TouchableOpacity>
 
       <TouchableOpacity style={styles?.cancelButton || defaultStyles.cancelButton} onPress={closeScreen}>
-        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || 'Cancel'}</Text>
+        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || defaultCancelButton}</Text>
       </TouchableOpacity>
     </View>
     );

From a1693629c72960e611fe49500e1e1a2d79f389e3 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 11:20:06 +0200
Subject: [PATCH 30/68] Moves constant to a separate file and aligns naming
 with JS

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 40 +++++++++----------
 packages/core/src/js/feedback/constants.ts    |  9 +++++
 2 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 packages/core/src/js/feedback/constants.ts

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 9270227404..b110844733 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -4,19 +4,19 @@ import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
 import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
+import {
+  CANCEL_BUTTON_LABEL,
+  EMAIL_ERROR,
+  EMAIL_PLACEHOLDER,
+  ERROR_TITLE,
+  FORM_ERROR,
+  FORM_TITLE,
+  MESSAGE_PLACEHOLDER,
+  NAME_PLACEHOLDER,
+  SUBMIT_BUTTON_LABEL} from './constants';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
 
-const defaultFormTitle = 'Feedback Form';
-const defaultNamePlaceholder ='Name';
-const defaultEmailPlaceholder = 'Email';
-const defaultDescriptionPlaceholder = 'Description (required)';
-const defaultSubmitButton = 'Send Feedback';
-const defaultCancelButton = 'Cancel';
-const defaultErrorTitle = 'Error';
-const defaultFormError = 'Please fill out all required fields.';
-const defaultEmailError = 'Please enter a valid email address.';
-
 /**
  * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
@@ -40,14 +40,14 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     const trimmedDescription = description?.trim();
 
     if (!trimmedName || !trimmedEmail || !trimmedDescription) {
-      const errorMessage = text?.formError || defaultFormError;
-      Alert.alert(text?.errorTitle || defaultErrorTitle, errorMessage);
+      const errorMessage = text?.formError || FORM_ERROR;
+      Alert.alert(text?.errorTitle || ERROR_TITLE, errorMessage);
       return;
     }
 
     if (!this._isValidEmail(trimmedEmail)) {
-      const errorMessage = text?.emailError || defaultEmailError;
-      Alert.alert(text?.errorTitle || defaultErrorTitle, errorMessage);
+      const errorMessage = text?.emailError || EMAIL_ERROR;
+      Alert.alert(text?.errorTitle || ERROR_TITLE, errorMessage);
       return;
     }
 
@@ -70,18 +70,18 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     return (
     <View style={styles?.container || defaultStyles.container}>
-      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || defaultFormTitle}</Text>
+      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || FORM_TITLE}</Text>
 
       <TextInput
         style={styles?.input || defaultStyles.input}
-        placeholder={text?.namePlaceholder || defaultNamePlaceholder}
+        placeholder={text?.namePlaceholder || NAME_PLACEHOLDER}
         value={name}
         onChangeText={(value) => this.setState({ name: value })}
         />
 
       <TextInput
         style={styles?.input || defaultStyles.input}
-        placeholder={text?.emailPlaceholder || defaultEmailPlaceholder}
+        placeholder={text?.emailPlaceholder || EMAIL_PLACEHOLDER}
         keyboardType={'email-address' as KeyboardTypeOptions}
         value={email}
         onChangeText={(value) => this.setState({ email: value })}
@@ -89,18 +89,18 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
       <TextInput
         style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
-        placeholder={text?.descriptionPlaceholder || defaultDescriptionPlaceholder}
+        placeholder={text?.descriptionPlaceholder || MESSAGE_PLACEHOLDER}
         value={description}
         onChangeText={(value) => this.setState({ description: value })}
         multiline
       />
 
       <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={this.handleFeedbackSubmit}>
-        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || defaultSubmitButton}</Text>
+        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || SUBMIT_BUTTON_LABEL}</Text>
       </TouchableOpacity>
 
       <TouchableOpacity style={styles?.cancelButton || defaultStyles.cancelButton} onPress={closeScreen}>
-        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || defaultCancelButton}</Text>
+        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || CANCEL_BUTTON_LABEL}</Text>
       </TouchableOpacity>
     </View>
     );
diff --git a/packages/core/src/js/feedback/constants.ts b/packages/core/src/js/feedback/constants.ts
new file mode 100644
index 0000000000..649cc1f86c
--- /dev/null
+++ b/packages/core/src/js/feedback/constants.ts
@@ -0,0 +1,9 @@
+export const FORM_TITLE = 'Report a Bug';
+export const NAME_PLACEHOLDER = 'Name';
+export const EMAIL_PLACEHOLDER = 'Email';
+export const MESSAGE_PLACEHOLDER = 'Description';
+export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+export const CANCEL_BUTTON_LABEL = 'Cancel';
+export const ERROR_TITLE = 'Error';
+export const FORM_ERROR = 'Please fill out all required fields.';
+export const EMAIL_ERROR = 'Please enter a valid email address.';

From 4b5df7a9312fd8f703f47d5df9ed1aadeb560385 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 12:21:25 +0200
Subject: [PATCH 31/68] Adds input text labels

---
 .../src/js/feedback/FeedbackForm.styles.ts    |  4 +++
 .../core/src/js/feedback/FeedbackForm.tsx     | 25 +++++++++++++++++--
 .../src/js/feedback/FeedbackForm.types.ts     |  5 ++++
 packages/core/src/js/feedback/LabelText.tsx   | 21 ++++++++++++++++
 packages/core/src/js/feedback/constants.ts    | 10 +++++---
 5 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 packages/core/src/js/feedback/LabelText.tsx

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index dbc936c7f3..88dbfd52c8 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -12,6 +12,10 @@ const defaultStyles = StyleSheet.create({
     marginBottom: 20,
     textAlign: 'center',
   },
+  label: {
+    marginBottom: 4,
+    fontSize: 16,
+  },
   input: {
     height: 50,
     borderColor: '#ccc',
diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index b110844733..ba6be6712a 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -7,15 +7,20 @@ import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import {
   CANCEL_BUTTON_LABEL,
   EMAIL_ERROR,
+  EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   ERROR_TITLE,
   FORM_ERROR,
   FORM_TITLE,
+  IS_REQUIRED_LABEL,
+  MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
+  NAME_LABEL,
   NAME_PLACEHOLDER,
   SUBMIT_BUTTON_LABEL} from './constants';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
+import LabelText from './LabelText';
 
 /**
  * @beta
@@ -72,13 +77,24 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     <View style={styles?.container || defaultStyles.container}>
       <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || FORM_TITLE}</Text>
 
+      <LabelText
+          label={text?.nameLabel || NAME_LABEL}
+          isRequired={true}
+          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
+          styles={styles?.label || defaultStyles.label}
+        />
       <TextInput
         style={styles?.input || defaultStyles.input}
         placeholder={text?.namePlaceholder || NAME_PLACEHOLDER}
         value={name}
         onChangeText={(value) => this.setState({ name: value })}
         />
-
+      <LabelText
+          label={text?.emailLabel || EMAIL_LABEL}
+          isRequired={true}
+          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
+          styles={styles?.label || defaultStyles.label}
+        />
       <TextInput
         style={styles?.input || defaultStyles.input}
         placeholder={text?.emailPlaceholder || EMAIL_PLACEHOLDER}
@@ -86,7 +102,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
         value={email}
         onChangeText={(value) => this.setState({ email: value })}
         />
-
+      <LabelText
+          label={text?.descriptionLabel || MESSAGE_LABEL}
+          isRequired={true}
+          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
+          styles={styles?.label || defaultStyles.label}
+        />
       <TextInput
         style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
         placeholder={text?.descriptionPlaceholder || MESSAGE_PLACEHOLDER}
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 7ece6590ac..0316573f18 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -8,9 +8,13 @@ export interface FeedbackFormProps {
 
 export interface FeedbackFormText {
   formTitle?: string;
+  nameLabel?: string;
   namePlaceholder?: string;
+  emailLabel?: string;
   emailPlaceholder?: string;
+  descriptionLabel?: string;
   descriptionPlaceholder?: string;
+  isRequiredLabel?: string;
   submitButton?: string;
   cancelButton?: string;
   errorTitle?: string;
@@ -21,6 +25,7 @@ export interface FeedbackFormText {
 export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
+  label?: TextStyle;
   input?: TextStyle;
   textArea?: ViewStyle;
   submitButton?: ViewStyle;
diff --git a/packages/core/src/js/feedback/LabelText.tsx b/packages/core/src/js/feedback/LabelText.tsx
new file mode 100644
index 0000000000..a03c69b207
--- /dev/null
+++ b/packages/core/src/js/feedback/LabelText.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TextStyle } from 'react-native';
+import { Text } from 'react-native';
+
+interface LabelTextProps {
+  label: string;
+  isRequired: boolean;
+  isRequiredLabel: string;
+  styles: TextStyle;
+}
+
+const LabelText: React.FC<LabelTextProps> = ({ label, isRequired, isRequiredLabel, styles }) => {
+  return (
+    <Text style={styles}>
+      {label}
+      {isRequired && ` ${isRequiredLabel}`}
+    </Text>
+  );
+};
+
+export default LabelText;
diff --git a/packages/core/src/js/feedback/constants.ts b/packages/core/src/js/feedback/constants.ts
index 649cc1f86c..c30d30122f 100644
--- a/packages/core/src/js/feedback/constants.ts
+++ b/packages/core/src/js/feedback/constants.ts
@@ -1,7 +1,11 @@
 export const FORM_TITLE = 'Report a Bug';
-export const NAME_PLACEHOLDER = 'Name';
-export const EMAIL_PLACEHOLDER = 'Email';
-export const MESSAGE_PLACEHOLDER = 'Description';
+export const NAME_PLACEHOLDER = 'Your Name';
+export const NAME_LABEL = 'Name';
+export const EMAIL_PLACEHOLDER = 'your.email@example.org';
+export const EMAIL_LABEL = 'Email';
+export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+export const MESSAGE_LABEL = 'Description';
+export const IS_REQUIRED_LABEL = '(required)';
 export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
 export const CANCEL_BUTTON_LABEL = 'Cancel';
 export const ERROR_TITLE = 'Error';

From 4fa81ce5ea53e0eaa171c15dcda7c6c27b17bc2a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 16:09:21 +0200
Subject: [PATCH 32/68] Close screen before sending the feedback to minimise
 wait time

Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com>
---
 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 ba6be6712a..d103675916 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -62,8 +62,8 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       email: trimmedEmail,
     };
 
-    captureFeedback(userFeedback);
     closeScreen();
+    captureFeedback(userFeedback);
   };
 
   /**

From 4fff82f0a66e7d34ca5191b33c9f29b70e5b7765 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 16:27:29 +0200
Subject: [PATCH 33/68] Rename file for consistency

---
 packages/core/src/js/feedback/FeedbackForm.tsx                  | 2 +-
 .../core/src/js/feedback/{FeedbackForm.types.ts => config.ts}   | 0
 packages/core/test/feedback/FeedbackForm.test.tsx               | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/core/src/js/feedback/{FeedbackForm.types.ts => config.ts} (100%)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index d103675916..8585da1f46 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -19,7 +19,7 @@ import {
   NAME_PLACEHOLDER,
   SUBMIT_BUTTON_LABEL} from './constants';
 import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
+import type { FeedbackFormProps, FeedbackFormState } from './config';
 import LabelText from './LabelText';
 
 /**
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/config.ts
similarity index 100%
rename from packages/core/src/js/feedback/FeedbackForm.types.ts
rename to packages/core/src/js/feedback/config.ts
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 4f26fab428..8887318fb1 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 } from '../../src/js/feedback/FeedbackForm.types';
+import type { FeedbackFormProps } from '../../src/js/feedback/config';
 
 const mockCloseScreen = jest.fn();
 

From 0258bf2c0ac778b1178da01c7b13320a2966225a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 19:09:15 +0200
Subject: [PATCH 34/68] Flatten configuration hierarchy and clean up

---
 .../src/js/feedback/FeedbackForm.styles.ts    |  6 +-
 .../core/src/js/feedback/FeedbackForm.tsx     | 89 +++++++-----------
 .../src/js/feedback/FeedbackForm.types.ts     | 94 +++++++++++++++++++
 packages/core/src/js/feedback/LabelText.tsx   | 21 -----
 packages/core/src/js/feedback/config.ts       | 41 --------
 packages/core/src/js/feedback/constants.ts    | 45 ++++++---
 .../core/test/feedback/FeedbackForm.test.tsx  | 73 +++++++-------
 samples/react-native/src/App.tsx              |  2 +-
 8 files changed, 205 insertions(+), 166 deletions(-)
 create mode 100644 packages/core/src/js/feedback/FeedbackForm.types.ts
 delete mode 100644 packages/core/src/js/feedback/LabelText.tsx
 delete mode 100644 packages/core/src/js/feedback/config.ts

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index 88dbfd52c8..d54fb9cd83 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -1,6 +1,6 @@
-import { StyleSheet } from 'react-native';
+import type { FeedbackFormStyles } from './FeedbackForm.types';
 
-const defaultStyles = StyleSheet.create({
+const defaultStyles: FeedbackFormStyles = {
   container: {
     flex: 1,
     padding: 20,
@@ -49,6 +49,6 @@ const defaultStyles = StyleSheet.create({
     color: '#6a1b9a',
     fontSize: 16,
   },
-});
+};
 
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 8585da1f46..3b68bab6b2 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -4,23 +4,9 @@ import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
 import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import {
-  CANCEL_BUTTON_LABEL,
-  EMAIL_ERROR,
-  EMAIL_LABEL,
-  EMAIL_PLACEHOLDER,
-  ERROR_TITLE,
-  FORM_ERROR,
-  FORM_TITLE,
-  IS_REQUIRED_LABEL,
-  MESSAGE_LABEL,
-  MESSAGE_PLACEHOLDER,
-  NAME_LABEL,
-  NAME_PLACEHOLDER,
-  SUBMIT_BUTTON_LABEL} from './constants';
+import { defaultConfiguration } from './constants';
 import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState } from './config';
-import LabelText from './LabelText';
+import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackTextConfiguration } from './FeedbackForm.types';
 
 /**
  * @beta
@@ -38,21 +24,20 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
-    const { closeScreen, text } = this.props;
+    const { closeScreen } = this.props;
+    const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
 
     const trimmedName = name?.trim();
     const trimmedEmail = email?.trim();
     const trimmedDescription = description?.trim();
 
     if (!trimmedName || !trimmedEmail || !trimmedDescription) {
-      const errorMessage = text?.formError || FORM_ERROR;
-      Alert.alert(text?.errorTitle || ERROR_TITLE, errorMessage);
+      Alert.alert(text.errorTitle, text.formError);
       return;
     }
 
     if (!this._isValidEmail(trimmedEmail)) {
-      const errorMessage = text?.emailError || EMAIL_ERROR;
-      Alert.alert(text?.errorTitle || ERROR_TITLE, errorMessage);
+      Alert.alert(text.errorTitle, text.emailError);
       return;
     }
 
@@ -70,58 +55,56 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
    * Renders the feedback form screen.
    */
   public render(): React.ReactNode {
-    const { closeScreen, text, styles } = this.props;
+    const { closeScreen } = this.props;
     const { name, email, description } = this.state;
+    const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
+    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
 
     return (
-    <View style={styles?.container || defaultStyles.container}>
-      <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || FORM_TITLE}</Text>
-
-      <LabelText
-          label={text?.nameLabel || NAME_LABEL}
-          isRequired={true}
-          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
-          styles={styles?.label || defaultStyles.label}
-        />
+    <View style={styles.container}>
+      <Text style={styles.title}>{text.formTitle}</Text>
+
+      <Text style={styles.label}>
+          {text.nameLabel}
+          {true && ` ${text.isRequiredLabel}`}
+      </Text>
       <TextInput
-        style={styles?.input || defaultStyles.input}
-        placeholder={text?.namePlaceholder || NAME_PLACEHOLDER}
+        style={styles.input}
+        placeholder={text.namePlaceholder}
         value={name}
         onChangeText={(value) => this.setState({ name: value })}
         />
-      <LabelText
-          label={text?.emailLabel || EMAIL_LABEL}
-          isRequired={true}
-          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
-          styles={styles?.label || defaultStyles.label}
-        />
+
+      <Text style={styles.label}>
+          {text.emailLabel}
+          {true && ` ${text.isRequiredLabel}`}
+      </Text>
       <TextInput
-        style={styles?.input || defaultStyles.input}
-        placeholder={text?.emailPlaceholder || EMAIL_PLACEHOLDER}
+        style={styles.input}
+        placeholder={text.emailPlaceholder}
         keyboardType={'email-address' as KeyboardTypeOptions}
         value={email}
         onChangeText={(value) => this.setState({ email: value })}
         />
-      <LabelText
-          label={text?.descriptionLabel || MESSAGE_LABEL}
-          isRequired={true}
-          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
-          styles={styles?.label || defaultStyles.label}
-        />
+
+      <Text style={styles.label}>
+        {text.messageLabel}
+        {true && ` ${text.isRequiredLabel}`}
+      </Text>
       <TextInput
-        style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
-        placeholder={text?.descriptionPlaceholder || MESSAGE_PLACEHOLDER}
+        style={[styles.input, styles.textArea]}
+        placeholder={text.messagePlaceholder}
         value={description}
         onChangeText={(value) => this.setState({ description: value })}
         multiline
       />
 
-      <TouchableOpacity style={styles?.submitButton || defaultStyles.submitButton} onPress={this.handleFeedbackSubmit}>
-        <Text style={styles?.submitText || defaultStyles.submitText}>{text?.submitButton || SUBMIT_BUTTON_LABEL}</Text>
+      <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
+        <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
       </TouchableOpacity>
 
-      <TouchableOpacity style={styles?.cancelButton || defaultStyles.cancelButton} onPress={closeScreen}>
-        <Text style={styles?.cancelText || defaultStyles.cancelText}>{text?.cancelButton || CANCEL_BUTTON_LABEL}</Text>
+      <TouchableOpacity style={styles.cancelButton} onPress={closeScreen}>
+        <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
       </TouchableOpacity>
     </View>
     );
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
new file mode 100644
index 0000000000..bfc958a4cf
--- /dev/null
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -0,0 +1,94 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export interface FeedbackFormProps extends FeedbackTextConfiguration {
+  closeScreen: () => void;
+  styles?: FeedbackFormStyles;
+}
+
+/**
+ * All of the different text labels that can be customized
+ */
+export interface FeedbackTextConfiguration {
+  /**
+   * The label for the Feedback form cancel button that closes dialog
+   */
+  cancelButtonLabel?: string;
+
+  /**
+   * The label for the Feedback form submit button that sends feedback
+   */
+  submitButtonLabel?: string;
+
+  /**
+   * The title of the Feedback form
+   */
+  formTitle?: string;
+
+  /**
+   * Label for the email input
+   */
+  emailLabel?: string;
+
+  /**
+   * Placeholder text for Feedback email input
+   */
+  emailPlaceholder?: string;
+
+  /**
+   * Label for the message input
+   */
+  messageLabel?: string;
+
+  /**
+   * Placeholder text for Feedback message input
+   */
+  messagePlaceholder?: string;
+
+  /**
+   * Label for the name input
+   */
+  nameLabel?: string;
+
+  /**
+   * Placeholder text for Feedback name input
+   */
+  namePlaceholder?: string;
+
+  /**
+   * Text which indicates that a field is required
+   */
+  isRequiredLabel?: string;
+
+  /**
+   * The title of the error dialog
+   */
+  errorTitle?: string;
+
+  /**
+   * The error message when the form is invalid
+   */
+  formError?: string;
+
+  /**
+   * The error message when the email is invalid
+   */
+  emailError?: string;
+}
+
+export interface FeedbackFormStyles {
+  container?: ViewStyle;
+  title?: TextStyle;
+  label?: TextStyle;
+  input?: TextStyle;
+  textArea?: TextStyle;
+  submitButton?: ViewStyle;
+  submitText?: TextStyle;
+  cancelButton?: ViewStyle;
+  cancelText?: TextStyle;
+}
+
+export interface FeedbackFormState {
+  name: string;
+  email: string;
+  description: string;
+}
diff --git a/packages/core/src/js/feedback/LabelText.tsx b/packages/core/src/js/feedback/LabelText.tsx
deleted file mode 100644
index a03c69b207..0000000000
--- a/packages/core/src/js/feedback/LabelText.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import type { TextStyle } from 'react-native';
-import { Text } from 'react-native';
-
-interface LabelTextProps {
-  label: string;
-  isRequired: boolean;
-  isRequiredLabel: string;
-  styles: TextStyle;
-}
-
-const LabelText: React.FC<LabelTextProps> = ({ label, isRequired, isRequiredLabel, styles }) => {
-  return (
-    <Text style={styles}>
-      {label}
-      {isRequired && ` ${isRequiredLabel}`}
-    </Text>
-  );
-};
-
-export default LabelText;
diff --git a/packages/core/src/js/feedback/config.ts b/packages/core/src/js/feedback/config.ts
deleted file mode 100644
index 0316573f18..0000000000
--- a/packages/core/src/js/feedback/config.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { TextStyle, ViewStyle } from 'react-native';
-
-export interface FeedbackFormProps {
-  closeScreen: () => void;
-  text: FeedbackFormText;
-  styles?: FeedbackFormStyles;
-}
-
-export interface FeedbackFormText {
-  formTitle?: string;
-  nameLabel?: string;
-  namePlaceholder?: string;
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  descriptionLabel?: string;
-  descriptionPlaceholder?: string;
-  isRequiredLabel?: string;
-  submitButton?: string;
-  cancelButton?: string;
-  errorTitle?: string;
-  formError?: string;
-  emailError?: string;
-}
-
-export interface FeedbackFormStyles {
-  container?: ViewStyle;
-  title?: TextStyle;
-  label?: TextStyle;
-  input?: TextStyle;
-  textArea?: ViewStyle;
-  submitButton?: ViewStyle;
-  submitText?: TextStyle;
-  cancelButton?: ViewStyle;
-  cancelText?: TextStyle;
-}
-
-export interface FeedbackFormState {
-  name: string;
-  email: string;
-  description: string;
-}
diff --git a/packages/core/src/js/feedback/constants.ts b/packages/core/src/js/feedback/constants.ts
index c30d30122f..19df28885b 100644
--- a/packages/core/src/js/feedback/constants.ts
+++ b/packages/core/src/js/feedback/constants.ts
@@ -1,13 +1,32 @@
-export const FORM_TITLE = 'Report a Bug';
-export const NAME_PLACEHOLDER = 'Your Name';
-export const NAME_LABEL = 'Name';
-export const EMAIL_PLACEHOLDER = 'your.email@example.org';
-export const EMAIL_LABEL = 'Email';
-export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
-export const MESSAGE_LABEL = 'Description';
-export const IS_REQUIRED_LABEL = '(required)';
-export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
-export const CANCEL_BUTTON_LABEL = 'Cancel';
-export const ERROR_TITLE = 'Error';
-export const FORM_ERROR = 'Please fill out all required fields.';
-export const EMAIL_ERROR = 'Please enter a valid email address.';
+import type { FeedbackFormProps } from './FeedbackForm.types';
+
+const FORM_TITLE = 'Report a Bug';
+const NAME_PLACEHOLDER = 'Your Name';
+const NAME_LABEL = 'Name';
+const EMAIL_PLACEHOLDER = 'your.email@example.org';
+const EMAIL_LABEL = 'Email';
+const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+const MESSAGE_LABEL = 'Description';
+const IS_REQUIRED_LABEL = '(required)';
+const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+const CANCEL_BUTTON_LABEL = 'Cancel';
+const ERROR_TITLE = 'Error';
+const FORM_ERROR = 'Please fill out all required fields.';
+const EMAIL_ERROR = 'Please enter a valid email address.';
+
+export const defaultConfiguration: Partial<FeedbackFormProps> = {
+  // FeedbackTextConfiguration
+  cancelButtonLabel: CANCEL_BUTTON_LABEL,
+  emailLabel: EMAIL_LABEL,
+  emailPlaceholder: EMAIL_PLACEHOLDER,
+  formTitle: FORM_TITLE,
+  isRequiredLabel: IS_REQUIRED_LABEL,
+  messageLabel: MESSAGE_LABEL,
+  messagePlaceholder: MESSAGE_PLACEHOLDER,
+  nameLabel: NAME_LABEL,
+  namePlaceholder: NAME_PLACEHOLDER,
+  submitButtonLabel: SUBMIT_BUTTON_LABEL,
+  errorTitle: ERROR_TITLE,
+  formError: FORM_ERROR,
+  emailError: EMAIL_ERROR,
+};
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 8887318fb1..b930c0afc0 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 } from '../../src/js/feedback/config';
+import type { FeedbackFormProps } from '../../src/js/feedback/FeedbackForm.types';
 
 const mockCloseScreen = jest.fn();
 
@@ -16,17 +16,19 @@ jest.mock('@sentry/core', () => ({
 
 const defaultProps: FeedbackFormProps = {
   closeScreen: mockCloseScreen,
-  text: {
-    formTitle: 'Feedback Form',
-    namePlaceholder: 'Name',
-    emailPlaceholder: 'Email',
-    descriptionPlaceholder: 'Description',
-    submitButton: 'Submit',
-    cancelButton: 'Cancel',
-    errorTitle: 'Error',
-    formError: 'Please fill out all required fields.',
-    emailError: 'The email address is not valid.',
-  },
+  formTitle: 'Feedback Form',
+  nameLabel: 'Name',
+  namePlaceholder: 'Name Placeholder',
+  emailLabel: 'Email',
+  emailPlaceholder: 'Email Placeholder',
+  messageLabel: 'Description',
+  messagePlaceholder: 'Description Placeholder',
+  submitButtonLabel: 'Submit',
+  cancelButtonLabel: 'Cancel',
+  isRequiredLabel: '(required)',
+  errorTitle: 'Error',
+  formError: 'Please fill out all required fields.',
+  emailError: 'The email address is not valid.',
 };
 
 describe('FeedbackForm', () => {
@@ -37,46 +39,49 @@ describe('FeedbackForm', () => {
   it('renders correctly', () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
-    expect(getByText(defaultProps.text.formTitle)).toBeTruthy();
-    expect(getByPlaceholderText(defaultProps.text.namePlaceholder)).toBeTruthy();
-    expect(getByPlaceholderText(defaultProps.text.emailPlaceholder)).toBeTruthy();
-    expect(getByPlaceholderText(defaultProps.text.descriptionPlaceholder)).toBeTruthy();
-    expect(getByText(defaultProps.text.submitButton)).toBeTruthy();
-    expect(getByText(defaultProps.text.cancelButton)).toBeTruthy();
+    expect(getByText(defaultProps.formTitle)).toBeTruthy();
+    expect(getByText(`${defaultProps.nameLabel  } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
+    expect(getByPlaceholderText(defaultProps.namePlaceholder)).toBeTruthy();
+    expect(getByText(`${defaultProps.emailLabel } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
+    expect(getByPlaceholderText(defaultProps.emailPlaceholder)).toBeTruthy();
+    expect(getByText(`${defaultProps.messageLabel } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
+    expect(getByPlaceholderText(defaultProps.messagePlaceholder)).toBeTruthy();
+    expect(getByText(defaultProps.submitButtonLabel)).toBeTruthy();
+    expect(getByText(defaultProps.cancelButtonLabel)).toBeTruthy();
   });
 
   it('shows an error message if required fields are empty', async () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);
 
-    fireEvent.press(getByText(defaultProps.text.submitButton));
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
 
     await waitFor(() => {
-      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.text.errorTitle, defaultProps.text.formError);
+      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.errorTitle, defaultProps.formError);
     });
   });
 
   it('shows an error message if the email is not valid', async () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'not-an-email');
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.descriptionPlaceholder), 'This is a feedback message.');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'not-an-email');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
 
-    fireEvent.press(getByText(defaultProps.text.submitButton));
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
 
     await waitFor(() => {
-      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.text.errorTitle, defaultProps.text.emailError);
+      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.errorTitle, defaultProps.emailError);
     });
   });
 
   it('calls captureFeedback when the form is submitted successfully', async () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'john.doe@example.com');
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.descriptionPlaceholder), 'This is a feedback message.');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
 
-    fireEvent.press(getByText(defaultProps.text.submitButton));
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
 
     await waitFor(() => {
       expect(captureFeedback).toHaveBeenCalledWith({
@@ -90,11 +95,11 @@ describe('FeedbackForm', () => {
   it('calls closeScreen when the form is submitted successfully', async () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.namePlaceholder), 'John Doe');
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.emailPlaceholder), 'john.doe@example.com');
-    fireEvent.changeText(getByPlaceholderText(defaultProps.text.descriptionPlaceholder), 'This is a feedback message.');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
 
-    fireEvent.press(getByText(defaultProps.text.submitButton));
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
 
     await waitFor(() => {
       expect(mockCloseScreen).toHaveBeenCalled();
@@ -104,7 +109,7 @@ describe('FeedbackForm', () => {
   it('calls closeScreen when the cancel button is pressed', () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);
 
-    fireEvent.press(getByText(defaultProps.text.cancelButton));
+    fireEvent.press(getByText(defaultProps.cancelButtonLabel));
 
     expect(mockCloseScreen).toHaveBeenCalled();
   });
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index cd2656edcf..054a1ad6ce 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -169,7 +169,7 @@ const ErrorsTabNavigator = Sentry.withProfiler(
                       marginBottom: 10,
                     },
                   }}
-                  text={{namePlaceholder: 'Fullname'}}
+                  namePlaceholder={'Fullname'}
                 />
               )}
             </Stack.Screen>

From 458ebc2afd2a75b95be1b8a16973ee508e6b5a1a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 19:44:51 +0200
Subject: [PATCH 35/68] Align required values with JS

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 14 +++++-----
 .../src/js/feedback/FeedbackForm.types.ts     | 27 ++++++++++++++++++-
 packages/core/src/js/feedback/constants.ts    |  6 +++++
 .../core/test/feedback/FeedbackForm.test.tsx  |  9 ++++---
 4 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 3b68bab6b2..2f9fde5501 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -6,7 +6,7 @@ import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { defaultConfiguration } from './constants';
 import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackTextConfiguration } from './FeedbackForm.types';
+import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
 
 /**
  * @beta
@@ -25,18 +25,19 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
     const { closeScreen } = this.props;
+    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
     const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
 
     const trimmedName = name?.trim();
     const trimmedEmail = email?.trim();
     const trimmedDescription = description?.trim();
 
-    if (!trimmedName || !trimmedEmail || !trimmedDescription) {
+    if ((config.isNameRequired && !trimmedName) || (config.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
       Alert.alert(text.errorTitle, text.formError);
       return;
     }
 
-    if (!this._isValidEmail(trimmedEmail)) {
+    if (config.isEmailRequired && !this._isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
@@ -57,6 +58,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
   public render(): React.ReactNode {
     const { closeScreen } = this.props;
     const { name, email, description } = this.state;
+    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
     const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
 
@@ -66,7 +68,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
       <Text style={styles.label}>
           {text.nameLabel}
-          {true && ` ${text.isRequiredLabel}`}
+          {config.isNameRequired && ` ${text.isRequiredLabel}`}
       </Text>
       <TextInput
         style={styles.input}
@@ -77,7 +79,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
       <Text style={styles.label}>
           {text.emailLabel}
-          {true && ` ${text.isRequiredLabel}`}
+          {config.isEmailRequired && ` ${text.isRequiredLabel}`}
       </Text>
       <TextInput
         style={styles.input}
@@ -89,7 +91,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
       <Text style={styles.label}>
         {text.messageLabel}
-        {true && ` ${text.isRequiredLabel}`}
+        {` ${text.isRequiredLabel}`}
       </Text>
       <TextInput
         style={[styles.input, styles.textArea]}
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index bfc958a4cf..637f9c4274 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -1,10 +1,35 @@
 import type { TextStyle, ViewStyle } from 'react-native';
 
-export interface FeedbackFormProps extends FeedbackTextConfiguration {
+export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration {
   closeScreen: () => void;
   styles?: FeedbackFormStyles;
 }
 
+/**
+ * General feedback configuration
+ */
+export interface FeedbackGeneralConfiguration {
+  /**
+   * Should the email field be required?
+   */
+  isEmailRequired?: boolean;
+
+  /**
+   * Should the name field be required?
+   */
+  isNameRequired?: boolean;
+
+  /**
+   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
+   */
+  showEmail?: boolean;
+
+  /**
+   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
+   */
+  showName?: boolean;
+}
+
 /**
  * All of the different text labels that can be customized
  */
diff --git a/packages/core/src/js/feedback/constants.ts b/packages/core/src/js/feedback/constants.ts
index 19df28885b..5272c7a86c 100644
--- a/packages/core/src/js/feedback/constants.ts
+++ b/packages/core/src/js/feedback/constants.ts
@@ -15,6 +15,12 @@ const FORM_ERROR = 'Please fill out all required fields.';
 const EMAIL_ERROR = 'Please enter a valid email address.';
 
 export const defaultConfiguration: Partial<FeedbackFormProps> = {
+  // FeedbackGeneralConfiguration
+  isEmailRequired: false,
+  isNameRequired: false,
+  showEmail: true,
+  showName: true,
+
   // FeedbackTextConfiguration
   cancelButtonLabel: CANCEL_BUTTON_LABEL,
   emailLabel: EMAIL_LABEL,
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index b930c0afc0..8b309418fe 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -40,9 +40,9 @@ describe('FeedbackForm', () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
     expect(getByText(defaultProps.formTitle)).toBeTruthy();
-    expect(getByText(`${defaultProps.nameLabel  } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
+    expect(getByText(defaultProps.nameLabel)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.namePlaceholder)).toBeTruthy();
-    expect(getByText(`${defaultProps.emailLabel } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
+    expect(getByText(defaultProps.emailLabel)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.emailPlaceholder)).toBeTruthy();
     expect(getByText(`${defaultProps.messageLabel } ${  defaultProps.isRequiredLabel}`)).toBeTruthy();
     expect(getByPlaceholderText(defaultProps.messagePlaceholder)).toBeTruthy();
@@ -60,8 +60,9 @@ describe('FeedbackForm', () => {
     });
   });
 
-  it('shows an error message if the email is not valid', async () => {
-    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+  it('shows an error message if the email is not valid and the email is required', async () => {
+    const withEmailProps = {...defaultProps, ...{isEmailRequired: true}};
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...withEmailProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
     fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'not-an-email');

From f0e1befe7700d8673883304f84a0f7c936c7b77c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 20:22:29 +0200
Subject: [PATCH 36/68] Use Sentry user email and name when set

---
 packages/core/src/js/feedback/FeedbackForm.tsx   |  8 +++++---
 .../core/src/js/feedback/FeedbackForm.types.ts   |  9 +++++++++
 .../js/feedback/{constants.ts => defaults.ts}    |  6 ++++++
 .../core/test/feedback/FeedbackForm.test.tsx     | 16 ++++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)
 rename packages/core/src/js/feedback/{constants.ts => defaults.ts} (87%)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 2f9fde5501..20dc8d37b4 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
 import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
-import { defaultConfiguration } from './constants';
+import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
 
@@ -15,9 +15,11 @@ import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackG
 export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
   public constructor(props: FeedbackFormProps) {
     super(props);
+
+    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...props };
     this.state = {
-      name: '',
-      email: '',
+      name: config.useSentryUser.name,
+      email: config.useSentryUser.email,
       description: '',
     };
   }
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 637f9c4274..146cf3f534 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -28,6 +28,15 @@ export interface FeedbackGeneralConfiguration {
    * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
    */
   showName?: boolean;
+
+  /**
+   * Fill in email/name input fields with Sentry user context if it exists.
+   * The value of the email/name keys represent the properties of your user context.
+   */
+  useSentryUser?: {
+    email: string;
+    name: string;
+  };
 }
 
 /**
diff --git a/packages/core/src/js/feedback/constants.ts b/packages/core/src/js/feedback/defaults.ts
similarity index 87%
rename from packages/core/src/js/feedback/constants.ts
rename to packages/core/src/js/feedback/defaults.ts
index 5272c7a86c..ae210212d6 100644
--- a/packages/core/src/js/feedback/constants.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -1,3 +1,5 @@
+import { getCurrentScope } from '@sentry/core';
+
 import type { FeedbackFormProps } from './FeedbackForm.types';
 
 const FORM_TITLE = 'Report a Bug';
@@ -20,6 +22,10 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   isNameRequired: false,
   showEmail: true,
   showName: true,
+  useSentryUser: {
+    email: getCurrentScope().getUser().email || '',
+    name: getCurrentScope().getUser().name || '',
+  },
 
   // FeedbackTextConfiguration
   cancelButtonLabel: CANCEL_BUTTON_LABEL,
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 8b309418fe..10b1f41c37 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -12,6 +12,12 @@ jest.spyOn(Alert, 'alert');
 
 jest.mock('@sentry/core', () => ({
   captureFeedback: jest.fn(),
+  getCurrentScope: jest.fn(() => ({
+    getUser: jest.fn(() => ({
+      email: 'test@example.com',
+      name: 'Test User',
+    })),
+  })),
 }));
 
 const defaultProps: FeedbackFormProps = {
@@ -50,6 +56,16 @@ describe('FeedbackForm', () => {
     expect(getByText(defaultProps.cancelButtonLabel)).toBeTruthy();
   });
 
+  it('name and email are prefilled when sentry user is set', () => {
+    const { getByPlaceholderText } = render(<FeedbackForm {...defaultProps} />);
+
+    const nameInput = getByPlaceholderText(defaultProps.namePlaceholder);
+    const emailInput = getByPlaceholderText(defaultProps.emailPlaceholder);
+
+    expect(nameInput.props.value).toBe('Test User');
+    expect(emailInput.props.value).toBe('test@example.com');
+  });
+
   it('shows an error message if required fields are empty', async () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);
 

From b9235f2b07cc3bf0cadf9046e0373a15f5594c8b Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 10 Dec 2024 20:41:07 +0200
Subject: [PATCH 37/68] Simplifies email validation

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

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 20dc8d37b4..84b9f3c9cc 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -39,7 +39,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       return;
     }
 
-    if (config.isEmailRequired && !this._isValidEmail(trimmedEmail)) {
+    if ((config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
@@ -115,7 +115,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
   }
 
   private _isValidEmail = (email: string): boolean => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
     return emailRegex.test(email);
   };
 }

From 39a67bd9ee34ef95abcb247021e32526e01821ff Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 11:34:21 +0200
Subject: [PATCH 38/68] Show success alert message

---
 packages/core/src/js/feedback/FeedbackForm.tsx    |  1 +
 .../core/src/js/feedback/FeedbackForm.types.ts    |  5 +++++
 packages/core/src/js/feedback/defaults.ts         |  2 ++
 packages/core/test/feedback/FeedbackForm.test.tsx | 15 +++++++++++++++
 4 files changed, 23 insertions(+)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 84b9f3c9cc..d99d1da13d 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -52,6 +52,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     closeScreen();
     captureFeedback(userFeedback);
+    Alert.alert(text.successMessageText);
   };
 
   /**
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 146cf3f534..8d2d076a4f 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -83,6 +83,11 @@ export interface FeedbackTextConfiguration {
    */
   nameLabel?: string;
 
+  /**
+   * Message after feedback was sent successfully
+   */
+  successMessageText?: string;
+
   /**
    * Placeholder text for Feedback name input
    */
diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index ae210212d6..91d9a32d12 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -15,6 +15,7 @@ const CANCEL_BUTTON_LABEL = 'Cancel';
 const ERROR_TITLE = 'Error';
 const FORM_ERROR = 'Please fill out all required fields.';
 const EMAIL_ERROR = 'Please enter a valid email address.';
+const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 
 export const defaultConfiguration: Partial<FeedbackFormProps> = {
   // FeedbackGeneralConfiguration
@@ -41,4 +42,5 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   errorTitle: ERROR_TITLE,
   formError: FORM_ERROR,
   emailError: EMAIL_ERROR,
+  successMessageText: SUCCESS_MESSAGE_TEXT,
 };
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 10b1f41c37..7809959000 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -35,6 +35,7 @@ const defaultProps: FeedbackFormProps = {
   errorTitle: 'Error',
   formError: 'Please fill out all required fields.',
   emailError: 'The email address is not valid.',
+  successMessageText: 'Feedback success',
 };
 
 describe('FeedbackForm', () => {
@@ -109,6 +110,20 @@ describe('FeedbackForm', () => {
     });
   });
 
+  it('shows success message when the form is submitted successfully', async () => {
+    const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
+
+    fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com');
+    fireEvent.changeText(getByPlaceholderText(defaultProps.messagePlaceholder), 'This is a feedback message.');
+
+    fireEvent.press(getByText(defaultProps.submitButtonLabel));
+
+    await waitFor(() => {
+      expect(Alert.alert).toHaveBeenCalledWith(defaultProps.successMessageText);
+    });
+  });
+
   it('calls closeScreen when the form is submitted successfully', async () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 

From 501a134fea6f6188abf4672e2aa8a67e640b05b1 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 12:26:08 +0200
Subject: [PATCH 39/68] Aligns naming with JS and unmounts the form by default

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 19 +++++++++++++++----
 .../src/js/feedback/FeedbackForm.types.ts     | 14 ++++++++++++--
 packages/core/src/js/feedback/defaults.ts     |  5 +++++
 .../core/test/feedback/FeedbackForm.test.tsx  | 12 ++++++------
 samples/react-native/src/App.tsx              |  2 +-
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index d99d1da13d..bea617b3d9 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -18,6 +18,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...props };
     this.state = {
+      isVisible: true,
       name: config.useSentryUser.name,
       email: config.useSentryUser.email,
       description: '',
@@ -26,7 +27,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
-    const { closeScreen } = this.props;
+    const { onFormClose } = { ...defaultConfiguration, ...this.props };
     const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
     const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
 
@@ -50,7 +51,9 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       email: trimmedEmail,
     };
 
-    closeScreen();
+    onFormClose();
+    this.setState({ isVisible: false });
+
     captureFeedback(userFeedback);
     Alert.alert(text.successMessageText);
   };
@@ -59,11 +62,19 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
    * Renders the feedback form screen.
    */
   public render(): React.ReactNode {
-    const { closeScreen } = this.props;
     const { name, email, description } = this.state;
+    const { onFormClose } = { ...defaultConfiguration, ...this.props };
     const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
     const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
+    const onCancel = (): void => {
+      onFormClose();
+      this.setState({ isVisible: false });
+    }
+
+    if (!this.state.isVisible) {
+      return null;
+    }
 
     return (
     <View style={styles.container}>
@@ -108,7 +119,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
         <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
       </TouchableOpacity>
 
-      <TouchableOpacity style={styles.cancelButton} onPress={closeScreen}>
+      <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
         <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
       </TouchableOpacity>
     </View>
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 8d2d076a4f..aac7a1e1be 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -1,7 +1,6 @@
 import type { TextStyle, ViewStyle } from 'react-native';
 
-export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration {
-  closeScreen: () => void;
+export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
   styles?: FeedbackFormStyles;
 }
 
@@ -114,6 +113,16 @@ export interface FeedbackTextConfiguration {
   emailError?: string;
 }
 
+/**
+ * The public callbacks available for the feedback integration
+ */
+export interface FeedbackCallbacks {
+  /**
+   * Callback when form is closed and not submitted
+   */
+  onFormClose?: () => void;
+}
+
 export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
@@ -127,6 +136,7 @@ export interface FeedbackFormStyles {
 }
 
 export interface FeedbackFormState {
+  isVisible: boolean;
   name: string;
   email: string;
   description: string;
diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index 91d9a32d12..daca7c4f70 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -18,6 +18,11 @@ const EMAIL_ERROR = 'Please enter a valid email address.';
 const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 
 export const defaultConfiguration: Partial<FeedbackFormProps> = {
+  // FeedbackCallbacks
+  onFormClose: () => {
+    // By default the form is just unmounted
+  },
+
   // FeedbackGeneralConfiguration
   isEmailRequired: false,
   isNameRequired: false,
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 7809959000..de7ed90d04 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -6,7 +6,7 @@ import { Alert } from 'react-native';
 import { FeedbackForm } from '../../src/js/feedback/FeedbackForm';
 import type { FeedbackFormProps } from '../../src/js/feedback/FeedbackForm.types';
 
-const mockCloseScreen = jest.fn();
+const mockOnFormClose = jest.fn();
 
 jest.spyOn(Alert, 'alert');
 
@@ -21,7 +21,7 @@ jest.mock('@sentry/core', () => ({
 }));
 
 const defaultProps: FeedbackFormProps = {
-  closeScreen: mockCloseScreen,
+  onFormClose: mockOnFormClose,
   formTitle: 'Feedback Form',
   nameLabel: 'Name',
   namePlaceholder: 'Name Placeholder',
@@ -124,7 +124,7 @@ describe('FeedbackForm', () => {
     });
   });
 
-  it('calls closeScreen when the form is submitted successfully', async () => {
+  it('calls onFormClose when the form is submitted successfully', async () => {
     const { getByPlaceholderText, getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe');
@@ -134,15 +134,15 @@ describe('FeedbackForm', () => {
     fireEvent.press(getByText(defaultProps.submitButtonLabel));
 
     await waitFor(() => {
-      expect(mockCloseScreen).toHaveBeenCalled();
+      expect(mockOnFormClose).toHaveBeenCalled();
     });
   });
 
-  it('calls closeScreen when the cancel button is pressed', () => {
+  it('calls onFormClose when the cancel button is pressed', () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);
 
     fireEvent.press(getByText(defaultProps.cancelButtonLabel));
 
-    expect(mockCloseScreen).toHaveBeenCalled();
+    expect(mockOnFormClose).toHaveBeenCalled();
   });
 });
diff --git a/samples/react-native/src/App.tsx b/samples/react-native/src/App.tsx
index 054a1ad6ce..0e3f0285a8 100644
--- a/samples/react-native/src/App.tsx
+++ b/samples/react-native/src/App.tsx
@@ -159,7 +159,7 @@ const ErrorsTabNavigator = Sentry.withProfiler(
               {(props) => (
                 <FeedbackForm
                   {...props}
-                  closeScreen={props.navigation.goBack}
+                  onFormClose={props.navigation.goBack}
                   styles={{
                     submitButton: {
                       backgroundColor: '#6a1b9a',

From 4b290a219787b50e5cc55c220b4fc25a98ee1dd5 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 12:38:04 +0200
Subject: [PATCH 40/68] Use the minimum config without props in the changelog

---
 CHANGELOG.md | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41a552cc1d..4b113ff7e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,20 +41,7 @@
   ```jsx
   import { FeedbackForm } from "@sentry/react-native";
   ...
-  <FeedbackForm
-    {...props}
-    closeScreen={props.navigation.goBack}
-    styles={{
-      submitButton: {
-        backgroundColor: '#6a1b9a',
-        paddingVertical: 15,
-        borderRadius: 5,
-        alignItems: 'center',
-        marginBottom: 10,
-      },
-    }}
-    text={{namePlaceholder: 'Fullname'}}
-  />
+  <FeedbackForm/>
   ```
   Check [the documentation](https://docs.sentry.io/platforms/react-native/user-feedback/) for more configuration options.
 

From 7109deb3a233891f06c7ac89a87d069bb669139d Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 12:47:44 +0200
Subject: [PATCH 41/68] Adds development not for unimplemented function

---
 packages/core/src/js/feedback/defaults.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index daca7c4f70..5b0360ec47 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -1,4 +1,5 @@
 import { getCurrentScope } from '@sentry/core';
+import { Alert } from 'react-native';
 
 import type { FeedbackFormProps } from './FeedbackForm.types';
 
@@ -20,7 +21,12 @@ const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 export const defaultConfiguration: Partial<FeedbackFormProps> = {
   // FeedbackCallbacks
   onFormClose: () => {
-    // By default the form is just unmounted
+    if (__DEV__) {
+      Alert.alert(
+        'Development note',
+        'onFormClose callback is not implemented. By default the form is just unmounted.',
+      );
+    }
   },
 
   // FeedbackGeneralConfiguration

From c80c5cbf99941e952dfeb6676bd30abaef99762c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 13:12:46 +0200
Subject: [PATCH 42/68] Show email and name conditionally

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index bea617b3d9..6bd8ca3cff 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -80,28 +80,36 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     <View style={styles.container}>
       <Text style={styles.title}>{text.formTitle}</Text>
 
-      <Text style={styles.label}>
+      {config.showName && (
+      <>
+        <Text style={styles.label}>
           {text.nameLabel}
           {config.isNameRequired && ` ${text.isRequiredLabel}`}
-      </Text>
-      <TextInput
-        style={styles.input}
-        placeholder={text.namePlaceholder}
-        value={name}
-        onChangeText={(value) => this.setState({ name: value })}
+        </Text>
+        <TextInput
+          style={styles.input}
+          placeholder={text.namePlaceholder}
+          value={name}
+          onChangeText={(value) => this.setState({ name: value })}
         />
+      </>
+      )}
 
-      <Text style={styles.label}>
+      {config.showEmail && (
+      <>
+        <Text style={styles.label}>
           {text.emailLabel}
           {config.isEmailRequired && ` ${text.isRequiredLabel}`}
-      </Text>
-      <TextInput
-        style={styles.input}
-        placeholder={text.emailPlaceholder}
-        keyboardType={'email-address' as KeyboardTypeOptions}
-        value={email}
-        onChangeText={(value) => this.setState({ email: value })}
+        </Text>
+        <TextInput
+          style={styles.input}
+          placeholder={text.emailPlaceholder}
+          keyboardType={'email-address' as KeyboardTypeOptions}
+          value={email}
+          onChangeText={(value) => this.setState({ email: value })}
         />
+      </>
+      )}
 
       <Text style={styles.label}>
         {text.messageLabel}

From 8c5675351db5dce4f3b0981d9005e748fc66da89 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 14:14:49 +0200
Subject: [PATCH 43/68] Adds sentry branding (png logo)

---
 .../src/js/feedback/FeedbackForm.styles.ts     | 11 ++++++++++-
 packages/core/src/js/feedback/FeedbackForm.tsx |  9 +++++++--
 .../core/src/js/feedback/FeedbackForm.types.ts | 18 +++++++++++++++++-
 packages/core/src/js/feedback/defaults.ts      |  1 +
 .../core/test/feedback/FeedbackForm.test.tsx   |  1 +
 5 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index d54fb9cd83..c3bb293051 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -10,7 +10,8 @@ const defaultStyles: FeedbackFormStyles = {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 20,
-    textAlign: 'center',
+    textAlign: 'left',
+    flex: 1,
   },
   label: {
     marginBottom: 4,
@@ -49,6 +50,14 @@ const defaultStyles: FeedbackFormStyles = {
     color: '#6a1b9a',
     fontSize: 16,
   },
+  titleContainer: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  sentryLogo: {
+    width: 40,
+    height: 40,
+  },
 };
 
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 6bd8ca3cff..1259c19e6c 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -2,7 +2,7 @@ import { captureFeedback } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
-import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Alert, Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
@@ -78,7 +78,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     return (
     <View style={styles.container}>
-      <Text style={styles.title}>{text.formTitle}</Text>
+      <View style={styles.titleContainer}>
+          <Text style={styles.title}>{text.formTitle}</Text>
+          {config.showBranding && (
+            <Image source={require('../../../assets/sentrylogo.png')} style={styles.sentryLogo} />
+          )}
+      </View>
 
       {config.showName && (
       <>
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index aac7a1e1be..7a900f3d49 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -1,5 +1,8 @@
-import type { TextStyle, ViewStyle } from 'react-native';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 
+/**
+ * The props for the feedback form
+ */
 export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
   styles?: FeedbackFormStyles;
 }
@@ -8,6 +11,11 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac
  * General feedback configuration
  */
 export interface FeedbackGeneralConfiguration {
+  /**
+   * Show the Sentry branding
+   */
+  showBranding?: boolean;
+
   /**
    * Should the email field be required?
    */
@@ -123,6 +131,9 @@ export interface FeedbackCallbacks {
   onFormClose?: () => void;
 }
 
+/**
+ * The styles for the feedback form
+ */
 export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
@@ -133,8 +144,13 @@ export interface FeedbackFormStyles {
   submitText?: TextStyle;
   cancelButton?: ViewStyle;
   cancelText?: TextStyle;
+  titleContainer?: ViewStyle;
+  sentryLogo?: ImageStyle;
 }
 
+/**
+ * The state of the feedback form
+ */
 export interface FeedbackFormState {
   isVisible: boolean;
   name: string;
diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index 5b0360ec47..94a5036512 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -30,6 +30,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   },
 
   // FeedbackGeneralConfiguration
+  showBranding: true,
   isEmailRequired: false,
   isNameRequired: false,
   showEmail: true,
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index de7ed90d04..a088216fcb 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -36,6 +36,7 @@ const defaultProps: FeedbackFormProps = {
   formError: 'Please fill out all required fields.',
   emailError: 'The email address is not valid.',
   successMessageText: 'Feedback success',
+  showBranding: false,
 };
 
 describe('FeedbackForm', () => {

From d6e9229430c70808d2f30279cc0f63e7daab0a82 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 14:20:57 +0200
Subject: [PATCH 44/68] Adds sentry logo resource

---
 packages/core/assets/sentrylogo.png | Bin 0 -> 3476 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/core/assets/sentrylogo.png

diff --git a/packages/core/assets/sentrylogo.png b/packages/core/assets/sentrylogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..610c3e0ff0ae9cf4e8075bd17570270458c0c2a4
GIT binary patch
literal 3476
zcmcha`8(9#`^R7Nni<Aenq-MAFI$DYF(c(2HDeuF-qw-9NR2HjTe1`{OG3qvgd~Q>
zI>^42En8xwY)Mf<NQvRyqCWGzuJ51lxjsLf^SG}2oO7RZ-S_$7`Ao90HWS85V*vmV
zHYXd~@z~EBO&C7j%!(*<=K&FHXJ!ag4$FMvZL&5uCOL%BKHs+rl{q3BUmhYiXu(-E
zZRzR1n-(TD*jVl5?dSVl-#*HuZ0SsGtMu;g$b1}idG5gOY<DkkMtRZvPZ2EERN8Uq
z{Qr>+1GXXL7$h2%*ky#p;Cf)OSuq>*T*%7`k{Aw(J4)@F=P~y}&f!E5q~pw1vT{K%
z{-sqdpDhs<dha89+nxvqwD^ugSPX+C!#*3t%VK?GNZJ^Iz$X@7vb07Zx<0X-;|@YZ
zzQDSa0ab{2bVkPyheq{7DdXCDXcVUSo|iBa2Be<8_<Mgb4E(n*U%;=tJMn9K2G5b7
z=*jerXmk(BV`&cR|GBu+UKRcO+kmH$2B;1ZPY<l_(bf8^;HYbOo;)hqEiwd+h*k5F
z`BT*>9~IXTW=laO*+zx605K{b4rI;#`{eWMh@JJ%8<B6ZL&m%!B~lX}$p!dN3yQ`m
zb(DfAv71uAU#6aj&dL0^j$h;c!w6FiZ%Y9L#`VCIq4^_&-+phmN9~ASi7&V-33aah
z`Skg^$~i&Dw1b|1oSk6QIT>ezyrJ=pi~0P;<}m8nK4*h1ukx|vU?w0inprBxd5{+;
z8BtFqS?4;C3^P1uC!G*0zZgcsEhTDX_`@7Wzw(XJ$YBQ)P^J|7UQ_M%PJ7hPUuw4O
zcN0JU=>JJLRnm%KQl?HhGVu44%{nDF;+zg@PA1=)=y2k-urHs8Y$?((bYYuwo}|c)
zsmwT9a+V)Su_%LMCST8#LDlq$1NmdfflVKA)ly6AzT-Q1@M&j{mdwgO0<`9=cX$)W
zr=8~WqF}t(g%cXg`W79*Yc{;lqlkt28;N{tElPF<TM|sR#Axr-ouiA`GRU;u%VC$>
z<SlEwr6k0+KD#{k6?KEMyPnF&U*7Y+CvGl_HSpo~1-HrY2igQj(%vzauOXp%@hWi5
z-Z4I;Mh$a7Mmj(9#&-=tTcSakWHIGktpf@3$CLKl;KV);cMc}WnqUIMmB!^}^vF2M
zZjSD*4EFRKhzfBN95doP$$u%-jmAK7R0BL-_nbZ51X;A|RRXAnh)XB#mfUb*F&(WW
zw+xF{#LHa|>R<?EeO?CGsxor(J4X_>&Jd|p8{xmO(nXskpGgE%aqN%F1%i<=NMR#X
zzwCO}@_JKI_jaXCJJZpaJ%05Xx<AHLM`k)_fUy)w-A2mEDiB4)j0oR`9*UAk1r%{T
zQ&afO$n}BV>vjhW!MOWA`*J${QY9hV%M8Dj{b)sG<CEe`1~?SiBiYd9ZlNdPc!|BZ
zYRKw+4-ob0g>c5~xh{t^p#V~I`7TK)UN9mCRc|l3HPHzXF~kN{AAmNa)|8$vA5@my
zwwVrS12xuMSQ#H&$fgu&n3k6FT3}t{LP`>{<kkCtAdc4RL|`*21WoIX`iLjhblWc1
zJw%b=R{_0Gsue)dSFHYI2`GFr9aJV${SL4Hp0#$258nI=SH%3{a@>yxev{?Y5Jl5E
zZ6g)^6G!xdh6)f<px4ih!QJ`!q~^<^#xRpjxmESqj8DI1YZ7kTscyp^S|SLr9#5@)
zONf8e(>h}mSGVx52SV@pDk5JiMhcx&M%D{50`1;xp<s}Ik)Xo+!GirA((5%8ITqIx
z%Q*HrvhnCjs0Pt4SNX}xo&uxC)tc|Zj}k{Z!ZJsjb94{`A7xjq-`qT9(u+h1CHGtC
z3nn?`GY8H*Rl|!xK15fGlDDKT;(K3YTYIpI#>LR(n=*np3vSb9s(rqe<bs*K+S(V#
z&gFRhh7~P1%puijlp<vJ4|zoGy>n-Ez>vHF3Q`C-+P+qO=c&>?LS*FXJ^8hNQ_ceK
zr>Jf(Ce;h^(8TL$KX-k4uy?K;ZvWC=$uP8#XO(^V^#&?!8#4V;p|{Ad+!V1Y`w=Z5
zQ(}F>r>BnU{U>j{6cJOqu75(G?^n$gIw6B!*)l(3b@0lwFZG(`mp9v9f?cSoOyTV2
zw|C-eIt#|mY#D4^+o^-K#y)%-guhB3JE@OXuWdK0W@_a1ITxxUT7Rn|Jirx-=1@hw
zUbj-fIdpl{gYnyv905#(cKgemSMf!Z!MMCBC8=uX<3Vpf0VG+M9}WYk<=PK7FC#ZC
zX`RWGDmx7&<m<@K8wilHYd(7vOyXX!Q96~qLFIgsogL>|qcJ(Y**E)8Lkr3lU$uTJ
zetm~k7PG8c_7wK7`d*AcC7jLKuM20L-iey~`K_;!^Tm0wp!1nBY%!fxOBF?wTfJ%v
zL}<Si%<2e_keG{Z$ep@v1^$GMZgaBB`c;9_kHr0_*^GSedf+=K`t`zM{Y3}QgKpb0
zaQ<-ckF`-XykOEpVbY1huO*7l^$fN&gy%~FXON)xtH<dHp?#yVr@kl!RR4W{&tv5M
zg0W?J95bS=U-wR|cYUXw$;fGL|AJOlFTvCiO`oYmXgj9DCu8~8D&5S^b1{LMjtf$0
z#1!f2!%+D_8sk*#rC<^1x^cl{q7`zBXTP}80!&E(br-f_|LYq-k5b~^W0Qbk41K#<
z2->_U*D?-&`04g&d|dk{bGWsxt2>+Q)kvF6lhjD9Js(lvy~>^1))A-6FZp=gf>8pl
zgV$uOFmiXfX;ij7_<l50%Dr)<qn>^lWm=`{H@26pm`Ui}+_&vya2Q&!XxlBS15eJH
zY^@8~vFvKS+vJ~VD_QTtOpEvjxyU5*;r6vH9nU1VB`AQ!+$Z939qVOAfZd+|KjcAb
z6F*75;eGY>Z~}cVacSai@dFE1J1fQOa;PR<J~Z_n{OjM11Dj4N;RX`MNP-OX{Nrd2
zm$CX}tp~LWO#C>uN+B}6HxqQQ843te+`xz9v2_Yk=OtSE*hIPxw?P3+UqFP5{T{k^
znHJp<v?ndFL}f)mDszTkZ%=EVEl$yU^<&pt9jNNKh1T&_+TW5p6<wp}6gmeRh*FU<
zh}bnw9)W51hFa@Oyx^s5X0w-^bqtKy_8{n|_b5?wEe!}nUkOH}VJ#xW%0an=TBW!h
zGX3D4efLgF|J6a};v}5$8_F;`>_J5~BtxCu^sxCuwlJg{rVks(j?&SjntUhu8*2l6
zl6GwT)@kUF0C_%F!+mlZRa6(@pBGf3xFj2c-ZNBb`Oq+yfW>X*R^+KvQ+svzF*ySU
z(Zj$cwSBHH5I1w<*mf$U>$$aKYNKM1mdt$dFzw=Z{{RKVb7g>jbxTMEhC=nL7GDWx
zOgiCN8bq~vN@RgeG2Rh16(@XpUK{rPa5C0U_NC#ddOi1blNaD?PA)p^a~Mt|Xfc#X
z*C$7*<zpg{utVz5Cvt-OqL$QN0qOm4T6}j!DiFIoHG1u_01@Zyb+uYdwu3yP<%o5D
z(7Xu2TAK0Cvu*F4>~-QtCB!|SR5`QS$BPadgH1hLTZ6QX3w~x!4e5kUe)6a~|MJL^
z?hWVmP3ACgO4Rl4*%5k{=fn%=GB6g~yY=%X;Y9;H5K6vt21uekcu_C*no>q~hm{>u
zhx9NVLJ)6Z{Nirh{Bw;qpD{Ely!m9p*-IktEm^X}ac>}rFSiu(@f=>0{)_WU7_x+`
zMc#1K&kHaS9<&@P8f7k2|KLhF0!(r!i124X=ds8@bpYSsB5G4tDKWhjjP93JDU_YU
zLYCKRPzrW4HRo4EaICA3j$S+=SsG#~VG0<#*WjjW<7{9tV;|qGE3|WY^4QEvvUttG
zXr3-~syp}ss|Z(+T<LvLBQ;kJWp^tVh<BvdYxW)5`1R=2%V*KOZ0e2rWIkk9m{PC^
z0+V5m<a7aG=lN<`c5VWjX2r&mGduEPW!XKbY(Q^Iq_DKOy&MF&{dvVA)Ej{;p!tIk
zQ!TQkQ4Lxl4Lg{i61{znvmI+6Q@5)``m@Utfk3{ZAg&L{=o|cdeP!dm+gwd95SX^^
zo5nZm!^fy4DiU)6UsMVU&_gPNPZ5lSSsxLG)mxg&Ux+Sb&AB6*gWX@EcYa)R?}_%}
zTKssCMzP8Nr)Gy6LlJ`*uBp+l*R(B;V0uH-S%}X0@g;xsWK~W@Xahy{g6{!hP2tI(
zmmb2vr)O?>T^9r*o!zvxauR_Uz0*qfZva7Mm%z^xcR;X6{qn%1KN>}Dc>lUeokyp&
z^hZ-X1K{6N@6J<?jLJ7EXKTfA&{VQtdnHdAyER+%dhsN7jrc^A8_xl>1l_$kL?Oa-
v^~#+VJ0cwN@h_=+JTEdpas6LDVD_Sl@H65iiOK6cn+2GgSQ}Rwo{s$wBV{oh

literal 0
HcmV?d00001


From 529247542a10e501e18b76e53e2933c7772d2d06 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 15:37:23 +0200
Subject: [PATCH 45/68] Add assets in module exports

---
 packages/core/react-native.config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/react-native.config.js b/packages/core/react-native.config.js
index d307073e1a..fe07b4e15a 100644
--- a/packages/core/react-native.config.js
+++ b/packages/core/react-native.config.js
@@ -7,5 +7,6 @@ module.exports = {
         packageImportPath: 'import io.sentry.react.RNSentryPackage;'
       }
     }
-  }
+  },
+  assets: ['./assets/'],
 };

From efd809f6f03a92b659653faeaad6516d5d1a18fc Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 16:36:21 +0200
Subject: [PATCH 46/68] Revert "Add assets in module exports"

This reverts commit 529247542a10e501e18b76e53e2933c7772d2d06.
---
 packages/core/react-native.config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/core/react-native.config.js b/packages/core/react-native.config.js
index fe07b4e15a..d307073e1a 100644
--- a/packages/core/react-native.config.js
+++ b/packages/core/react-native.config.js
@@ -7,6 +7,5 @@ module.exports = {
         packageImportPath: 'import io.sentry.react.RNSentryPackage;'
       }
     }
-  },
-  assets: ['./assets/'],
+  }
 };

From bc7ae659b1f825ada1c5e3ec2aea8ad7a6e7c233 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 16:36:35 +0200
Subject: [PATCH 47/68] Revert "Adds sentry logo resource"

This reverts commit d6e9229430c70808d2f30279cc0f63e7daab0a82.
---
 packages/core/assets/sentrylogo.png | Bin 3476 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 packages/core/assets/sentrylogo.png

diff --git a/packages/core/assets/sentrylogo.png b/packages/core/assets/sentrylogo.png
deleted file mode 100644
index 610c3e0ff0ae9cf4e8075bd17570270458c0c2a4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3476
zcmcha`8(9#`^R7Nni<Aenq-MAFI$DYF(c(2HDeuF-qw-9NR2HjTe1`{OG3qvgd~Q>
zI>^42En8xwY)Mf<NQvRyqCWGzuJ51lxjsLf^SG}2oO7RZ-S_$7`Ao90HWS85V*vmV
zHYXd~@z~EBO&C7j%!(*<=K&FHXJ!ag4$FMvZL&5uCOL%BKHs+rl{q3BUmhYiXu(-E
zZRzR1n-(TD*jVl5?dSVl-#*HuZ0SsGtMu;g$b1}idG5gOY<DkkMtRZvPZ2EERN8Uq
z{Qr>+1GXXL7$h2%*ky#p;Cf)OSuq>*T*%7`k{Aw(J4)@F=P~y}&f!E5q~pw1vT{K%
z{-sqdpDhs<dha89+nxvqwD^ugSPX+C!#*3t%VK?GNZJ^Iz$X@7vb07Zx<0X-;|@YZ
zzQDSa0ab{2bVkPyheq{7DdXCDXcVUSo|iBa2Be<8_<Mgb4E(n*U%;=tJMn9K2G5b7
z=*jerXmk(BV`&cR|GBu+UKRcO+kmH$2B;1ZPY<l_(bf8^;HYbOo;)hqEiwd+h*k5F
z`BT*>9~IXTW=laO*+zx605K{b4rI;#`{eWMh@JJ%8<B6ZL&m%!B~lX}$p!dN3yQ`m
zb(DfAv71uAU#6aj&dL0^j$h;c!w6FiZ%Y9L#`VCIq4^_&-+phmN9~ASi7&V-33aah
z`Skg^$~i&Dw1b|1oSk6QIT>ezyrJ=pi~0P;<}m8nK4*h1ukx|vU?w0inprBxd5{+;
z8BtFqS?4;C3^P1uC!G*0zZgcsEhTDX_`@7Wzw(XJ$YBQ)P^J|7UQ_M%PJ7hPUuw4O
zcN0JU=>JJLRnm%KQl?HhGVu44%{nDF;+zg@PA1=)=y2k-urHs8Y$?((bYYuwo}|c)
zsmwT9a+V)Su_%LMCST8#LDlq$1NmdfflVKA)ly6AzT-Q1@M&j{mdwgO0<`9=cX$)W
zr=8~WqF}t(g%cXg`W79*Yc{;lqlkt28;N{tElPF<TM|sR#Axr-ouiA`GRU;u%VC$>
z<SlEwr6k0+KD#{k6?KEMyPnF&U*7Y+CvGl_HSpo~1-HrY2igQj(%vzauOXp%@hWi5
z-Z4I;Mh$a7Mmj(9#&-=tTcSakWHIGktpf@3$CLKl;KV);cMc}WnqUIMmB!^}^vF2M
zZjSD*4EFRKhzfBN95doP$$u%-jmAK7R0BL-_nbZ51X;A|RRXAnh)XB#mfUb*F&(WW
zw+xF{#LHa|>R<?EeO?CGsxor(J4X_>&Jd|p8{xmO(nXskpGgE%aqN%F1%i<=NMR#X
zzwCO}@_JKI_jaXCJJZpaJ%05Xx<AHLM`k)_fUy)w-A2mEDiB4)j0oR`9*UAk1r%{T
zQ&afO$n}BV>vjhW!MOWA`*J${QY9hV%M8Dj{b)sG<CEe`1~?SiBiYd9ZlNdPc!|BZ
zYRKw+4-ob0g>c5~xh{t^p#V~I`7TK)UN9mCRc|l3HPHzXF~kN{AAmNa)|8$vA5@my
zwwVrS12xuMSQ#H&$fgu&n3k6FT3}t{LP`>{<kkCtAdc4RL|`*21WoIX`iLjhblWc1
zJw%b=R{_0Gsue)dSFHYI2`GFr9aJV${SL4Hp0#$258nI=SH%3{a@>yxev{?Y5Jl5E
zZ6g)^6G!xdh6)f<px4ih!QJ`!q~^<^#xRpjxmESqj8DI1YZ7kTscyp^S|SLr9#5@)
zONf8e(>h}mSGVx52SV@pDk5JiMhcx&M%D{50`1;xp<s}Ik)Xo+!GirA((5%8ITqIx
z%Q*HrvhnCjs0Pt4SNX}xo&uxC)tc|Zj}k{Z!ZJsjb94{`A7xjq-`qT9(u+h1CHGtC
z3nn?`GY8H*Rl|!xK15fGlDDKT;(K3YTYIpI#>LR(n=*np3vSb9s(rqe<bs*K+S(V#
z&gFRhh7~P1%puijlp<vJ4|zoGy>n-Ez>vHF3Q`C-+P+qO=c&>?LS*FXJ^8hNQ_ceK
zr>Jf(Ce;h^(8TL$KX-k4uy?K;ZvWC=$uP8#XO(^V^#&?!8#4V;p|{Ad+!V1Y`w=Z5
zQ(}F>r>BnU{U>j{6cJOqu75(G?^n$gIw6B!*)l(3b@0lwFZG(`mp9v9f?cSoOyTV2
zw|C-eIt#|mY#D4^+o^-K#y)%-guhB3JE@OXuWdK0W@_a1ITxxUT7Rn|Jirx-=1@hw
zUbj-fIdpl{gYnyv905#(cKgemSMf!Z!MMCBC8=uX<3Vpf0VG+M9}WYk<=PK7FC#ZC
zX`RWGDmx7&<m<@K8wilHYd(7vOyXX!Q96~qLFIgsogL>|qcJ(Y**E)8Lkr3lU$uTJ
zetm~k7PG8c_7wK7`d*AcC7jLKuM20L-iey~`K_;!^Tm0wp!1nBY%!fxOBF?wTfJ%v
zL}<Si%<2e_keG{Z$ep@v1^$GMZgaBB`c;9_kHr0_*^GSedf+=K`t`zM{Y3}QgKpb0
zaQ<-ckF`-XykOEpVbY1huO*7l^$fN&gy%~FXON)xtH<dHp?#yVr@kl!RR4W{&tv5M
zg0W?J95bS=U-wR|cYUXw$;fGL|AJOlFTvCiO`oYmXgj9DCu8~8D&5S^b1{LMjtf$0
z#1!f2!%+D_8sk*#rC<^1x^cl{q7`zBXTP}80!&E(br-f_|LYq-k5b~^W0Qbk41K#<
z2->_U*D?-&`04g&d|dk{bGWsxt2>+Q)kvF6lhjD9Js(lvy~>^1))A-6FZp=gf>8pl
zgV$uOFmiXfX;ij7_<l50%Dr)<qn>^lWm=`{H@26pm`Ui}+_&vya2Q&!XxlBS15eJH
zY^@8~vFvKS+vJ~VD_QTtOpEvjxyU5*;r6vH9nU1VB`AQ!+$Z939qVOAfZd+|KjcAb
z6F*75;eGY>Z~}cVacSai@dFE1J1fQOa;PR<J~Z_n{OjM11Dj4N;RX`MNP-OX{Nrd2
zm$CX}tp~LWO#C>uN+B}6HxqQQ843te+`xz9v2_Yk=OtSE*hIPxw?P3+UqFP5{T{k^
znHJp<v?ndFL}f)mDszTkZ%=EVEl$yU^<&pt9jNNKh1T&_+TW5p6<wp}6gmeRh*FU<
zh}bnw9)W51hFa@Oyx^s5X0w-^bqtKy_8{n|_b5?wEe!}nUkOH}VJ#xW%0an=TBW!h
zGX3D4efLgF|J6a};v}5$8_F;`>_J5~BtxCu^sxCuwlJg{rVks(j?&SjntUhu8*2l6
zl6GwT)@kUF0C_%F!+mlZRa6(@pBGf3xFj2c-ZNBb`Oq+yfW>X*R^+KvQ+svzF*ySU
z(Zj$cwSBHH5I1w<*mf$U>$$aKYNKM1mdt$dFzw=Z{{RKVb7g>jbxTMEhC=nL7GDWx
zOgiCN8bq~vN@RgeG2Rh16(@XpUK{rPa5C0U_NC#ddOi1blNaD?PA)p^a~Mt|Xfc#X
z*C$7*<zpg{utVz5Cvt-OqL$QN0qOm4T6}j!DiFIoHG1u_01@Zyb+uYdwu3yP<%o5D
z(7Xu2TAK0Cvu*F4>~-QtCB!|SR5`QS$BPadgH1hLTZ6QX3w~x!4e5kUe)6a~|MJL^
z?hWVmP3ACgO4Rl4*%5k{=fn%=GB6g~yY=%X;Y9;H5K6vt21uekcu_C*no>q~hm{>u
zhx9NVLJ)6Z{Nirh{Bw;qpD{Ely!m9p*-IktEm^X}ac>}rFSiu(@f=>0{)_WU7_x+`
zMc#1K&kHaS9<&@P8f7k2|KLhF0!(r!i124X=ds8@bpYSsB5G4tDKWhjjP93JDU_YU
zLYCKRPzrW4HRo4EaICA3j$S+=SsG#~VG0<#*WjjW<7{9tV;|qGE3|WY^4QEvvUttG
zXr3-~syp}ss|Z(+T<LvLBQ;kJWp^tVh<BvdYxW)5`1R=2%V*KOZ0e2rWIkk9m{PC^
z0+V5m<a7aG=lN<`c5VWjX2r&mGduEPW!XKbY(Q^Iq_DKOy&MF&{dvVA)Ej{;p!tIk
zQ!TQkQ4Lxl4Lg{i61{znvmI+6Q@5)``m@Utfk3{ZAg&L{=o|cdeP!dm+gwd95SX^^
zo5nZm!^fy4DiU)6UsMVU&_gPNPZ5lSSsxLG)mxg&Ux+Sb&AB6*gWX@EcYa)R?}_%}
zTKssCMzP8Nr)Gy6LlJ`*uBp+l*R(B;V0uH-S%}X0@g;xsWK~W@Xahy{g6{!hP2tI(
zmmb2vr)O?>T^9r*o!zvxauR_Uz0*qfZva7Mm%z^xcR;X6{qn%1KN>}Dc>lUeokyp&
z^hZ-X1K{6N@6J<?jLJ7EXKTfA&{VQtdnHdAyER+%dhsN7jrc^A8_xl>1l_$kL?Oa-
v^~#+VJ0cwN@h_=+JTEdpas6LDVD_Sl@H65iiOK6cn+2GgSQ}Rwo{s$wBV{oh


From 79ee5ba69c7e752556089754f96c31e6690b5f32 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 16:36:45 +0200
Subject: [PATCH 48/68] Revert "Adds sentry branding (png logo)"

This reverts commit 8c5675351db5dce4f3b0981d9005e748fc66da89.
---
 .../src/js/feedback/FeedbackForm.styles.ts     | 11 +----------
 packages/core/src/js/feedback/FeedbackForm.tsx |  9 ++-------
 .../core/src/js/feedback/FeedbackForm.types.ts | 18 +-----------------
 packages/core/src/js/feedback/defaults.ts      |  1 -
 .../core/test/feedback/FeedbackForm.test.tsx   |  1 -
 5 files changed, 4 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index c3bb293051..d54fb9cd83 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -10,8 +10,7 @@ const defaultStyles: FeedbackFormStyles = {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 20,
-    textAlign: 'left',
-    flex: 1,
+    textAlign: 'center',
   },
   label: {
     marginBottom: 4,
@@ -50,14 +49,6 @@ const defaultStyles: FeedbackFormStyles = {
     color: '#6a1b9a',
     fontSize: 16,
   },
-  titleContainer: {
-    flexDirection: 'row',
-    width: '100%',
-  },
-  sentryLogo: {
-    width: 40,
-    height: 40,
-  },
 };
 
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 1259c19e6c..6bd8ca3cff 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -2,7 +2,7 @@ import { captureFeedback } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
-import { Alert, Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
@@ -78,12 +78,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
     return (
     <View style={styles.container}>
-      <View style={styles.titleContainer}>
-          <Text style={styles.title}>{text.formTitle}</Text>
-          {config.showBranding && (
-            <Image source={require('../../../assets/sentrylogo.png')} style={styles.sentryLogo} />
-          )}
-      </View>
+      <Text style={styles.title}>{text.formTitle}</Text>
 
       {config.showName && (
       <>
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index 7a900f3d49..aac7a1e1be 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -1,8 +1,5 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
 
-/**
- * The props for the feedback form
- */
 export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks {
   styles?: FeedbackFormStyles;
 }
@@ -11,11 +8,6 @@ export interface FeedbackFormProps extends FeedbackGeneralConfiguration, Feedbac
  * General feedback configuration
  */
 export interface FeedbackGeneralConfiguration {
-  /**
-   * Show the Sentry branding
-   */
-  showBranding?: boolean;
-
   /**
    * Should the email field be required?
    */
@@ -131,9 +123,6 @@ export interface FeedbackCallbacks {
   onFormClose?: () => void;
 }
 
-/**
- * The styles for the feedback form
- */
 export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
@@ -144,13 +133,8 @@ export interface FeedbackFormStyles {
   submitText?: TextStyle;
   cancelButton?: ViewStyle;
   cancelText?: TextStyle;
-  titleContainer?: ViewStyle;
-  sentryLogo?: ImageStyle;
 }
 
-/**
- * The state of the feedback form
- */
 export interface FeedbackFormState {
   isVisible: boolean;
   name: string;
diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index 94a5036512..5b0360ec47 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -30,7 +30,6 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   },
 
   // FeedbackGeneralConfiguration
-  showBranding: true,
   isEmailRequired: false,
   isNameRequired: false,
   showEmail: true,
diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index a088216fcb..de7ed90d04 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -36,7 +36,6 @@ const defaultProps: FeedbackFormProps = {
   formError: 'Please fill out all required fields.',
   emailError: 'The email address is not valid.',
   successMessageText: 'Feedback success',
-  showBranding: false,
 };
 
 describe('FeedbackForm', () => {

From ba13320d5ade1db589b223277ed3ffa813746f19 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 17:29:40 +0200
Subject: [PATCH 49/68] Add last event id

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

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 6bd8ca3cff..b79fe7935b 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -1,4 +1,4 @@
-import { captureFeedback } from '@sentry/core';
+import { captureFeedback, lastEventId } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
@@ -45,10 +45,12 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       return;
     }
 
+    const eventId = lastEventId();
     const userFeedback: SendFeedbackParams = {
       message: trimmedDescription,
       name: trimmedName,
       email: trimmedEmail,
+      associatedEventId: eventId,
     };
 
     onFormClose();

From 1f5fb5602d0211e08114fb0b753ef3b40012f169 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Wed, 11 Dec 2024 19:01:45 +0200
Subject: [PATCH 50/68] Mock lastEventId

---
 packages/core/test/feedback/FeedbackForm.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index de7ed90d04..272072f413 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -18,6 +18,7 @@ jest.mock('@sentry/core', () => ({
       name: 'Test User',
     })),
   })),
+  lastEventId: jest.fn(),
 }));
 
 const defaultProps: FeedbackFormProps = {

From 9831482ece840f6004f539c5ebfdf9d2f260b1b2 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 11:25:00 +0200
Subject: [PATCH 51/68] Adds beta note in the changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5aa90212d5..3493f9e1df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,7 +35,7 @@
   });
   ```
 
-- Adds feedback form ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+- Adds feedback form (beta) ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
 
   You can add the form component in your UI like:
   ```jsx

From 4097347e2b44db52c007a693aa9ee0efd004ca40 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 18:27:16 +0200
Subject: [PATCH 52/68] Updates changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3493f9e1df..c799f7a294 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,7 +43,6 @@
   ...
   <FeedbackForm/>
   ```
-  Check [the documentation](https://docs.sentry.io/platforms/react-native/user-feedback/) for more configuration options.
 
 - Export `Span` type from `@sentry/types` ([#4345](https://github.com/getsentry/sentry-react-native/pull/4345))
 

From 30a7b1093eed42d56e410e414d58a1e7d22a4db3 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 19:40:54 +0200
Subject: [PATCH 53/68] Align colors with JS

---
 .../src/js/feedback/FeedbackForm.styles.ts    | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index d54fb9cd83..736540baf1 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -1,43 +1,52 @@
 import type { FeedbackFormStyles } from './FeedbackForm.types';
 
+const PURPLE = 'rgba(88, 74, 192, 1)';
+const FORGROUND_COLOR = '#2b2233';
+const BACKROUND_COLOR = '#fff';
+const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
+
 const defaultStyles: FeedbackFormStyles = {
   container: {
     flex: 1,
     padding: 20,
-    backgroundColor: '#fff',
+    backgroundColor: BACKROUND_COLOR,
   },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 20,
     textAlign: 'center',
+    color: FORGROUND_COLOR,
   },
   label: {
     marginBottom: 4,
     fontSize: 16,
+    color: FORGROUND_COLOR,
   },
   input: {
     height: 50,
-    borderColor: '#ccc',
+    borderColor: BORDER_COLOR,
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 10,
     marginBottom: 15,
     fontSize: 16,
+    color: FORGROUND_COLOR,
   },
   textArea: {
     height: 100,
     textAlignVertical: 'top',
+    color: FORGROUND_COLOR,
   },
   submitButton: {
-    backgroundColor: '#6a1b9a',
+    backgroundColor: PURPLE,
     paddingVertical: 15,
     borderRadius: 5,
     alignItems: 'center',
     marginBottom: 10,
   },
   submitText: {
-    color: '#fff',
+    color: BACKROUND_COLOR,
     fontSize: 18,
     fontWeight: 'bold',
   },
@@ -46,7 +55,7 @@ const defaultStyles: FeedbackFormStyles = {
     alignItems: 'center',
   },
   cancelText: {
-    color: '#6a1b9a',
+    color: FORGROUND_COLOR,
     fontSize: 16,
   },
 };

From 3eccf25d4cc371b876b46c5c5e713dadb9426401 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 19:42:40 +0200
Subject: [PATCH 54/68] Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c799f7a294..db7131b12d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,7 +46,6 @@
 
 - Export `Span` type from `@sentry/types` ([#4345](https://github.com/getsentry/sentry-react-native/pull/4345))
 
-
 ### Fixes
 
 - Return `lastEventId` export from `@sentry/core` ([#4315](https://github.com/getsentry/sentry-react-native/pull/4315))

From bc96fce56b9aa295ab64e257060360504b9698b2 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 19:42:55 +0200
Subject: [PATCH 55/68] Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db7131b12d..fe235e16e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,7 +37,8 @@
 
 - Adds feedback form (beta) ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
 
-  You can add the form component in your UI like:
+   To collect user feedback from inside your application add the `FeedbackFrom` component.
+
   ```jsx
   import { FeedbackForm } from "@sentry/react-native";
   ...

From 995a9ca6c5052bc46ff4bac189938cae393d37a0 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 19:44:32 +0200
Subject: [PATCH 56/68] Update CHANGELOG.md

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe235e16e8..071b37d80e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,7 +35,7 @@
   });
   ```
 
-- Adds feedback form (beta) ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+- User Feedback From Component Beta ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
 
    To collect user feedback from inside your application add the `FeedbackFrom` component.
 

From 3aacaf7faa98e034470f0affd6b829e8975b273c Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 19:46:02 +0200
Subject: [PATCH 57/68] Use regular fonts for both buttons

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

diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts
index 736540baf1..0ab35584d8 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -48,7 +48,6 @@ const defaultStyles: FeedbackFormStyles = {
   submitText: {
     color: BACKROUND_COLOR,
     fontSize: 18,
-    fontWeight: 'bold',
   },
   cancelButton: {
     paddingVertical: 15,

From 78e412ceaf038f42c98ff523a9fb9cc2a8e2904e Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 20:03:26 +0200
Subject: [PATCH 58/68] Handle keyboard properly

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 129 ++++++++++--------
 1 file changed, 74 insertions(+), 55 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index b79fe7935b..2269a7619e 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -2,7 +2,18 @@ import { captureFeedback, lastEventId } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
-import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import {
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View
+} from 'react-native';
 
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
@@ -79,60 +90,68 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     }
 
     return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{text.formTitle}</Text>
-
-      {config.showName && (
-      <>
-        <Text style={styles.label}>
-          {text.nameLabel}
-          {config.isNameRequired && ` ${text.isRequiredLabel}`}
-        </Text>
-        <TextInput
-          style={styles.input}
-          placeholder={text.namePlaceholder}
-          value={name}
-          onChangeText={(value) => this.setState({ name: value })}
-        />
-      </>
-      )}
-
-      {config.showEmail && (
-      <>
-        <Text style={styles.label}>
-          {text.emailLabel}
-          {config.isEmailRequired && ` ${text.isRequiredLabel}`}
-        </Text>
-        <TextInput
-          style={styles.input}
-          placeholder={text.emailPlaceholder}
-          keyboardType={'email-address' as KeyboardTypeOptions}
-          value={email}
-          onChangeText={(value) => this.setState({ email: value })}
-        />
-      </>
-      )}
-
-      <Text style={styles.label}>
-        {text.messageLabel}
-        {` ${text.isRequiredLabel}`}
-      </Text>
-      <TextInput
-        style={[styles.input, styles.textArea]}
-        placeholder={text.messagePlaceholder}
-        value={description}
-        onChangeText={(value) => this.setState({ description: value })}
-        multiline
-      />
-
-      <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
-        <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
-      </TouchableOpacity>
-
-      <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-        <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
-      </TouchableOpacity>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <KeyboardAvoidingView behavior={'padding'} style={styles.container}>
+        <ScrollView>
+          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View style={styles.container}>
+              <Text style={styles.title}>{text.formTitle}</Text>
+
+              {config.showName && (
+              <>
+                <Text style={styles.label}>
+                  {text.nameLabel}
+                  {config.isNameRequired && ` ${text.isRequiredLabel}`}
+                </Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder={text.namePlaceholder}
+                  value={name}
+                  onChangeText={(value) => this.setState({ name: value })}
+                />
+              </>
+              )}
+
+              {config.showEmail && (
+              <>
+                <Text style={styles.label}>
+                  {text.emailLabel}
+                  {config.isEmailRequired && ` ${text.isRequiredLabel}`}
+                </Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder={text.emailPlaceholder}
+                  keyboardType={'email-address' as KeyboardTypeOptions}
+                  value={email}
+                  onChangeText={(value) => this.setState({ email: value })}
+                />
+              </>
+              )}
+
+              <Text style={styles.label}>
+                {text.messageLabel}
+                {` ${text.isRequiredLabel}`}
+              </Text>
+              <TextInput
+                style={[styles.input, styles.textArea]}
+                placeholder={text.messagePlaceholder}
+                value={description}
+                onChangeText={(value) => this.setState({ description: value })}
+                multiline
+              />
+
+              <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
+                <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+                <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
+              </TouchableOpacity>
+            </View>
+          </TouchableWithoutFeedback>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
     );
   }
 

From c45a5e65835f7aeed05bbd12a5747294b0c121c8 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 20:09:15 +0200
Subject: [PATCH 59/68] Adds an option on whether the email should be validated

---
 packages/core/src/js/feedback/FeedbackForm.tsx      | 2 +-
 packages/core/src/js/feedback/FeedbackForm.types.ts | 5 +++++
 packages/core/src/js/feedback/defaults.ts           | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 2269a7619e..b482d3d6b6 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -51,7 +51,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       return;
     }
 
-    if ((config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
+    if (config.shouldValidateEmail && (config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts
index aac7a1e1be..84078d8a61 100644
--- a/packages/core/src/js/feedback/FeedbackForm.types.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.types.ts
@@ -13,6 +13,11 @@ export interface FeedbackGeneralConfiguration {
    */
   isEmailRequired?: boolean;
 
+  /**
+   * Should the email field be validated?
+   */
+  shouldValidateEmail?: boolean;
+
   /**
    * Should the name field be required?
    */
diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index 5b0360ec47..12f8dad554 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -31,6 +31,7 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
 
   // FeedbackGeneralConfiguration
   isEmailRequired: false,
+  shouldValidateEmail: true,
   isNameRequired: false,
   showEmail: true,
   showName: true,

From 6e39119fcf672de399ec7aa9030fd718914ce277 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 20:33:40 +0200
Subject: [PATCH 60/68] Merge properties only once

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index b482d3d6b6..2b3cba3449 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -24,34 +24,35 @@ import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackG
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
 export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
+  private _config: FeedbackFormProps;
+
   public constructor(props: FeedbackFormProps) {
     super(props);
 
-    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...props };
+    this._config = { ...defaultConfiguration, ...props };
     this.state = {
       isVisible: true,
-      name: config.useSentryUser.name,
-      email: config.useSentryUser.email,
+      name: this._config.useSentryUser.name,
+      email: this._config.useSentryUser.email,
       description: '',
     };
   }
 
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
-    const { onFormClose } = { ...defaultConfiguration, ...this.props };
-    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
-    const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
+    const { onFormClose } = this._config;
+    const text: FeedbackTextConfiguration = this._config;
 
     const trimmedName = name?.trim();
     const trimmedEmail = email?.trim();
     const trimmedDescription = description?.trim();
 
-    if ((config.isNameRequired && !trimmedName) || (config.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
+    if ((this._config.isNameRequired && !trimmedName) || (this._config.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
       Alert.alert(text.errorTitle, text.formError);
       return;
     }
 
-    if (config.shouldValidateEmail && (config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
+    if (this._config.shouldValidateEmail && (this._config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
@@ -76,9 +77,9 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
    */
   public render(): React.ReactNode {
     const { name, email, description } = this.state;
-    const { onFormClose } = { ...defaultConfiguration, ...this.props };
-    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
-    const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
+    const { onFormClose } = this._config;
+    const config: FeedbackGeneralConfiguration = this._config;
+    const text: FeedbackTextConfiguration = this._config;
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
       onFormClose();

From 57d99e9c91ee615cc83b7457b7e5e4996a594caa Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 20:40:25 +0200
Subject: [PATCH 61/68] Loads current user data on form construction

---
 packages/core/src/js/feedback/FeedbackForm.tsx | 11 +++++++++--
 packages/core/src/js/feedback/defaults.ts      |  5 -----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 2b3cba3449..5b683823ea 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -1,4 +1,4 @@
-import { captureFeedback, lastEventId } from '@sentry/core';
+import { captureFeedback, getCurrentScope, lastEventId } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
@@ -29,7 +29,14 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
   public constructor(props: FeedbackFormProps) {
     super(props);
 
-    this._config = { ...defaultConfiguration, ...props };
+    const currentUser = {
+      useSentryUser: {
+        email: getCurrentScope().getUser().email || '',
+        name: getCurrentScope().getUser().name || '',
+      }
+    }
+
+    this._config = { ...defaultConfiguration, ...currentUser, ...props };
     this.state = {
       isVisible: true,
       name: this._config.useSentryUser.name,
diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts
index 12f8dad554..ae8a3e9578 100644
--- a/packages/core/src/js/feedback/defaults.ts
+++ b/packages/core/src/js/feedback/defaults.ts
@@ -1,4 +1,3 @@
-import { getCurrentScope } from '@sentry/core';
 import { Alert } from 'react-native';
 
 import type { FeedbackFormProps } from './FeedbackForm.types';
@@ -35,10 +34,6 @@ export const defaultConfiguration: Partial<FeedbackFormProps> = {
   isNameRequired: false,
   showEmail: true,
   showName: true,
-  useSentryUser: {
-    email: getCurrentScope().getUser().email || '',
-    name: getCurrentScope().getUser().name || '',
-  },
 
   // FeedbackTextConfiguration
   cancelButtonLabel: CANCEL_BUTTON_LABEL,

From 6fb8ab4938045ec6bacbe1e29d1557d096c335d5 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 20:45:49 +0200
Subject: [PATCH 62/68] Remove unneeded extra padding

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

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 5b683823ea..a93a141b9b 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -98,8 +98,8 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     }
 
     return (
-    <SafeAreaView style={styles.container}>
-      <KeyboardAvoidingView behavior={'padding'} style={styles.container}>
+    <SafeAreaView>
+      <KeyboardAvoidingView behavior={'padding'}>
         <ScrollView>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.container}>

From fd2e317fa080e1df30ccbf016711c930956c6de4 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 20:53:13 +0200
Subject: [PATCH 63/68] Fix background color issue

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

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

From b793937ae7595bd066192ebde44bd4214c762d55 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Mon, 16 Dec 2024 15:57:55 +0200
Subject: [PATCH 64/68] Fixes changelog typo

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 071b37d80e..d786abe5e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,9 +35,9 @@
   });
   ```
 
-- User Feedback From Component Beta ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+- User Feedback Form Component Beta ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
 
-   To collect user feedback from inside your application add the `FeedbackFrom` component.
+   To collect user feedback from inside your application add the `FeedbackForm` component.
 
   ```jsx
   import { FeedbackForm } from "@sentry/react-native";

From 2a8f13f23d560961d59edb5c5e333dbfe8ef43b1 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 17 Dec 2024 16:52:57 +0200
Subject: [PATCH 65/68] Updates styles background color

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>
---
 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 0ab35584d8..ff92690f28 100644
--- a/packages/core/src/js/feedback/FeedbackForm.styles.ts
+++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts
@@ -2,7 +2,7 @@ import type { FeedbackFormStyles } from './FeedbackForm.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
 const FORGROUND_COLOR = '#2b2233';
-const BACKROUND_COLOR = '#fff';
+const BACKROUND_COLOR = '#ffffff';
 const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
 
 const defaultStyles: FeedbackFormStyles = {

From 9a96e74fe1af8f17f7c7cd5a42029a71678dde6a Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 17 Dec 2024 17:13:32 +0200
Subject: [PATCH 66/68] Use defaultProps

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index c978db83e3..6508c54739 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -1,5 +1,5 @@
+import type { SendFeedbackParams } from '@sentry/core';
 import { captureFeedback, getCurrentScope, lastEventId } from '@sentry/core';
-import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
 import {
@@ -24,7 +24,7 @@ import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackG
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
 export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
-  private _config: FeedbackFormProps;
+  public static defaultProps: Partial<FeedbackFormProps>;
 
   public constructor(props: FeedbackFormProps) {
     super(props);
@@ -36,30 +36,30 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
       }
     }
 
-    this._config = { ...defaultConfiguration, ...currentUser, ...props };
+    FeedbackForm.defaultProps = { ...defaultConfiguration, ...currentUser, ...props };
     this.state = {
       isVisible: true,
-      name: this._config.useSentryUser.name,
-      email: this._config.useSentryUser.email,
+      name: currentUser.useSentryUser.name,
+      email: currentUser.useSentryUser.email,
       description: '',
     };
   }
 
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
-    const { onFormClose } = this._config;
-    const text: FeedbackTextConfiguration = this._config;
+    const { onFormClose } = FeedbackForm.defaultProps;
+    const text: FeedbackTextConfiguration = FeedbackForm.defaultProps;
 
     const trimmedName = name?.trim();
     const trimmedEmail = email?.trim();
     const trimmedDescription = description?.trim();
 
-    if ((this._config.isNameRequired && !trimmedName) || (this._config.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
+    if ((FeedbackForm.defaultProps.isNameRequired && !trimmedName) || (FeedbackForm.defaultProps.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
       Alert.alert(text.errorTitle, text.formError);
       return;
     }
 
-    if (this._config.shouldValidateEmail && (this._config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
+    if (FeedbackForm.defaultProps.shouldValidateEmail && (FeedbackForm.defaultProps.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
@@ -84,9 +84,9 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
    */
   public render(): React.ReactNode {
     const { name, email, description } = this.state;
-    const { onFormClose } = this._config;
-    const config: FeedbackGeneralConfiguration = this._config;
-    const text: FeedbackTextConfiguration = this._config;
+    const { onFormClose } = FeedbackForm.defaultProps;
+    const config: FeedbackGeneralConfiguration = FeedbackForm.defaultProps;
+    const text: FeedbackTextConfiguration = FeedbackForm.defaultProps;
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
       onFormClose();

From 2be08a62075a7538776d4f64a14e076694df14b4 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 17 Dec 2024 18:17:25 +0200
Subject: [PATCH 67/68] Correct defaultProps

---
 .../core/src/js/feedback/FeedbackForm.tsx     | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index 6508c54739..6bd3404024 100644
--- a/packages/core/src/js/feedback/FeedbackForm.tsx
+++ b/packages/core/src/js/feedback/FeedbackForm.tsx
@@ -24,19 +24,20 @@ import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackG
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
 export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
-  public static defaultProps: Partial<FeedbackFormProps>;
+  public static defaultProps: Partial<FeedbackFormProps> = {
+    ...defaultConfiguration
+  }
 
   public constructor(props: FeedbackFormProps) {
     super(props);
 
     const currentUser = {
       useSentryUser: {
-        email: getCurrentScope().getUser().email || '',
-        name: getCurrentScope().getUser().name || '',
+        email: this.props?.useSentryUser?.email || getCurrentScope()?.getUser()?.email || '',
+        name: this.props?.useSentryUser?.name || getCurrentScope()?.getUser()?.name || '',
       }
     }
 
-    FeedbackForm.defaultProps = { ...defaultConfiguration, ...currentUser, ...props };
     this.state = {
       isVisible: true,
       name: currentUser.useSentryUser.name,
@@ -47,19 +48,19 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
 
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
-    const { onFormClose } = FeedbackForm.defaultProps;
-    const text: FeedbackTextConfiguration = FeedbackForm.defaultProps;
+    const { onFormClose } = this.props;
+    const text: FeedbackTextConfiguration = this.props;
 
     const trimmedName = name?.trim();
     const trimmedEmail = email?.trim();
     const trimmedDescription = description?.trim();
 
-    if ((FeedbackForm.defaultProps.isNameRequired && !trimmedName) || (FeedbackForm.defaultProps.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
+    if ((this.props.isNameRequired && !trimmedName) || (this.props.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
       Alert.alert(text.errorTitle, text.formError);
       return;
     }
 
-    if (FeedbackForm.defaultProps.shouldValidateEmail && (FeedbackForm.defaultProps.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
+    if (this.props.shouldValidateEmail && (this.props.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
       Alert.alert(text.errorTitle, text.emailError);
       return;
     }
@@ -84,9 +85,9 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
    */
   public render(): React.ReactNode {
     const { name, email, description } = this.state;
-    const { onFormClose } = FeedbackForm.defaultProps;
-    const config: FeedbackGeneralConfiguration = FeedbackForm.defaultProps;
-    const text: FeedbackTextConfiguration = FeedbackForm.defaultProps;
+    const { onFormClose } = this.props;
+    const config: FeedbackGeneralConfiguration = this.props;
+    const text: FeedbackTextConfiguration = this.props;
     const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
       onFormClose();

From 0588552063ae0dfad37270989d22179c4edc5b36 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Tue, 17 Dec 2024 18:38:42 +0200
Subject: [PATCH 68/68] Adds test to verify when getUser is called

---
 .../core/test/feedback/FeedbackForm.test.tsx  | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackForm.test.tsx
index 272072f413..bf8d963a57 100644
--- a/packages/core/test/feedback/FeedbackForm.test.tsx
+++ b/packages/core/test/feedback/FeedbackForm.test.tsx
@@ -7,16 +7,17 @@ import { FeedbackForm } from '../../src/js/feedback/FeedbackForm';
 import type { FeedbackFormProps } from '../../src/js/feedback/FeedbackForm.types';
 
 const mockOnFormClose = jest.fn();
+const mockGetUser = jest.fn(() => ({
+  email: 'test@example.com',
+  name: 'Test User',
+}));
 
 jest.spyOn(Alert, 'alert');
 
 jest.mock('@sentry/core', () => ({
   captureFeedback: jest.fn(),
   getCurrentScope: jest.fn(() => ({
-    getUser: jest.fn(() => ({
-      email: 'test@example.com',
-      name: 'Test User',
-    })),
+    getUser: mockGetUser,
   })),
   lastEventId: jest.fn(),
 }));
@@ -68,6 +69,17 @@ describe('FeedbackForm', () => {
     expect(emailInput.props.value).toBe('test@example.com');
   });
 
+  it('ensure getUser is called only after the component is rendered', () => {
+    // Ensure getUser is not called before render
+    expect(mockGetUser).not.toHaveBeenCalled();
+
+    // Render the component
+    render(<FeedbackForm />);
+
+    // After rendering, check that getUser was called twice (email and name)
+    expect(mockGetUser).toHaveBeenCalledTimes(2);
+  });
+
   it('shows an error message if required fields are empty', async () => {
     const { getByText } = render(<FeedbackForm {...defaultProps} />);