refactor navigation modal card styles

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({

src/pages/SearchPage.js

@@ -180,6 +180,7 @@ class SearchPage extends Component {
                                 hideAdditionalOptionStates
                                 showTitleTooltip
                                 shouldShowOptions={didScreenTransitionEnd}
+                                shouldDelayFocus
                             />
                         </View>
                     </>

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>
         );

src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js

@@ -136,6 +136,7 @@ class IOUParticipantsRequest extends Component {
                 headerMessage={headerMessage}
                 hideAdditionalOptionStates
                 forceTextUnreadStyle
+                shouldDelayFocus
             />
         );
     }

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>
             </>

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',
     };
 }

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',
 });

src/styles/styles.js

@@ -2074,7 +2074,6 @@ const styles = {
 
     navigationScreenCardStyle: {
         backgroundColor: themeColors.appBG,
-        height: '100%',
     },
 
     navigationSceneFullScreenWrapper: {