Fix Page Animations

src/components/ScreenWrapper.js

@@ -7,6 +7,7 @@ import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import styles, {getSafeAreaPadding} from '../styles/styles';
 import HeaderGap from './HeaderGap';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
+import onScreenTransitionEnd from '../libs/onScreenTransitionEnd';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -24,9 +25,15 @@ const propTypes = {
     /** Whether to include padding top */
     includePaddingTop: PropTypes.bool,
 
-    /** react-navigation object that will allow us to goBack() */
+    // Called when navigated Screen's transition is finished.
+    onTransitionEnd: PropTypes.func,
+
+    // react-navigation navigation object available to screen components
     navigation: PropTypes.shape({
-        /** Returns to the previous navigation state e.g. if this is inside a Modal we will dismiss it */
+        // 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,
     }),
 };
@@ -35,24 +42,39 @@ 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.unsubscribe = KeyboardShortcut.subscribe('Escape', () => {
+        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe('Escape', () => {
             this.props.navigation.goBack();
         }, [], true);
+
+        this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
+            this.setState({didScreenTransitionEnd: true});
+            this.props.onTransitionEnd();
+        });
     }
 
     componentWillUnmount() {
-        if (!this.unsubscribe) {
-            return;
+        if (this.unsubscribeEscapeKey) {
+            this.unsubscribeEscapeKey();
+        }
+        if (this.unsubscribeTransitionEnd) {
+            this.unsubscribeTransitionEnd();
         }
-
-        this.unsubscribe();
     }
 
     render() {
@@ -80,7 +102,10 @@ 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)
+                                    ? this.props.children({
+                                        insets,
+                                        didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                    })
                                     : this.props.children
                             }
                         </View>

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -69,10 +69,12 @@ Onyx.connect({
 
 const RootStack = createCustomModalStackNavigator();
 
-// When modal screen gets focused, update modal visibility in Onyx
+// 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
 // https://reactnavigation.org/docs/navigation-events/
 const modalScreenListeners = {
-    focus: () => {
+    transitionEnd: () => {
         setModalVisibility(true);
     },
     beforeRemove: () => {
@@ -160,7 +162,7 @@ class AuthScreens extends React.Component {
         const modalScreenOptions = {
             headerShown: false,
             cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
-            cardStyleInterpolator: modalCardStyleInterpolator,
+            cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, props),
             animationEnabled: true,
             gestureDirection: 'horizontal',
             cardOverlayEnabled: true,

src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js

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

src/libs/onScreenTransitionEnd/index.ios.js

@@ -0,0 +1,19 @@
+/**
+ * Navigation's transitionEnd is not reliable on IOS thus we use InteractonManager
+ * Some information https://github.com/software-mansion/react-native-screens/issues/713
+*/
+import {InteractionManager} from 'react-native';
+
+/**
+ * Call the callback after screen transiton has ended
+ *
+ * @param {Object} navigation Screen navigation prop
+ * @param {Function} callback Method to call
+ * @returns {Function}
+ */
+function onScreenTransitionEnd(navigation, callback) {
+    const handle = InteractionManager.runAfterInteractions(callback);
+    return () => handle.cancel();
+}
+
+export default onScreenTransitionEnd;

src/libs/onScreenTransitionEnd/index.js

@@ -0,0 +1,14 @@
+import Str from 'expensify-common/lib/str';
+
+/**
+ * Call the callback after screen transiton has ended
+ *
+ * @param {Object} navigation Screen navigation prop
+ * @param {Function} callback Method to call
+ * @returns {Function}
+ */
+function onScreenTransitionEnd(navigation, callback) {
+    return navigation.addListener('transitionEnd', evt => Str.result(callback, evt));
+}
+
+export default onScreenTransitionEnd;

src/pages/NewChatPage.js

@@ -13,6 +13,7 @@ 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,7 +54,6 @@ class NewChatPage extends Component {
         super(props);
 
         this.createNewChat = this.createNewChat.bind(this);
-
         const {
             recentReports,
             personalDetails,
@@ -127,39 +127,46 @@ class NewChatPage extends Component {
 
         return (
             <ScreenWrapper>
-                <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 {
-                                recentReports,
-                                personalDetails,
-                                userToInvite,
-                            } = getNewChatOptions(
-                                this.props.reports,
-                                this.props.personalDetails,
-                                searchValue,
-                            );
-                            this.setState({
-                                searchValue,
-                                recentReports,
-                                userToInvite,
-                                personalDetails,
-                            });
-                        }}
-                        headerMessage={headerMessage}
-                        disableArrowKeysActions
-                        hideAdditionalOptionStates
-                        forceTextUnreadStyle
-                    />
-                </View>
-                <KeyboardSpacer />
+                {({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 {
+                                        recentReports,
+                                        personalDetails,
+                                        userToInvite,
+                                    } = getNewChatOptions(
+                                        this.props.reports,
+                                        this.props.personalDetails,
+                                        searchValue,
+                                    );
+                                    this.setState({
+                                        searchValue,
+                                        recentReports,
+                                        userToInvite,
+                                        personalDetails,
+                                    });
+                                }}
+                                headerMessage={headerMessage}
+                                disableArrowKeysActions
+                                hideAdditionalOptionStates
+                                forceTextUnreadStyle
+                            />
+                            )}
+                        </View>
+                        <KeyboardSpacer />
+                    </>
+                )}
             </ScreenWrapper>
         );
     }

src/pages/NewGroupPage.js

@@ -14,6 +14,7 @@ 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';
 import Button from '../components/Button';
@@ -56,7 +57,6 @@ class NewGroupPage extends Component {
 
         this.toggleOption = this.toggleOption.bind(this);
         this.createGroup = this.createGroup.bind(this);
-
         const {
             recentReports,
             personalDetails,
@@ -186,53 +186,62 @@ class NewGroupPage extends Component {
         );
         return (
             <ScreenWrapper>
-                <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]}>
-                            <Button
-                                success
-                                onPress={this.createGroup}
-                                style={[styles.w100]}
-                                text={this.props.translate('newGroupPage.createGroup')}
-                            />
+                {({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]}>
+                                        <Button
+                                            success
+                                            onPress={this.createGroup}
+                                            style={[styles.w100]}
+                                            text={this.props.translate('newGroupPage.createGroup')}
+                                        />
+                                    </View>
+                                    )}
+                                </>
+                            )}
                         </View>
-                    )}
-                </View>
-                <KeyboardSpacer />
+                        <KeyboardSpacer />
+                    </>
+                )}
             </ScreenWrapper>
         );
     }