Merge pull request #12366 from aimane-chnaif/fix-11336

refactor navigation modal card styles
Expensify · Nov 21, 2022 · 5a03b50 · 5a03b50
2 parents e480519 + d2a6919
commit 5a03b50
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 11 deletions.
diff --git 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
@@ -180,6 +180,7 @@ class SearchPage extends Component {
                                 hideAdditionalOptionStates
                                 showTitleTooltip
                                 shouldShowOptions={didScreenTransitionEnd}
+                                shouldDelayFocus
                             />
                         </View>
                     </>

diff --git 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
@@ -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
@@ -227,6 +227,7 @@ class IOUParticipantsSplit extends Component {
                         shouldShowConfirmButton
                         confirmButtonText={this.props.translate('common.next')}
                         onConfirmSelection={this.finalizeParticipants}
+                        shouldDelayFocus
                     />
                 </View>
             </>

diff --git 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/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
@@ -1,10 +1,7 @@
 import variables from '../variables';
 
 export default isSmallScreenWidth => ({
-    position: 'absolute',
-    top: 0,
-    right: 0,
     width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
     backgroundColor: 'transparent',
-    height: '100%',
+    alignSelf: 'flex-end',
 });
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2074,7 +2074,6 @@ const styles = {
 
     navigationScreenCardStyle: {
         backgroundColor: themeColors.appBG,
-        height: '100%',
     },
 
     navigationSceneFullScreenWrapper: {