🍒 Cherry pick PR #13014 to staging 🍒

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001023106
-        versionName "1.2.31-6"
+        versionCode 1001023107
+        versionName "1.2.31-7"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.31.6</string>
+	<string>1.2.31.7</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.31.6</string>
+	<string>1.2.31.7</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.31-6",
+  "version": "1.2.31-7",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js

@@ -28,15 +28,10 @@ export default (
         cardStyle.transform = [{translateX}];
     }
 
-    let containerStyle;
-    if (!isSmallScreenWidth) {
-        containerStyle = {
-            overflow: 'hidden',
-        };
-    }
-
     return ({
-        containerStyle,
+        containerStyle: {
+            overflow: 'hidden',
+        },
         cardStyle,
         overlayStyle: {
             opacity: progress.interpolate({

src/pages/SearchPage.js

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

src/pages/iou/IOUCurrencySelection.js

@@ -126,7 +126,6 @@ class IOUCurrencySelection extends Component {
                     onChangeText={this.changeSearchValue}
                     placeholderText={this.props.translate('common.search')}
                     headerMessage={headerMessage}
-                    shouldDelayFocus
                 />
             </ScreenWrapper>
         );

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

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

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

@@ -226,7 +226,6 @@ class IOUParticipantsSplit extends Component {
                         shouldShowConfirmButton
                         confirmButtonText={this.props.translate('common.next')}
                         onConfirmSelection={this.finalizeParticipants}
-                        shouldDelayFocus
                     />
                 </View>
             </>

src/styles/cardStyles/index.js

@@ -8,7 +8,9 @@ import variables from '../variables';
  */
 export default function getCardStyles(isSmallScreenWidth, screenWidth) {
     return {
+        position: 'fixed',
         width: isSmallScreenWidth ? screenWidth : variables.sideBarWidth,
-        alignSelf: 'flex-end',
+        right: 0,
+        height: '100%',
     };
 }

src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js

@@ -1,7 +1,10 @@
 import variables from '../variables';
 
 export default isSmallScreenWidth => ({
+    position: 'absolute',
+    top: 0,
+    right: 0,
     width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
     backgroundColor: 'transparent',
-    alignSelf: 'flex-end',
+    height: '100%',
 });

src/styles/styles.js

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