From cba05ceb5de19f70fed7299916f52285000bc41b Mon Sep 17 00:00:00 2001
From: Vit Horacek <36083550+mountiny@users.noreply.github.com>
Date: Wed, 20 Dec 2023 18:51:01 +0100
Subject: [PATCH] Merge pull request #33359 from
 software-mansion-labs/lhp-remove-border-radius

(cherry picked from commit 348e8ae7f7b322a1450e2b5ffc72eb1dd59b1ef3)
---
 src/libs/Navigation/linkTo.ts |  2 +-
 src/styles/index.ts           | 20 ++++++++++----------
 src/styles/variables.ts       |  2 --
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts
index bb680bf4cb27..f1671dc286da 100644
--- a/src/libs/Navigation/linkTo.ts
+++ b/src/libs/Navigation/linkTo.ts
@@ -80,7 +80,7 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
 
     // If action type is different than NAVIGATE we can't change it to the PUSH safely
     if (action?.type === CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) {
-        const topRouteName = rootState.routes.at(-1)?.name;
+        const topRouteName = rootState?.routes?.at(-1)?.name;
         const isTargetNavigatorOnTop = topRouteName === action.payload.name;
 
         // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a24d7ffdf869..88e9faff60a7 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -122,6 +122,13 @@ const headlineFont = {
     fontWeight: '500',
 } satisfies TextStyle;
 
+const modalNavigatorContainer = (isSmallScreenWidth: boolean) =>
+    ({
+        position: 'absolute',
+        width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+        height: '100%',
+    } satisfies ViewStyle);
+
 const webViewStyles = (theme: ThemeColors) =>
     ({
         // As of react-native-render-html v6, don't declare distinct styles for
@@ -1406,21 +1413,14 @@ const styles = (theme: ThemeColors) =>
 
         LHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
-                position: 'absolute',
+                ...modalNavigatorContainer(isSmallScreenWidth),
                 left: 0,
-                height: '100%',
-                borderTopRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
-                borderBottomRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
-                overflow: 'hidden',
             } satisfies ViewStyle),
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
-                position: 'absolute',
+                ...modalNavigatorContainer(isSmallScreenWidth),
                 right: 0,
-                height: '100%',
             } satisfies ViewStyle),
 
         onlyEmojisText: {
@@ -1641,7 +1641,7 @@ const styles = (theme: ThemeColors) =>
                 ...positioning.pFixed,
                 // We need to stretch the overlay to cover the sidebar and the translate animation distance.
                 // The overlay must also cover borderRadius of the LHP component
-                left: isModalOnTheLeft ? -variables.lhpBorderRadius : -2 * variables.sideBarWidth,
+                left: isModalOnTheLeft ? 0 : -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
index cf11ed28f0d8..1127ff0ad588 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -193,6 +193,4 @@ export default {
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
     cardNameWidth: 156,
-
-    lhpBorderRadius: 24,
 } as const;