diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index 6c911d4fde85..564d9afd0bfe 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -4,6 +4,7 @@ import {
} from 'react-native';
import Str from 'expensify-common/lib/str';
import ExpensiTextInputLabel from './ExpensiTextInputLabel';
+import Text from '../Text';
import {propTypes, defaultProps} from './propTypes';
import themeColors from '../../styles/themes/default';
import styles from '../../styles/styles';
@@ -112,6 +113,7 @@ class BaseExpensiTextInput extends Component {
label,
value,
placeholder,
+ errorText,
hasError,
containerStyles,
inputStyle,
@@ -123,46 +125,51 @@ class BaseExpensiTextInput extends Component {
const hasLabel = Boolean(label.length);
return (
-
- this.input.focus()} focusable={false}>
-
- {hasLabel ? (
-
+
+ this.input.focus()} focusable={false}>
+
+ {hasLabel ? (
+
+ ) : null}
+ {
+ if (typeof innerRef === 'function') { innerRef(ref); }
+ this.input = ref;
+ }}
+ // eslint-disable-next-line
+ {...inputProps}
+ value={value}
+ placeholder={(this.state.isFocused || !label) ? placeholder : null}
+ placeholderTextColor={themeColors.placeholderText}
+ underlineColorAndroid="transparent"
+ style={[...inputStyle, errorText ? styles.errorOutline : undefined]}
+ onFocus={this.onFocus}
+ onBlur={this.onBlur}
+ onChangeText={this.setValue}
/>
- ) : null}
- {
- if (typeof innerRef === 'function') { innerRef(ref); }
- this.input = ref;
- }}
- // eslint-disable-next-line
- {...inputProps}
- value={value}
- placeholder={(this.state.isFocused || !label) ? placeholder : null}
- placeholderTextColor={themeColors.placeholderText}
- underlineColorAndroid="transparent"
- style={inputStyle}
- onFocus={this.onFocus}
- onBlur={this.onBlur}
- onChangeText={this.setValue}
- />
-
-
+
+
+
+ {Boolean(errorText) && (
+ {errorText}
+ )}
);
}
diff --git a/src/components/ExpensiTextInput/propTypes.js b/src/components/ExpensiTextInput/propTypes.js
index 6231018ccee5..e3a42808a3d5 100644
--- a/src/components/ExpensiTextInput/propTypes.js
+++ b/src/components/ExpensiTextInput/propTypes.js
@@ -10,6 +10,9 @@ const propTypes = {
/** Input value placeholder */
placeholder: PropTypes.string,
+ /** Error text to display */
+ errorText: PropTypes.string,
+
/** Should the input be styled for errors */
hasError: PropTypes.bool,
@@ -28,6 +31,7 @@ const propTypes = {
const defaultProps = {
label: '',
+ errorText: '',
placeholder: '',
error: false,
containerStyles: [],