Custom validatable icon rendering

mixins/WidgetMixin.js

@@ -22,6 +22,7 @@ module.exports = {
     formStyles: PropTypes.object,
     validationImage: PropTypes.bool,
     openModal: PropTypes.func,
+    customValidationView: PropTypes.func,
     // navigator: ,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -43,6 +44,7 @@ module.exports = {
       navigator: null,
       onFocus: () => {},
       onBlur: () => {},
+      customValidationView: () => {},
       validateOnEmpty: false,
     };
   },
@@ -215,11 +217,10 @@ module.exports = {
 
     if (hasValue && hasImageProp && !isOptionWidget && shouldShowValidationImage && toValidate) {
       const imageSrc = hasValidationErrors ? require('../icons/delete_sign.png'):require('../icons/checkmark.png');
-
       return (
         <Image
           style={this.getStyle('rowImage')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={imageSrc}
         />
       );
@@ -231,12 +232,49 @@ module.exports = {
       return (
         <Image
           style={this.getStyle('rowImage')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={this.props.image}
         />
       );
     }
 
     return null;
   },
+
+  _renderCustomValidationView() {
+    var validators = null;
+    if (this.props.displayValue) {
+      // in case of modal widget
+      validators = GiftedFormManager.getValidators(this.props.formName, this.props.displayValue);
+    } else {
+      validators = GiftedFormManager.getValidators(this.props.formName, this.props.name);
+    }
+
+    let toValidate = false;
+    if (Array.isArray(validators.validate)) {
+      if (validators.validate.length > 0) {
+        toValidate = true;
+      }
+    }
+
+    // @todo image delete_sign / checkmark should be editable via option
+    // @todo options enable live validation
+
+    let hasValue = typeof this.state.value !== 'undefined' && this.state.value !== '';
+
+    if (this.props.validateOnEmpty) {
+      hasValue = true;
+    }
+
+    const hasValidationErrors = this.state.validationErrorMessage !== null;
+    const isOptionWidget = this.props.type === 'OptionWidget';
+    const shouldShowValidationImage = this.props.validationImage === true;
+
+    if (this.props.customValidationView) {
+      const showValidation = hasValue && !isOptionWidget && shouldShowValidationImage && toValidate;
+      const isValid = !hasValidationErrors;
+      return this.props.customValidationView(showValidation, isValid)
+    }
+    return null;
+  },
 };

widgets/ModalWidget.js

@@ -54,7 +54,7 @@ module.exports = createReactClass({
       return (
         <Image
           style={this.getStyle('disclosure')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={require('../icons/disclosure.png')}
         />
       );
@@ -114,7 +114,7 @@ module.exports = createReactClass({
                   marginLeft: 10,
                   tintColor: '#097881',
                 }}
-                resizeMode={Image.resizeMode.contain}
+                resizeMode="contain"
                 source={require('../icons/close.png')}
               />
             </TouchableOpacity>
@@ -139,7 +139,7 @@ module.exports = createReactClass({
                 marginRight: 10,
                 tintColor: '#097881',
               }}
-              resizeMode={Image.resizeMode.contain}
+              resizeMode="contain"
               source={require('../icons/check.png')}
             />
           </TouchableOpacity>
@@ -276,6 +276,8 @@ module.exports = createReactClass({
       >
         <View style={this.getStyle('row')}>
           {this._renderImage()}
+          {this._renderCustomValidationView()}
+
           <Text numberOfLines={1} style={this.getStyle('modalTitle')}>{this.props.title}</Text>
           <View style={this.getStyle('alignRight')}>
             <Text numberOfLines={1} style={this.getStyle('modalValue')}>{this.state.value}</Text>

widgets/OptionWidget.js

@@ -27,7 +27,7 @@ module.exports = createReactClass({
       return (
         <Image
           style={this.getStyle('checkmark')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={require('../icons/check.png')}
         />
       );
@@ -63,6 +63,7 @@ module.exports = createReactClass({
         >
           <View style={this.getStyle('row')}>
             {this._renderImage()}
+            {this._renderCustomValidationView()}
             <Text numberOfLines={1} style={this.getStyle('switchTitle')}>
               {this.props.title}
             </Text>

widgets/RowWidget.js

@@ -28,7 +28,7 @@ module.exports = createReactClass({
       return (
         <Image
           style={this.getStyle('disclosure')}
-          resizeMode={Image.resizeMode.contain}
+          resizeMode="contain"
           source={require('../icons/disclosure.png')}
         />
       );

widgets/SelectCountryWidget.js

@@ -1857,7 +1857,7 @@ module.exports = createReactClass({
           }}>
             <Image
               key={rowData.alpha2+'Image'}
-              resizeMode={Image.resizeMode.contain}
+              resizeMode="contain"
               source={image}
               style={{
                 height: 30,

widgets/SwitchWidget.js

@@ -43,6 +43,7 @@ module.exports = createReactClass({
       <View style={this.getStyle('rowContainer')}>
         <View style={this.getStyle('row')}>
           {this._renderImage()}
+          {this._renderCustomValidationView()}
 
           <Text numberOfLines={1} style={this.getStyle('switchTitle')}>{this.props.title}</Text>
           <View style={this.getStyle('switchAlignRight')}>

widgets/TextAreaWidget.js

@@ -21,6 +21,7 @@ module.exports = createReactClass({
   render() {
     return (
       <View style={this.getStyle('textAreaRow')}>
+        {this._renderCustomValidationView()}
         <TextInput
           style={this.getStyle('textArea')}
           multiline={true}

widgets/TextInputWidget.js

@@ -53,6 +53,7 @@ module.exports = createReactClass({
         <View style={this.getStyle(['rowContainer'])}>
           <View style={this.getStyle(['titleContainer'])}>
             {this._renderImage()}
+            {this._renderCustomValidationView()}
             <Text numberOfLines={1} style={this.getStyle(['textInputTitle'])}>{this.props.title}</Text>
           </View>
 
@@ -78,6 +79,7 @@ module.exports = createReactClass({
       <View style={this.getStyle(['rowContainer'])}>
         <View style={this.getStyle(['row'])}>
           {this._renderImage()}
+          {this._renderCustomValidationView()}
           {this._renderTitle()}
           <TextInput
             ref='input'