Autoinject feedback form (#4370)

Author: antonis

CHANGELOG.md

@@ -36,6 +36,17 @@ To learn how to attach context data to the feedback visit [the documentation](ht
   ...
   <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);
+      }}
+    />
+  ```
 
 - Export `Span` type from `@sentry/types` ([#4345](https://github.com/getsentry/sentry-react-native/pull/4345))
 - Add RN SDK package to `sdk.packages` on Android ([#4380](https://github.com/getsentry/sentry-react-native/pull/4380))

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 { captureFeedback, getCurrentScope, lastEventId, logger } from '@sentry/core';
 import * as React from 'react';
 import type { KeyboardTypeOptions } from 'react-native';
 import {
@@ -21,6 +21,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.
@@ -48,6 +73,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 } = this.props;

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';

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={() => {