Animate background color

Author: antonis

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

@@ -1,3 +1,5 @@
+import type { ViewStyle } from 'react-native';
+
 import type { FeedbackFormStyles } from './FeedbackForm.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
@@ -79,4 +81,31 @@ const defaultStyles: FeedbackFormStyles = {
   },
 };
 
+export const modalWrapper: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  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,
+};
+
 export default defaultStyles;

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

@@ -1,9 +1,9 @@
 import { logger } from '@sentry/core';
 import * as React from 'react';
-import { Modal, View } from 'react-native';
+import { Animated, Modal, View } from 'react-native';
 
 import { FeedbackForm } from './FeedbackForm';
-import defaultStyles from './FeedbackForm.styles';
+import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles';
 import type { FeedbackFormStyles } from './FeedbackForm.types';
 import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
@@ -40,16 +40,37 @@ interface FeedbackFormProviderProps {
   styles?: FeedbackFormStyles;
 }
 
+interface FeedbackFormProviderState {
+  isVisible: boolean;
+  backgroundOpacity: Animated.Value;
+}
+
 class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
-  public state = {
+  public state: FeedbackFormProviderState = {
     isVisible: false,
+    backgroundOpacity: new Animated.Value(0),
   };
 
   public constructor(props: FeedbackFormProviderProps) {
     super(props);
     FeedbackFormManager.initialize(this._setVisibilityFunction);
   }
 
+  /**
+   * Animates the background opacity when the modal is shown.
+   */
+  public componentDidUpdate(_prevProps: any, prevState: FeedbackFormProviderState): void {
+    if (!prevState.isVisible && this.state.isVisible) {
+      Animated.timing(this.state.backgroundOpacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else if (prevState.isVisible && !this.state.isVisible) {
+      this.state.backgroundOpacity.setValue(0);
+    }
+  }
+
   /**
    * Renders the feedback form modal.
    */
@@ -59,27 +80,31 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
       return <>{this.props.children}</>;
     }
 
-    const { isVisible } = this.state;
-    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
+    const { isVisible, backgroundOpacity } = this.state;
+
+    const backgroundColor = backgroundOpacity.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],
+    });
 
     // Wrapping the `Modal` component in a `View` component is necessary to avoid
     // issues like https://github.com/software-mansion/react-native-reanimated/issues/6035
     return (
       <>
         {this.props.children}
         {isVisible && (
-          <View>
+          <Animated.View style={[modalWrapper, { backgroundColor }]} >
             <Modal visible={isVisible} transparent animationType="slide" onRequestClose={this._handleClose} testID="feedback-form-modal">
-              <View style={styles.modalBackground}>
-                <View style={styles.modalSheetContainer}>
+              <View style={modalBackground}>
+                <View style={modalSheetContainer}>
                   <FeedbackForm {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
                     />
                 </View>
               </View>
             </Modal>
-          </View>
+          </Animated.View>
         )}
       </>
     );