better animations handling

software-mansion-labs · Dec 8, 2023 · f5e5090 · f5e5090
1 parent df5da55
commit f5e5090
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -25,19 +25,26 @@ const propTypes = {
 
     /** Overlay content to display on top of animation */
     overlayContent: PropTypes.func,
+
+    /** When a screen is in the central pane, we have to use max height, to make it look good. */
+    // TODO: Merge this prop with shouldShowBackButtonOnlyOnMobile from HeaderWithBackButton. Can name it like isCentralPaneScreen
+    shouldUseMaxHeight: PropTypes.bool,
 };
 
 const defaultProps = {
     backgroundColor: undefined,
     footer: null,
     overlayContent: null,
+    shouldUseMaxHeight: false,
 };
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
 
+    const shouldUseMaxHeight = propsToPassToHeader.shouldUseMaxHeight && !isSmallScreenWidth;
+
     return (
         <HeaderPageLayout
             backgroundColor={backgroundColor || theme.appBG}
@@ -47,15 +54,15 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                     <Lottie
                         source={illustration}
                         style={styles.w100}
-                        webStyle={isSmallScreenWidth ? styles.w100 : styles.h100}
+                        webStyle={shouldUseMaxHeight ? styles.h100 : styles.w100}
                         autoPlay
                         loop
                     />
                     {overlayContent && overlayContent()}
                 </>
             }
             // TODO: move to variables
-            headerContainerStyles={[styles.justifyContentCenter, styles.w100, !isSmallScreenWidth && {height: CONST.CENTRAL_PANE_ANIMATION_HEIGHT}]}
+            headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldUseMaxHeight && {height: CONST.CENTRAL_PANE_ANIMATION_HEIGHT}]}
             footer={footer}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToPassToHeader}

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
@@ -48,6 +48,7 @@ function PreferencesPage(props) {
             // onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES].backgroundColor}
             illustration={LottieAnimations.PreferencesDJ}
+            shouldUseMaxHeight
             shouldShowBackButtonOnlyOnMobile
         >
             <View style={styles.mb6}>

diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -71,6 +71,7 @@ function SecuritySettingsPage(props) {
             illustration={LottieAnimations.Safe}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
             shouldShowBackButtonOnlyOnMobile
+            shouldUseMaxHeight
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>