Merge pull request #2663 from Expensify/revert-2505-parasharrajat-ani…

…mation Revert "fix Modal animations"
Expensify · May 3, 2021 · 502bc38 · 502bc38
2 parents 8c943e0 + 3c4d91d
commit 502bc38
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 46 deletions.
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
@@ -2,7 +2,6 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import {withNavigation} from '@react-navigation/compat';
 import TextInputWithFocusStyles from './TextInputWithFocusStyles';
 import OptionsList from './OptionsList';
 import styles from '../styles/styles';
@@ -60,10 +59,6 @@ const propTypes = {
 
     // Whether to show the title tooltip
     showTitleTooltip: PropTypes.bool,
-
-    // The ref to the search input
-    // eslint-disable-next-line react/forbid-prop-types
-    navigation: PropTypes.object.isRequired,
 };
 
 const defaultProps = {
@@ -92,13 +87,7 @@ class OptionsSelector extends Component {
     }
 
     componentDidMount() {
-        this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => {
-            this.textInput.focus();
-        });
-    }
-
-    componentWillUnmount() {
-        this.unsubscribeTransitionEnd();
+        this.textInput.focus();
     }
 
     /**
@@ -215,4 +204,4 @@ class OptionsSelector extends Component {
 
 OptionsSelector.defaultProps = defaultProps;
 OptionsSelector.propTypes = propTypes;
-export default withNavigation(OptionsSelector);
+export default OptionsSelector;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -156,7 +156,7 @@ class AuthScreens extends React.Component {
         const modalScreenOptions = {
             headerShown: false,
             cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
-            cardStyleInterpolator: (...props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, ...props),
+            cardStyleInterpolator: modalCardStyleInterpolator,
             animationEnabled: true,
             gestureDirection: 'horizontal',
             cardOverlayEnabled: true,

diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
@@ -1,19 +1,15 @@
 import {Animated} from 'react-native';
-import variables from '../../../styles/variables';
 
-export default (
-    isSmallScreen,
-    {
-        current: {progress},
-        inverted,
-        layouts: {
-            screen,
-        },
+export default ({
+    current: {progress},
+    inverted,
+    layouts: {
+        screen,
     },
-) => {
+}) => {
     const translateX = Animated.multiply(progress.interpolate({
         inputRange: [0, 1],
-        outputRange: [isSmallScreen ? screen.width : variables.sideBarWidth, 0],
+        outputRange: [screen.width, 0],
         extrapolate: 'clamp',
     }), inverted);
 

diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js
@@ -136,9 +136,6 @@ class EmojiPickerMenu extends Component {
                     renderItem={this.renderItem}
                     keyExtractor={item => `emoji_picker_${item.code}`}
                     numColumns={this.numColumns}
-                    removeClippedSubviews
-                    maxToRenderPerBatch={this.numColumns}
-                    windowSize={3}
                     style={styles.emojiPickerList}
                     extraData={this.state.filteredEmojis}
                     stickyHeaderIndices={this.state.headerIndices}

diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js
@@ -68,9 +68,6 @@ class EmojiPickerMenu extends Component {
                     renderItem={this.renderItem}
                     keyExtractor={item => (`emoji_picker_${item.code}`)}
                     numColumns={this.numColumns}
-                    removeClippedSubviews
-                    maxToRenderPerBatch={this.numColumns}
-                    windowSize={3}
                     style={styles.emojiPickerList}
                     stickyHeaderIndices={this.unfilteredHeaderIndices}
                 />

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -137,15 +137,6 @@ class ReportActionCompose extends React.Component {
         }
     }
 
-    componentWillUnmount() {
-        if (this.emojiFocusInteractionHandle) {
-            this.emojiFocusInteractionHandle.cancel();
-        }
-        if (this.textInputFocusInteractionHandle) {
-            this.textInputFocusInteractionHandle.cancel();
-        }
-    }
-
     /**
      * Updates the Highlight state of the composer
      *
@@ -180,7 +171,7 @@ class ReportActionCompose extends React.Component {
         if (this.textInput) {
             // There could be other animations running while we trigger manual focus.
             // This prevents focus from making those animations janky.
-            this.textInputFocusInteractionHandle = InteractionManager.runAfterInteractions(() => {
+            InteractionManager.runAfterInteractions(() => {
                 this.textInput.focus();
             });
         }
@@ -268,11 +259,9 @@ class ReportActionCompose extends React.Component {
      * Focus the search input in the emoji picker.
      */
     focusEmojiSearchInput() {
-        this.emojiFocusInteractionHandle = InteractionManager.runAfterInteractions(() => {
-            if (this.emojiSearchInput && !this.props.isSmallScreenWidth) {
-                this.emojiSearchInput.focus();
-            }
-        });
+        if (this.emojiSearchInput) {
+            this.emojiSearchInput.focus();
+        }
     }
 
     /**
@@ -427,6 +416,8 @@ class ReportActionCompose extends React.Component {
                         onClose={this.hideEmojiPicker}
                         onModalShow={this.focusEmojiSearchInput}
                         hideModalContentWhileAnimating
+                        animationInTiming={1}
+                        animationOutTiming={1}
                         anchorPosition={{
                             top: this.state.emojiPopoverAnchorPosition.vertical - CONST.EMOJI_PICKER_SIZE,
                             left: this.state.emojiPopoverAnchorPosition.horizontal - CONST.EMOJI_PICKER_SIZE,