[No QA] Create InlineSystemMessage component

src/components/InlineSystemMessage.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import Text from './Text';
+import * as Expensicons from './Icon/Expensicons';
+import colors from '../styles/colors';
+import Icon from './Icon';
+
+const propTypes = {
+    /** Error to display */
+    message: PropTypes.string.isRequired,
+};
+
+const InlineSystemMessage = (props) => {
+    if (props.message.length === 0) {
+        return null;
+    }
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+            <Icon src={Expensicons.Exclamation} fill={colors.red} />
+            <Text style={[styles.inlineSystemMessage]}>{props.message}</Text>
+        </View>
+    );
+};
+
+InlineSystemMessage.propTypes = propTypes;
+InlineSystemMessage.displayName = 'InlineSystemMessage';
+export default InlineSystemMessage;

src/styles/styles.js

@@ -2525,6 +2525,13 @@ const styles = {
         marginBottom: 40,
         padding: 16,
     },
+
+    inlineSystemMessage: {
+        color: themeColors.textSupporting,
+        fontSize: variables.fontSizeLabel,
+        fontFamily: fontFamily.GTA,
+        marginLeft: 4,
+    },
 };
 
 export default styles;