Merge pull request #33218 from software-mansion-labs/lhp-slide-animat…

…ion-fix Fix LHP animation on smaller screens
Expensify · Dec 18, 2023 · 08323cc · 08323cc
2 parents c96a209 + 53e4fd6
commit 08323cc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -47,7 +47,8 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
             // This is necessary to cover translated sidebar with overlay.
             width: isSmallScreenWidth ? '100%' : '200%',
 
-            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}],
+            // LHP should be displayed in place of the sidebar
+            left: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
         },
     },
     homeScreen: {

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1410,8 +1410,8 @@ const styles = (theme: ThemeColors) =>
                 position: 'absolute',
                 left: 0,
                 height: '100%',
-                borderTopRightRadius: isSmallScreenWidth ? 0 : 24,
-                borderBottomRightRadius: isSmallScreenWidth ? 0 : 24,
+                borderTopRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
+                borderBottomRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
                 overflow: 'hidden',
             } satisfies ViewStyle),
 
@@ -1640,7 +1640,8 @@ const styles = (theme: ThemeColors) =>
             ({
                 ...positioning.pFixed,
                 // We need to stretch the overlay to cover the sidebar and the translate animation distance.
-                left: isModalOnTheLeft ? 0 : -2 * variables.sideBarWidth,
+                // The overlay must also cover borderRadius of the LHP component
+                left: isModalOnTheLeft ? -variables.lhpBorderRadius : -2 * variables.sideBarWidth,
                 top: 0,
                 bottom: 0,
                 right: isModalOnTheLeft ? -2 * variables.sideBarWidth : 0,

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -193,4 +193,6 @@ export default {
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
     cardNameWidth: 156,
+
+    lhpBorderRadius: 24,
 } as const;