Merge pull request #543 from shoutem/release/4.0.13

Release/4.0.13

components/TextInput.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { TextInput as RNTextInput } from 'react-native';
 
@@ -10,16 +9,6 @@ import { connectStyle } from '@shoutem/theme';
 import { Caption } from './Text';
 import { View } from './View';
 
-// Style properties defined in theme which would case a warning if passed to a components style prop
-const omittedStyleProperties = [
-  'errorBorder',
-  'placeholderTextColor',
-  'selectionColor',
-  'underlineColorAndroid',
-  'withBorder',
-  'withoutBorder',
-];
-
 class TextInput extends PureComponent {
   constructor(props) {
     super(props);
@@ -40,23 +29,40 @@ class TextInput extends PureComponent {
   }
 
   render() {
-    const { errorMessage, highlightOnFocus, style } = this.props;
+    const {
+      errorMessage,
+      highlightOnFocus,
+      style,
+      ...otherProps
+    } = this.props;
     const { isFocused } = this.state;
 
+    const {
+      errorBorderColor,
+      placeholderTextColor,
+      selectionColor,
+      underlineColorAndroid,
+      withBorder,
+      withoutBorder,
+      ...otherStyle
+    } = style;
+
+    const hasBorder = (isFocused && highlightOnFocus) || !!errorMessage;
+
     return (
       <View>
         <RNTextInput
-          {..._.omit(this.props, 'style')}
+          {...otherProps}
           onBlur={this.handleBlur}
           onFocus={this.handleFocus}
           placeholderTextColor={style.placeholderTextColor}
           selectionColor={style.selectionColor}
           underlineColorAndroid={style.underlineColorAndroid}
-          style={[
-            _.omit(style, omittedStyleProperties),
-            (isFocused && highlightOnFocus) ? style.withBorder : style.withoutBorder,
-            !!errorMessage && style.errorBorder,
-          ]}
+          style={{
+            ...otherStyle,
+            ...(hasBorder ? style.withBorder : style.withoutBorder),
+            ...(!!errorMessage ? style.errorBorderColor : {}),
+          }}
         />
         {!!errorMessage &&
           <Caption styleName="form-error sm-gutter-top">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "description": "Styleable set of components for React Native applications",
   "dependencies": {
     "@shoutem/animation": "~0.12.4",

theme.js

@@ -1967,8 +1967,7 @@ export default (variables = defaultThemeVariables) => ({
     fontWeight: resolveFontWeight(variables.text.fontWeight),
     fontStyle: resolveFontStyle(variables.text.fontStyle),
 
-    errorBorder: {
-      borderWidth: 1,
+    errorBorderColor: {
       borderColor: variables.errorText.color,
     },
     withBorder: {