TextField - Adding 'errorColor' prop to allow customizing the error massage text color. (#915)

Author: Inbal-Tish

demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js

@@ -155,7 +155,8 @@ export default class InputsScreen extends Component {
             placeholder="Underline colors & error"
             onChangeText={this.onChangeText}
             error={this.state.error}
-            underlineColor={{focus: Colors.purple50, error: Colors.yellow60}}
+            underlineColor={{focus: Colors.purple50, error: Colors.orange60}}
+            errorColor={Colors.orange60}
           />
 
           <TextField

src/components/textField/index.js

@@ -98,6 +98,10 @@ export default class TextField extends BaseInput {
      * should the input component support error messages
      */
     enableErrors: PropTypes.bool,
+    /**
+     * input error message's text color
+     */
+    errorColor: PropTypes.string,
     /**
      * should the input expand to another text area modal
      */
@@ -475,14 +479,15 @@ export default class TextField extends BaseInput {
   }
 
   renderError(visible) {
-    const {enableErrors, useTopErrors} = this.getThemeProps();
+    const {enableErrors, useTopErrors, errorColor} = this.getThemeProps();
+    const textColor = errorColor ? {color: errorColor} : undefined;
     const positionStyle = useTopErrors ? this.styles.topLabel : this.styles.bottomLabel;
     const error = this.getErrorMessage();
 
     if (visible && enableErrors) {
       return (
         <Text
-          style={[this.styles.errorMessage, this.styles.label, positionStyle]}
+          style={[this.styles.errorMessage, this.styles.label, positionStyle, textColor]}
           accessible={!_.isEmpty(error) && !useTopErrors}
         >
           {error}