Auto-inject feedback form

Author: antonis

packages/core/src/js/feedback/FeedbackFormManager.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { Modal, StyleSheet,View } from 'react-native';
+
+import { FeedbackForm } from './FeedbackForm';
+
+class FeedbackFormManager {
+  private static _isVisible = false;
+  private static _setVisibility: (visible: boolean) => void;
+
+  public static initialize(setVisibility: (visible: boolean) => void): void {
+    this._setVisibility = setVisibility;
+  }
+
+  public static show(): void {
+    if (this._setVisibility) {
+      this._isVisible = true;
+      this._setVisibility(true);
+    }
+  }
+
+  public static hide(): void {
+    if (this._setVisibility) {
+      this._isVisible = false;
+      this._setVisibility(false);
+    }
+  }
+
+  public static isFormVisible(): boolean {
+    return this._isVisible;
+  }
+}
+
+interface FeedbackFormProviderProps {
+  children: React.ReactNode;
+}
+
+class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
+  public state = {
+    isVisible: false,
+  };
+
+  public constructor(props: FeedbackFormProviderProps) {
+    super(props);
+    FeedbackFormManager.initialize(this._setVisibilityFunction);
+  }
+
+  /**
+   * Renders the feedback form modal.
+   */
+  public render(): React.ReactNode {
+    const { isVisible } = this.state;
+
+    return (
+      <>
+        {this.props.children}
+        {isVisible && (
+          <Modal visible={isVisible} transparent animationType="slide">
+            <View style={styles.modalBackground}>
+              <FeedbackForm
+                onFormClose={this._handleClose}
+                onFormSubmitted={this._handleClose}
+              />
+            </View>
+          </Modal>
+        )}
+      </>
+    );
+  }
+
+  private _setVisibilityFunction = (visible: boolean): void => {
+    this.setState({ isVisible: visible });
+  };
+
+  private _handleClose = (): void => {
+    FeedbackFormManager.hide();
+    this.setState({ isVisible: false });
+  };
+}
+
+const showFeedbackForm = (): void => {
+  FeedbackFormManager.show();
+};
+
+const styles = StyleSheet.create({
+  modalBackground: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+});
+
+export { showFeedbackForm, FeedbackFormProvider };

packages/core/src/js/index.ts

@@ -86,3 +86,4 @@ export type { TimeToDisplayProps } from './tracing';
 export { Mask, Unmask } from './replay/CustomMask';
 
 export { FeedbackForm } from './feedback/FeedbackForm';
+export { showFeedbackForm } from './feedback/FeedbackFormManager';

packages/core/src/js/sdk.tsx

@@ -8,6 +8,7 @@ import {
 import * as React from 'react';
 
 import { ReactNativeClient } from './client';
+import { FeedbackFormProvider } from './feedback/FeedbackFormManager';
 import { getDevServer } from './integrations/debugsymbolicatorutils';
 import { getDefaultIntegrations } from './integrations/default';
 import type { ReactNativeClientOptions, ReactNativeOptions, ReactNativeWrapperOptions } from './options';
@@ -163,7 +164,9 @@ export function wrap<P extends Record<string, unknown>>(
     return (
       <TouchEventBoundary {...(options?.touchEventBoundaryProps ?? {})}>
         <ReactNativeProfiler {...profilerProps}>
-          <RootComponent {...appProps} />
+          <FeedbackFormProvider>
+            <RootComponent {...appProps} />
+          </FeedbackFormProvider>
         </ReactNativeProfiler>
       </TouchEventBoundary>
     );

samples/react-native/src/Screens/ErrorsScreen.tsx

@@ -226,6 +226,12 @@ const ErrorsScreen = (_props: Props) => {
             _props.navigation.navigate('FeedbackForm');
           }}
         />
+        <Button
+          title="Feedback form (auto)"
+          onPress={() => {
+            Sentry.showFeedbackForm();
+          }}
+        />
         <Button
           title="Send user feedback"
           onPress={() => {