From 5779f206897099c6118a27efb352580d73d66a20 Mon Sep 17 00:00:00 2001
From: aimane-chnaif <aiman.chnaif@gmail.com>
Date: Wed, 2 Nov 2022 15:58:06 +1000
Subject: [PATCH 1/2] refactor navigation modal card styles

---
 .../AppNavigator/modalCardStyleInterpolator.js        | 11 ++++++++---
 src/pages/SearchPage.js                               |  1 +
 src/styles/StyleUtils.js                              |  5 +----
 src/styles/cardStyles/index.js                        |  4 +---
 src/styles/styles.js                                  |  1 -
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
index 433620deecb96..cf16d687d5557 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
@@ -28,10 +28,15 @@ export default (
         cardStyle.transform = [{translateX}];
     }
 
-    return ({
-        containerStyle: {
+    let containerStyle;
+    if (!isSmallScreenWidth) {
+        containerStyle = {
             overflow: 'hidden',
-        },
+        };
+    }
+
+    return ({
+        containerStyle,
         cardStyle,
         overlayStyle: {
             opacity: progress.interpolate({
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 81acad10eebc3..13fb03e3d738a 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -183,6 +183,7 @@ class SearchPage extends Component {
                                 hideAdditionalOptionStates
                                 showTitleTooltip
                                 shouldShowOptions={didScreenTransitionEnd}
+                                shouldDelayFocus
                             />
                         </View>
                     </>
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 50d1f9ba5b81e..2a48dd7af4922 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -92,12 +92,9 @@ function getNavigationDrawerType(isSmallScreenWidth) {
 
 function getNavigationModalCardStyle(isSmallScreenWidth) {
     return {
-        position: 'absolute',
-        top: 0,
-        right: 0,
         width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
         backgroundColor: 'transparent',
-        height: '100%',
+        alignSelf: 'flex-end',
     };
 }
 
diff --git a/src/styles/cardStyles/index.js b/src/styles/cardStyles/index.js
index 4759700c6f929..662beb6390cd1 100644
--- a/src/styles/cardStyles/index.js
+++ b/src/styles/cardStyles/index.js
@@ -8,9 +8,7 @@ import variables from '../variables';
  */
 export default function getCardStyles(isSmallScreenWidth, screenWidth) {
     return {
-        position: 'fixed',
         width: isSmallScreenWidth ? screenWidth : variables.sideBarWidth,
-        right: 0,
-        height: '100%',
+        alignSelf: 'flex-end',
     };
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8cd7cbdce076d..4ae43877fab2d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2066,7 +2066,6 @@ const styles = {
 
     navigationScreenCardStyle: {
         backgroundColor: themeColors.appBG,
-        height: '100%',
     },
 
     navigationSceneFullScreenWrapper: {

From a6e76f2126e53f09ab891841dbfd2e0f34131276 Mon Sep 17 00:00:00 2001
From: aimane-chnaif <aiman.chnaif@gmail.com>
Date: Wed, 2 Nov 2022 16:58:40 +1000
Subject: [PATCH 2/2] fix animation issues while navigating to modal screen
 with autoFocus enabled

---
 src/pages/iou/IOUCurrencySelection.js                            | 1 +
 .../iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js      | 1 +
 src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js  | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 2621b19ce81fc..d5b555f40338b 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -126,6 +126,7 @@ class IOUCurrencySelection extends Component {
                     onChangeText={this.changeSearchValue}
                     placeholderText={this.props.translate('common.search')}
                     headerMessage={headerMessage}
+                    shouldDelayFocus
                 />
             </ScreenWrapper>
         );
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
index 56a9f2634ee6b..5968242bcbac6 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
@@ -136,6 +136,7 @@ class IOUParticipantsRequest extends Component {
                 headerMessage={headerMessage}
                 hideAdditionalOptionStates
                 forceTextUnreadStyle
+                shouldDelayFocus
             />
         );
     }
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index f1a1f2a3f5c57..eacefbeedceb3 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -227,6 +227,7 @@ class IOUParticipantsSplit extends Component {
                         shouldShowConfirmButton
                         confirmButtonText={this.props.translate('common.next')}
                         onConfirmSelection={this.finalizeParticipants}
+                        shouldDelayFocus
                     />
                 </View>
             </>