From d92ea8993af63b01031f1e78c3a05aa6df5307d2 Mon Sep 17 00:00:00 2001
From: Antonis Lilis <antonis.lilis@gmail.com>
Date: Fri, 13 Dec 2024 14:19:34 +0200
Subject: [PATCH] Autoinject feedback form

---
 CHANGELOG.md                                  | 11 ++++++
 .../core/src/js/feedback/FeedbackForm.tsx     | 34 ++++++++++++++++++-
 packages/core/src/js/index.ts                 |  2 +-
 .../react-native/src/Screens/ErrorsScreen.tsx |  7 ++++
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3493f9e1d..a5a1f9348 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,17 @@
   ...
   <FeedbackForm/>
   ```
+  or auto-inject it by calling the `showFeedbackForm`:
+    ```jsx
+  import { showFeedbackForm } from '@sentry/react-native';
+  ...
+    <Button
+      title="Show feedback form"
+      onPress={() => {
+        showFeedbackForm(_props.navigation);
+      }}
+    />
+  ```
   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))
diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx
index b79fe7935..1da5c6b1e 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, lastEventId, logger } from '@sentry/core';
 import type { SendFeedbackParams } from '@sentry/types';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
@@ -8,6 +8,31 @@ import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
 
+let feedbackFormHandler: (() => void) | null = null;
+
+const setFeedbackFormHandler = (handler: () => void): void => {
+  feedbackFormHandler = handler;
+};
+
+const clearFeedbackFormHandler = (): void => {
+  feedbackFormHandler = null;
+};
+
+type Navigation = {
+  navigate: (screen: string, params?: Record<string, unknown>) => void;
+};
+
+export const showFeedbackForm = (navigation: Navigation): void => {
+  setFeedbackFormHandler(() => {
+    navigation?.navigate?.('FeedbackForm');
+  });
+  if (feedbackFormHandler) {
+    feedbackFormHandler();
+  } else {
+    logger.error('FeedbackForm handler is not set. Please ensure it is initialized.');
+  }
+};
+
 /**
  * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
@@ -25,6 +50,13 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     };
   }
 
+  /**
+   * Clear the handler when the component unmounts
+   */
+  public componentWillUnmount(): void {
+    clearFeedbackFormHandler();
+  }
+
   public handleFeedbackSubmit: () => void = () => {
     const { name, email, description } = this.state;
     const { onFormClose } = { ...defaultConfiguration, ...this.props };
diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts
index 97775503f..5fd6e0851 100644
--- a/packages/core/src/js/index.ts
+++ b/packages/core/src/js/index.ts
@@ -85,4 +85,4 @@ export type { TimeToDisplayProps } from './tracing';
 
 export { Mask, Unmask } from './replay/CustomMask';
 
-export { FeedbackForm } from './feedback/FeedbackForm';
+export { FeedbackForm, showFeedbackForm } from './feedback/FeedbackForm';
diff --git a/samples/react-native/src/Screens/ErrorsScreen.tsx b/samples/react-native/src/Screens/ErrorsScreen.tsx
index 4788fa407..57c3bc3f3 100644
--- a/samples/react-native/src/Screens/ErrorsScreen.tsx
+++ b/samples/react-native/src/Screens/ErrorsScreen.tsx
@@ -12,6 +12,7 @@ import {
 } from 'react-native';
 
 import * as Sentry from '@sentry/react-native';
+import { showFeedbackForm } from '@sentry/react-native';
 
 import { setScopeProperties } from '../setScopeProperties';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -226,6 +227,12 @@ const ErrorsScreen = (_props: Props) => {
             _props.navigation.navigate('FeedbackForm');
           }}
         />
+        <Button
+          title="Feedback form (autoinject)"
+          onPress={() => {
+            showFeedbackForm(_props.navigation);
+          }}
+        />
         <Button
           title="Send user feedback"
           onPress={() => {