Merge pull request #2833 from Expensify/revert-2680-animations

Revert "fixed modal animations"
Expensify · May 12, 2021 · 97173b1 · 97173b1
2 parents 524d508 + 2ffd164
commit 97173b1
Show file tree

Hide file tree

Showing 10 changed files with 219 additions and 277 deletions.
diff --git a/src/components/ScreenWrapper.js b/src/components/ScreenWrapper.js
@@ -24,13 +24,8 @@ const propTypes = {
     // Whether to include padding top
     includePaddingTop: PropTypes.bool,
 
-    // Called when navigated Screen's transition is finished.
-    onTransitionEnd: PropTypes.func,
-
-    // react-navigation navigation object available to screen components
+    // react-navigation object that will allow us to goBack()
     navigation: PropTypes.shape({
-        // Method to attach listner to Navigaton state.
-        addListener: PropTypes.func.isRequired,
 
         // Returns to the previous navigation state e.g. if this is inside a Modal we will dismiss it
         goBack: PropTypes.func,
@@ -41,39 +36,24 @@ const defaultProps = {
     style: [],
     includePaddingBottom: true,
     includePaddingTop: true,
-    onTransitionEnd: () => {},
     navigation: {
-        addListener: () => {},
         goBack: () => {},
     },
 };
 
 class ScreenWrapper extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            didScreenTransitionEnd: false,
-        };
-    }
-
     componentDidMount() {
-        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe('Escape', () => {
+        this.unsubscribe = KeyboardShortcut.subscribe('Escape', () => {
             this.props.navigation.goBack();
         }, [], true);
-
-        this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', () => {
-            this.setState({didScreenTransitionEnd: true});
-            this.props.onTransitionEnd();
-        });
     }
 
     componentWillUnmount() {
-        if (this.unsubscribeEscapeKey) {
-            this.unsubscribeEscapeKey();
-        }
-        if (this.unsubscribeTransitionEnd) {
-            this.unsubscribeTransitionEnd();
+        if (!this.unsubscribe) {
+            return;
         }
+
+        this.unsubscribe();
     }
 
     render() {
@@ -101,10 +81,7 @@ class ScreenWrapper extends React.Component {
                             <HeaderGap />
                             {// If props.children is a function, call it to provide the insets to the children.
                                 _.isFunction(this.props.children)
-                                    ? this.props.children({
-                                        insets,
-                                        didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                    })
+                                    ? this.props.children(insets)
                                     : this.props.children
                             }
                         </View>

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -68,12 +68,10 @@ Onyx.connect({
 
 const RootStack = createCustomModalStackNavigator();
 
-// We want to delay the re-rendering for components(e.g. ReportActionCompose)
-// that depends on modal visibility until Modal is completely closed or its transition has ended
-// When modal screen is focused and animation transition is ended, update modal visibility in Onyx
+// When modal screen gets focused, update modal visibility in Onyx
 // https://reactnavigation.org/docs/navigation-events/
 const modalScreenListeners = {
-    transitionEnd: () => {
+    focus: () => {
         setModalVisibility(true);
     },
     beforeRemove: () => {
@@ -161,7 +159,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/NewChatPage.js b/src/pages/NewChatPage.js
@@ -12,7 +12,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../components/wit
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Navigation from '../libs/Navigation/Navigation';
 import ScreenWrapper from '../components/ScreenWrapper';
-import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 
@@ -53,6 +52,7 @@ class NewChatPage extends Component {
         super(props);
 
         this.createNewChat = this.createNewChat.bind(this);
+
         const {
             personalDetails,
             userToInvite,
@@ -117,45 +117,38 @@ class NewChatPage extends Component {
 
         return (
             <ScreenWrapper>
-                {({didScreenTransitionEnd}) => (
-                    <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('sidebarScreen.newChat')}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
-                        <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
-                            {didScreenTransitionEnd && (
-                            <OptionsSelector
-                                sections={sections}
-                                value={this.state.searchValue}
-                                onSelectRow={this.createNewChat}
-                                onChangeText={(searchValue = '') => {
-                                    const {
-                                        personalDetails,
-                                        userToInvite,
-                                    } = getNewChatOptions(
-                                        this.props.reports,
-                                        this.props.personalDetails,
-                                        searchValue,
-                                    );
-                                    this.setState({
-                                        searchValue,
-                                        userToInvite,
-                                        personalDetails,
-                                    });
-                                }}
-                                headerMessage={headerMessage}
-                                hideSectionHeaders
-                                disableArrowKeysActions
-                                hideAdditionalOptionStates
-                                forceTextUnreadStyle
-                            />
-                            )}
-                        </View>
-                        <KeyboardSpacer />
-                    </>
-                )}
+                <HeaderWithCloseButton
+                    title={this.props.translate('sidebarScreen.newChat')}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <View style={[styles.flex1, styles.w100]}>
+                    <OptionsSelector
+                        sections={sections}
+                        value={this.state.searchValue}
+                        onSelectRow={this.createNewChat}
+                        onChangeText={(searchValue = '') => {
+                            const {
+                                personalDetails,
+                                userToInvite,
+                            } = getNewChatOptions(
+                                this.props.reports,
+                                this.props.personalDetails,
+                                searchValue,
+                            );
+                            this.setState({
+                                searchValue,
+                                userToInvite,
+                                personalDetails,
+                            });
+                        }}
+                        headerMessage={headerMessage}
+                        hideSectionHeaders
+                        disableArrowKeysActions
+                        hideAdditionalOptionStates
+                        forceTextUnreadStyle
+                    />
+                </View>
+                <KeyboardSpacer />
             </ScreenWrapper>
         );
     }

diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
@@ -14,7 +14,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../components/wit
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Navigation from '../libs/Navigation/Navigation';
-import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 
@@ -56,6 +55,7 @@ class NewGroupPage extends Component {
 
         this.toggleOption = this.toggleOption.bind(this);
         this.createGroup = this.createGroup.bind(this);
+
         const {
             recentReports,
             personalDetails,
@@ -185,69 +185,60 @@ class NewGroupPage extends Component {
         );
         return (
             <ScreenWrapper>
-                {({didScreenTransitionEnd}) => (
-                    <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('sidebarScreen.newGroup')}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
-                        <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
-                            {didScreenTransitionEnd && (
-                                <>
-                                    <OptionsSelector
-                                        canSelectMultipleOptions
-                                        sections={sections}
-                                        selectedOptions={this.state.selectedOptions}
-                                        value={this.state.searchValue}
-                                        onSelectRow={this.toggleOption}
-                                        onChangeText={(searchValue = '') => {
-                                            const {
-                                                recentReports,
-                                                personalDetails,
-                                                userToInvite,
-                                            } = getNewGroupOptions(
-                                                this.props.reports,
-                                                this.props.personalDetails,
-                                                searchValue,
-                                                [],
-                                            );
-                                            this.setState({
-                                                searchValue,
-                                                userToInvite,
-                                                recentReports,
-                                                personalDetails,
-                                            });
-                                        }}
-                                        headerMessage={headerMessage}
-                                        disableArrowKeysActions
-                                        hideAdditionalOptionStates
-                                        forceTextUnreadStyle
-                                        shouldFocusOnSelectRow
-                                    />
-                                    {this.state.selectedOptions?.length > 0 && (
-                                    <View style={[styles.ph5, styles.pb5]}>
-                                        <Pressable
-                                            onPress={this.createGroup}
-                                            style={({hovered}) => [
-                                                styles.button,
-                                                styles.buttonSuccess,
-                                                styles.w100,
-                                                hovered && styles.buttonSuccessHovered,
-                                            ]}
-                                        >
-                                            <Text style={[styles.buttonText, styles.buttonSuccessText]}>
-                                                {this.props.translate('newGroupPage.createGroup')}
-                                            </Text>
-                                        </Pressable>
-                                    </View>
-                                    )}
-                                </>
-                            )}
+                <HeaderWithCloseButton
+                    title={this.props.translate('sidebarScreen.newGroup')}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <View style={[styles.flex1, styles.w100]}>
+                    <OptionsSelector
+                        canSelectMultipleOptions
+                        sections={sections}
+                        selectedOptions={this.state.selectedOptions}
+                        value={this.state.searchValue}
+                        onSelectRow={this.toggleOption}
+                        onChangeText={(searchValue = '') => {
+                            const {
+                                recentReports,
+                                personalDetails,
+                                userToInvite,
+                            } = getNewGroupOptions(
+                                this.props.reports,
+                                this.props.personalDetails,
+                                searchValue,
+                                [],
+                            );
+                            this.setState({
+                                searchValue,
+                                userToInvite,
+                                recentReports,
+                                personalDetails,
+                            });
+                        }}
+                        headerMessage={headerMessage}
+                        disableArrowKeysActions
+                        hideAdditionalOptionStates
+                        forceTextUnreadStyle
+                        shouldFocusOnSelectRow
+                    />
+                    {this.state.selectedOptions?.length > 0 && (
+                        <View style={[styles.ph5, styles.pb5]}>
+                            <Pressable
+                                onPress={this.createGroup}
+                                style={({hovered}) => [
+                                    styles.button,
+                                    styles.buttonSuccess,
+                                    styles.w100,
+                                    hovered && styles.buttonSuccessHovered,
+                                ]}
+                            >
+                                <Text style={[styles.buttonText, styles.buttonSuccessText]}>
+                                    {this.props.translate('newGroupPage.createGroup')}
+                                </Text>
+                            </Pressable>
                         </View>
-                        <KeyboardSpacer />
-                    </>
-                )}
+                    )}
+                </View>
+                <KeyboardSpacer />
             </ScreenWrapper>
         );
     }