diff --git a/packages/core/src/js/feedback/FeedbackWidget.tsx b/packages/core/src/js/feedback/FeedbackWidget.tsx index 65087ca0a7..a6a4818623 100644 --- a/packages/core/src/js/feedback/FeedbackWidget.tsx +++ b/packages/core/src/js/feedback/FeedbackWidget.tsx @@ -88,7 +88,9 @@ export class FeedbackWidget extends React.Component { - onFormClose(); - this.setState({ isVisible: false }); + if (onFormClose) { + onFormClose(); + } else { + this.setState({ isVisible: false }); + } } if (!this.state.isVisible) { diff --git a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx index 857fc881cb..11a7c3f8cc 100644 --- a/packages/core/src/js/feedback/FeedbackWidgetManager.tsx +++ b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx @@ -1,6 +1,6 @@ import { logger } from '@sentry/core'; import * as React from 'react'; -import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform } from 'react-native'; +import { Animated, Dimensions, Easing, KeyboardAvoidingView, Modal, PanResponder, Platform } from 'react-native'; import { FeedbackWidget } from './FeedbackWidget'; import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackWidget.styles'; @@ -10,6 +10,8 @@ import { isModalSupported } from './utils'; const PULL_DOWN_CLOSE_THREESHOLD = 200; const PULL_DOWN_ANDROID_ACTIVATION_HEIGHT = 150; +const SLIDE_ANIMATION_DURATION = 200; +const BACKGROUND_ANIMATION_DURATION = 200; class FeedbackWidgetManager { private static _isVisible = false; @@ -53,7 +55,7 @@ class FeedbackWidgetProvider extends React.Component { if (gestureState.dy > PULL_DOWN_CLOSE_THREESHOLD) { // Close on swipe below a certain threshold Animated.timing(this.state.panY, { - toValue: 600, - duration: 200, + toValue: Dimensions.get('screen').height, + duration: SLIDE_ANIMATION_DURATION, useNativeDriver: true, }).start(() => { this._handleClose(); @@ -97,11 +99,22 @@ class FeedbackWidgetProvider extends React.Component { + logger.info('FeedbackWidgetProvider componentDidUpdate'); + }); } else if (prevState.isVisible && !this.state.isVisible) { this.state.backgroundOpacity.setValue(0); } @@ -130,7 +143,7 @@ class FeedbackWidgetProvider extends React.Component - + { - this.setState({ isVisible: visible }); - if (visible) { - this.state.panY.setValue(0); + const updateState = (): void => { + this.setState({ isVisible: visible }); + }; + if (!visible) { + Animated.parallel([ + Animated.timing(this.state.panY, { + toValue: Dimensions.get('screen').height, + duration: SLIDE_ANIMATION_DURATION, + useNativeDriver: true, + easing: Easing.out(Easing.quad), + }), + Animated.timing(this.state.backgroundOpacity, { + toValue: 0, + duration: BACKGROUND_ANIMATION_DURATION, + useNativeDriver: true, + easing: Easing.out(Easing.quad), + }) + ]).start(() => { + // Change of the state unmount the component + // which would cancel the animation + updateState(); + }); + } else { + updateState(); } }; private _handleClose = (): void => { FeedbackWidgetManager.hide(); - this.setState({ isVisible: false }); }; }