🍒 Cherry pick PR #4774 to staging 🍒

android/app/build.gradle

@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001008604
-        versionName "1.0.86-4"
+        versionCode 1001008607
+        versionName "1.0.86-7"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.86.4</string>
+	<string>1.0.86.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.0.86.4</string>
+	<string>1.0.86.7</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.0.86-4",
+  "version": "1.0.86-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/pages/home/report/MarkerBadge/MarkerBadgeContainer/MarkerBadgeContainerPropTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Styles to be assigned to Container */
+    containerStyles: PropTypes.arrayOf(PropTypes.object).isRequired,
+
+    /** Rendered child component */
+    children: PropTypes.element.isRequired,
+};
+
+export default propTypes;

src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.android.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {View, Animated} from 'react-native';
+import styles from '../../../../../styles/styles';
+import propTypes from './MarkerBadgeContainerPropTypes';
+
+const MarkerBadgeContainer = props => (
+    <Animated.View style={[styles.reportMarkerBadgeWrapperAndroid, ...props.containerStyles]}>
+        <View style={styles.reportMarkerBadgeSubWrapperAndroid}>
+            {props.children}
+        </View>
+    </Animated.View>
+);
+
+MarkerBadgeContainer.propTypes = propTypes;
+MarkerBadgeContainer.displayName = 'MarkerBadgeContainer';
+
+export default MarkerBadgeContainer;

src/pages/home/report/MarkerBadge/MarkerBadgeContainer/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Animated} from 'react-native';
+import styles from '../../../../../styles/styles';
+import propTypes from './MarkerBadgeContainerPropTypes';
+
+const MarkerBadgeContainer = props => (
+    <Animated.View style={[styles.reportMarkerBadgeWrapper, ...props.containerStyles]}>
+        {props.children}
+    </Animated.View>
+);
+
+MarkerBadgeContainer.propTypes = propTypes;
+MarkerBadgeContainer.displayName = 'MarkerBadgeContainer';
+
+export default MarkerBadgeContainer;

src/pages/home/report/MarkerBadge.js → src/pages/home/report/MarkerBadge/index.js

@@ -1,15 +1,14 @@
 import React, {PureComponent} from 'react';
 import {Animated, Text, View} from 'react-native';
 import PropTypes from 'prop-types';
-import styles from '../../../styles/styles';
-import Button from '../../../components/Button';
-import Icon from '../../../components/Icon';
-import {Close, DownArrow} from '../../../components/Icon/Expensicons';
-import themeColors from '../../../styles/themes/default';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import styles from '../../../../styles/styles';
+import Button from '../../../../components/Button';
+import Icon from '../../../../components/Icon';
+import {Close, DownArrow} from '../../../../components/Icon/Expensicons';
+import themeColors from '../../../../styles/themes/default';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import MarkerBadgeContainer from './MarkerBadgeContainer';
 
-const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30;
-const MARKER_ACTIVE_TRANSLATE_Y = 10;
 const propTypes = {
     /** Count of new messages to show in the badge */
     count: PropTypes.number,
@@ -25,12 +24,17 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 };
+
 const defaultProps = {
     count: 0,
     active: false,
     onClose: () => {},
     onClick: () => {},
 };
+
+const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30;
+const MARKER_ACTIVE_TRANSLATE_Y = 10;
+
 class MarkerBadge extends PureComponent {
     constructor(props) {
         super(props);
@@ -65,12 +69,8 @@ class MarkerBadge extends PureComponent {
 
     render() {
         return (
-            <View style={styles.reportMarkerBadgeWrapper}>
-                <Animated.View style={[
-                    styles.reportMarkerBadge,
-                    styles.reportMarkerBadgeTransformation(this.translateY),
-                ]}
-                >
+            <MarkerBadgeContainer containerStyles={[styles.reportMarkerBadgeTransformation(this.translateY)]}>
+                <View style={styles.reportMarkerBadge}>
                     <View style={[
                         styles.flexRow,
                         styles.justifyContentBetween,
@@ -112,8 +112,8 @@ class MarkerBadge extends PureComponent {
                             )}
                         />
                     </View>
-                </Animated.View>
-            </View>
+                </View>
+            </MarkerBadgeContainer>
         );
     }
 }

src/styles/styles.js

@@ -2002,6 +2002,21 @@ const styles = {
         ...visibility('hidden'),
     },
 
+    reportMarkerBadgeWrapperAndroid: {
+        left: 0,
+        width: '100%',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 0,
+        zIndex: 100,
+        ...visibility('hidden'),
+    },
+
+    reportMarkerBadgeSubWrapperAndroid: {
+        left: '50%',
+        width: 'auto',
+    },
+
     reportMarkerBadge: {
         left: '-50%',
         ...visibility('visible'),