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: [],