diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 268351699567..da2d5d0f6897 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -56,7 +56,6 @@ const defaultProps = {
disabled: false,
isSelected: false,
subtitle: undefined,
- subtitleTextStyle: {},
iconType: CONST.ICON_TYPE_ICON,
onPress: () => {},
onSecondaryInteraction: undefined,
@@ -76,6 +75,7 @@ const defaultProps = {
title: '',
numberOfLinesTitle: 1,
shouldGreyOutWhenDisabled: true,
+ error: '',
shouldRenderAsHTML: false,
};
@@ -276,6 +276,11 @@ const MenuItem = React.forwardRef((props, ref) => {
{props.description}
)}
+ {props.error && (
+
+ {props.error}
+
+ )}
{Boolean(props.furtherDetails) && (
{
{/* Since subtitle can be of type number, we should allow 0 to be shown */}
{(props.subtitle || props.subtitle === 0) && (
- {props.subtitle}
+ {props.subtitle}
)}
{!_.isEmpty(props.floatRightAvatars) && (
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index ec91fb292257..04eff0dfcea1 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -167,8 +167,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
shouldShowRightIcon={canEdit}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
- subtitle={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
- subtitleTextStyle={styles.textLabelError}
+ error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
/>
@@ -193,8 +192,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
- subtitle={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
- subtitleTextStyle={styles.textLabelError}
+ error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
/>
@@ -206,8 +204,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
titleStyle={styles.flex1}
onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
- subtitle={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
- subtitleTextStyle={styles.textLabelError}
+ error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
/>
{shouldShowCategory && (
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 6272a7a2ef7d..e1d10ca95971 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -88,9 +88,6 @@ const propTypes = {
/** A right-aligned subtitle for this menu option */
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- /** Style for the subtitle */
- subtitleTextStyle: stylePropTypes,
-
/** Flag to choose between avatar image or an icon */
iconType: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_ICON, CONST.ICON_TYPE_WORKSPACE]),
@@ -145,6 +142,9 @@ const propTypes = {
/** Should we grey out the menu item when it is disabled? */
shouldGreyOutWhenDisabled: PropTypes.bool,
+ /** Error to display below the title */
+ error: PropTypes.string,
+
/** Should render the content in HTML format */
shouldRenderAsHTML: PropTypes.bool,
};