Merge dcc5d3b into dbdfceb

Author: antonis

packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -79,7 +79,22 @@ const defaultStyles: FeedbackFormStyles = {
   },
   modalBackground: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  modalSheetContainer: {
+    backgroundColor: BACKROUND_COLOR,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+    marginBottom: -32,
+    alignSelf: 'stretch',
+    height: '100%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
   },
 };
 

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

@@ -131,7 +131,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     return (
     <SafeAreaView style={[styles.container, { padding: 0 }]}>
       <KeyboardAvoidingView behavior={'padding'} style={[styles.container, { padding: 0 }]}>
-        <ScrollView>
+        <ScrollView bounces={false}>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.container}>
               <View style={styles.titleContainer}>

packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -205,6 +205,7 @@ export interface FeedbackFormStyles {
   titleContainer?: ViewStyle;
   sentryLogo?: ImageStyle;
   modalBackground?: ViewStyle;
+  modalSheetContainer?: ViewStyle;
 }
 
 /**

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

@@ -1,6 +1,6 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Modal, View } from 'react-native';
+import { Modal, SafeAreaView, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
 import defaultStyles from './FeedbackForm.styles';
@@ -70,12 +70,14 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
         {isVisible && (
           <View>
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <View style={styles.modalBackground}>
-                <FeedbackForm {...getFeedbackOptions()}
-                  onFormClose={this._handleClose}
-                  onFormSubmitted={this._handleClose}
-                />
-              </View>
+              <SafeAreaView style={styles.modalBackground}>
+                <View style={styles.modalSheetContainer}>
+                  <FeedbackForm {...getFeedbackOptions()}
+                    onFormClose={this._handleClose}
+                    onFormSubmitted={this._handleClose}
+                    />
+                </View>
+              </SafeAreaView>
             </Modal>
           </View>
         )}

packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap

@@ -31,7 +31,9 @@ exports[`FeedbackForm matches the snapshot with custom styles 1`] = `
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -299,7 +301,9 @@ exports[`FeedbackForm matches the snapshot with custom styles and screenshot but
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -617,7 +621,9 @@ exports[`FeedbackForm matches the snapshot with custom texts 1`] = `
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -916,7 +922,9 @@ exports[`FeedbackForm matches the snapshot with custom texts and screenshot butt
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -1265,7 +1273,9 @@ exports[`FeedbackForm matches the snapshot with default configuration 1`] = `
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={
@@ -1564,7 +1574,9 @@ exports[`FeedbackForm matches the snapshot with default configuration and screen
       ]
     }
   >
-    <RCTScrollView>
+    <RCTScrollView
+      bounces={false}
+    >
       <View>
         <View
           accessibilityState={