misc(feedback): Improve Feedback Sheet interactions (#4571)

krystofwoldrich · web-flow · commit ee3aa7016294 · 2025-02-20T09:41:56.000+01:00
diff --git a/packages/core/src/js/feedback/FeedbackWidget.styles.ts b/packages/core/src/js/feedback/FeedbackWidget.styles.ts
@@ -3,28 +3,28 @@ import type { ViewStyle } from 'react-native';
 import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
-const FORGROUND_COLOR = '#2b2233';
-const BACKROUND_COLOR = '#ffffff';
+const FOREGROUND_COLOR = '#2b2233';
+const BACKGROUND_COLOR = '#ffffff';
 const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
 
 const defaultStyles: FeedbackWidgetStyles = {
   container: {
     flex: 1,
     padding: 20,
-    backgroundColor: BACKROUND_COLOR,
+    backgroundColor: BACKGROUND_COLOR,
   },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 20,
     textAlign: 'left',
     flex: 1,
-    color: FORGROUND_COLOR,
+    color: FOREGROUND_COLOR,
   },
   label: {
     marginBottom: 4,
     fontSize: 16,
-    color: FORGROUND_COLOR,
+    color: FOREGROUND_COLOR,
   },
   input: {
     height: 50,
@@ -34,12 +34,12 @@ const defaultStyles: FeedbackWidgetStyles = {
     paddingHorizontal: 10,
     marginBottom: 15,
     fontSize: 16,
-    color: FORGROUND_COLOR,
+    color: FOREGROUND_COLOR,
   },
   textArea: {
     height: 100,
     textAlignVertical: 'top',
-    color: FORGROUND_COLOR,
+    color: FOREGROUND_COLOR,
   },
   screenshotButton: {
     backgroundColor: '#eee',
@@ -72,15 +72,15 @@ const defaultStyles: FeedbackWidgetStyles = {
     marginBottom: 10,
   },
   submitText: {
-    color: BACKROUND_COLOR,
+    color: BACKGROUND_COLOR,
     fontSize: 18,
   },
   cancelButton: {
     paddingVertical: 15,
     alignItems: 'center',
   },
   cancelText: {
-    color: FORGROUND_COLOR,
+    color: FOREGROUND_COLOR,
     fontSize: 16,
   },
   titleContainer: {
@@ -101,23 +101,22 @@ export const modalWrapper: ViewStyle = {
   bottom: 0,
 };
 
-export const modalBackground: ViewStyle = {
-  flex: 1,
-  justifyContent: 'flex-end',
-};
-
 export const modalSheetContainer: ViewStyle = {
   backgroundColor: '#ffffff',
   borderTopLeftRadius: 16,
   borderTopRightRadius: 16,
   overflow: 'hidden',
   alignSelf: 'stretch',
-  height: '92%',
   shadowColor: '#000',
   shadowOffset: { width: 0, height: -3 },
   shadowOpacity: 0.1,
   shadowRadius: 4,
   elevation: 5,
+  flex: 1,
+};
+
+export const topSpacer: ViewStyle = {
+  height: 64, // magic number
 };
 
 export default defaultStyles;
diff --git a/packages/core/src/js/feedback/FeedbackWidget.tsx b/packages/core/src/js/feedback/FeedbackWidget.tsx
@@ -5,10 +5,6 @@ import type { KeyboardTypeOptions } from 'react-native';
 import {
   Image,
   Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  ScrollView,
   Text,
   TextInput,
   TouchableOpacity,
@@ -222,97 +218,87 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
     }
 
     return (
-    <SafeAreaView style={[styles.container, { padding: 0 }]}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={[styles.container, { padding: 0 }]}
-        enabled={notWeb()}
-      >
-        <ScrollView bounces={false}>
-          <TouchableWithoutFeedback onPress={notWeb() ? Keyboard.dismiss: undefined}>
-            <View style={styles.container}>
-              <View style={styles.titleContainer}>
-                <Text style={styles.title}>{text.formTitle}</Text>
-                {config.showBranding && (
-                  <Image
-                    source={{ uri: sentryLogo }}
-                    style={styles.sentryLogo}
-                    testID='sentry-logo'
-                  />
-                )}
-              </View>
+      <TouchableWithoutFeedback onPress={notWeb() ? Keyboard.dismiss: undefined}>
+        <View style={styles.container}>
+          <View style={styles.titleContainer}>
+            <Text style={styles.title}>{text.formTitle}</Text>
+            {config.showBranding && (
+              <Image
+                source={{ uri: sentryLogo }}
+                style={styles.sentryLogo}
+                testID='sentry-logo'
+              />
+            )}
+          </View>
 
-              {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.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 })}
-                />
-              </>
-              )}
+          {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
-              />
-              {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
-                <View style={styles.screenshotContainer}>
-                  {this.state.attachmentUri && (
-                    <Image
-                      source={{ uri: this.state.attachmentUri }}
-                      style={styles.screenshotThumbnail}
-                    />
-                  )}
-                  <TouchableOpacity style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
-                    <Text style={styles.screenshotText}>
-                      {!this.state.filename && !this.state.attachment
-                        ? text.addScreenshotButtonLabel
-                        : text.removeScreenshotButtonLabel}
-                    </Text>
-                  </TouchableOpacity>
-                </View>
+          <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
+          />
+          {(config.enableScreenshot || imagePickerConfiguration.imagePicker) && (
+            <View style={styles.screenshotContainer}>
+              {this.state.attachmentUri && (
+                <Image
+                  source={{ uri: this.state.attachmentUri }}
+                  style={styles.screenshotThumbnail}
+                />
               )}
-              <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 style={styles.screenshotButton} onPress={this.onScreenshotButtonPress}>
+                <Text style={styles.screenshotText}>
+                  {!this.state.filename && !this.state.attachment
+                    ? text.addScreenshotButtonLabel
+                    : text.removeScreenshotButtonLabel}
+                </Text>
               </TouchableOpacity>
             </View>
-          </TouchableWithoutFeedback>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
+          )}
+          <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>
     );
   }
 
diff --git a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx
@@ -1,16 +1,16 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Animated, Dimensions, Easing, KeyboardAvoidingView, Modal, PanResponder, Platform } from 'react-native';
+import type { NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import { Animated, Dimensions, Easing, Modal, PanResponder, Platform, ScrollView, View } from 'react-native';
 
 import { notWeb } from '../utils/environment';
 import { FeedbackWidget } from './FeedbackWidget';
-import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackWidget.styles';
+import { modalSheetContainer, modalWrapper, topSpacer } from './FeedbackWidget.styles';
 import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
 
-const PULL_DOWN_CLOSE_THREESHOLD = 200;
-const PULL_DOWN_ANDROID_ACTIVATION_HEIGHT = 150;
+const PULL_DOWN_CLOSE_THRESHOLD = 200;
 const SLIDE_ANIMATION_DURATION = 200;
 const BACKGROUND_ANIMATION_DURATION = 200;
 
@@ -50,38 +50,41 @@ interface FeedbackWidgetProviderState {
   isVisible: boolean;
   backgroundOpacity: Animated.Value;
   panY: Animated.Value;
+  isScrollAtTop: boolean;
 }
 
 class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps> {
   public state: FeedbackWidgetProviderState = {
     isVisible: false,
     backgroundOpacity: new Animated.Value(0),
     panY: new Animated.Value(Dimensions.get('screen').height),
+    isScrollAtTop: true,
   };
 
   private _panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: (evt, _gestureState) => {
-      // On Android allow pulling down only from the top to avoid breaking native gestures
-      return notWeb() && (Platform.OS !== 'android' || evt.nativeEvent.pageY < PULL_DOWN_ANDROID_ACTIVATION_HEIGHT);
+    onStartShouldSetPanResponder: (_, gestureState) => {
+      return notWeb() && this.state.isScrollAtTop && gestureState.dy > 0;
     },
-    onMoveShouldSetPanResponder: (evt, _gestureState) => {
-      return notWeb() && (Platform.OS !== 'android' || evt.nativeEvent.pageY < PULL_DOWN_ANDROID_ACTIVATION_HEIGHT);
+    onMoveShouldSetPanResponder: (_, gestureState) => {
+      return notWeb() && this.state.isScrollAtTop && gestureState.dy > 0;
     },
     onPanResponderMove: (_, gestureState) => {
       if (gestureState.dy > 0) {
         this.state.panY.setValue(gestureState.dy);
       }
     },
     onPanResponderRelease: (_, gestureState) => {
-      if (gestureState.dy > PULL_DOWN_CLOSE_THREESHOLD) { // Close on swipe below a certain threshold
+      if (gestureState.dy > PULL_DOWN_CLOSE_THRESHOLD) {
+        // Close on swipe below a certain threshold
         Animated.timing(this.state.panY, {
           toValue: Dimensions.get('screen').height,
           duration: SLIDE_ANIMATION_DURATION,
           useNativeDriver: true,
         }).start(() => {
           this._handleClose();
         });
-      } else { // Animate it back to the original position
+      } else {
+        // Animate it back to the original position
         Animated.spring(this.state.panY, {
           toValue: 0,
           useNativeDriver: true,
@@ -142,31 +145,35 @@ class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps
     return (
       <>
         {this.props.children}
-        {isVisible && (
+        {isVisible &&
           <Animated.View style={[modalWrapper, { backgroundColor }]} >
             <Modal visible={isVisible} transparent animationType="none" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <KeyboardAvoidingView
-                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                style={modalBackground}
-                enabled={notWeb()}
-              >
-                <Animated.View
-                  style={[modalSheetContainer, { transform: [{ translateY: this.state.panY }] }]}
-                  {...this._panResponder.panHandlers}
-                >
+              <View style={topSpacer}/>
+              <Animated.View
+                style={[modalSheetContainer, { transform: [{ translateY: this.state.panY }] }]}
+                {...this._panResponder.panHandlers}>
+                <ScrollView
+                  bounces={false}
+                  keyboardShouldPersistTaps="handled"
+                  automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
+                  onScroll={this._handleScroll}>
                   <FeedbackWidget {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
-                    />
-                </Animated.View>
-              </KeyboardAvoidingView>
+                  />
+                </ScrollView>
+              </Animated.View>
             </Modal>
           </Animated.View>
-        )}
+        }
       </>
     );
   }
 
+  private _handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>): void => {
+    this.setState({ isScrollAtTop: event.nativeEvent.contentOffset.y <= 0 });
+  };
+
   private _setVisibilityFunction = (visible: boolean): void => {
     const updateState = (): void => {
       this.setState({ isVisible: visible });
diff --git a/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap
