diff --git a/react/features/base/react/components/native/SlidingView.js b/react/features/base/react/components/native/SlidingView.js index 03d2726ad2..10712927c3 100644 --- a/react/features/base/react/components/native/SlidingView.js +++ b/react/features/base/react/components/native/SlidingView.js @@ -110,7 +110,7 @@ export default class SlidingView extends PureComponent { }; // Bind event handlers so they are only bound once per instance. - this._onHideMenu = this._onHideMenu.bind(this); + this._onHide = this._onHide.bind(this); } /** @@ -158,7 +158,7 @@ export default class SlidingView extends PureComponent { pointerEvents = 'box-none' style = { styles.sliderViewContainer } > + onPress = { this._onHide } > { return style; } - _onHideMenu: () => void; + _onHide: () => void; /** * Hides the slider. @@ -219,15 +219,16 @@ export default class SlidingView extends PureComponent { * @private * @returns {void} */ - _onHideMenu() { - this._setShow(false); + _onHide() { + this._setShow(false) + .then(() => { + const { onHide } = this.props; - const { onHide } = this.props; - - onHide && onHide(); + onHide && onHide(); + }); } - _setShow: (boolean) => void; + _setShow: (boolean) => Promise<*>; /** * Shows/hides the slider menu. @@ -235,32 +236,37 @@ export default class SlidingView extends PureComponent { * @param {boolean} show - If the slider view is to be made visible, * {@code true}; otherwise, {@code false}. * @private - * @returns {void} + * @returns {Promise} */ _setShow(show) { - if (!this._mounted) { - return; - } - - const { positionOffset } = this.state; - const { position } = this.props; - let toValue = positionOffset; - - if (position === 'bottom' || position === 'right') { - toValue = -positionOffset; - } - - Animated - .timing( - /* value */ this.state.sliderAnimation, - /* config */ { - duration: 200, - toValue: show ? toValue : 0, - useNativeDriver: true - }) - .start(({ finished }) => { - finished && this._mounted && !show - && this.setState({ showOverlay: false }); - }); + return new Promise(resolve => { + if (!this._mounted) { + resolve(); + + return; + } + + const { positionOffset } = this.state; + const { position } = this.props; + let toValue = positionOffset; + + if (position === 'bottom' || position === 'right') { + toValue = -positionOffset; + } + + Animated + .timing( + /* value */ this.state.sliderAnimation, + /* config */ { + duration: 200, + toValue: show ? toValue : 0, + useNativeDriver: true + }) + .start(({ finished }) => { + finished && this._mounted && !show + && this.setState({ showOverlay: false }); + resolve(); + }); + }); } }