Infra/more modifiers support (#509)

* add animated modifier to View

* add margins support to TextField

Author: ethanshar

src/components/inputs/BaseInput.js

@@ -67,6 +67,7 @@ export default class BaseInput extends BaseComponent {
     super(props);
 
     this.state = {
+      ...this.state,
       value: props.value,
       focused: false,
       valid: false,

src/components/inputs/TextField.js

@@ -157,6 +157,7 @@ export default class TextField extends BaseInput {
     this.toggleExpandableModal = this.toggleExpandableModal.bind(this);
 
     this.state = {
+      ...this.state,
       value: props.value, // for floatingPlaceholder functionality
       floatingPlaceholderState: new Animated.Value(this.shouldFloatPlaceholder(props.value) ? 1 : 0),
       showExpandableModal: false
@@ -553,11 +554,12 @@ export default class TextField extends BaseInput {
   }
 
   render() {
+    const {margins} = this.state;
     const {expandable, containerStyle, underlineColor, useTopErrors, hideUnderline} = this.getThemeProps();
     const underlineStateColor = this.getStateColor(underlineColor, true);
 
     return (
-      <View style={[this.styles.container, containerStyle]} collapsable={false}>
+      <View style={[this.styles.container, margins, containerStyle]} collapsable={false}>
         {this.shouldShowTopError() ? this.renderError(useTopErrors) : this.renderTitle()}
 
         <View

src/components/view/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
-import {View as RNView, ViewPropTypes, SafeAreaView} from 'react-native';
+import {View as RNView, ViewPropTypes, SafeAreaView, Animated} from 'react-native';
 import {BaseComponent, asBaseComponent, forwardRef} from '../../commons';
 import * as Constants from '../../helpers/Constants';
 
@@ -20,8 +20,21 @@ class View extends PureComponent {
      * If true, will render as SafeAreaView
      */
     useSafeArea: PropTypes.bool,
+    /**
+     * Use Animate.View as a container
+     */
+    animated: PropTypes.bool
   };
 
+  constructor(props) {
+    super(props);
+
+    this.Container = props.useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
+    if (props.animated) {
+      this.Container = Animated.createAnimatedComponent(this.Container);
+    }
+  }
+
   // TODO: do we need this?
   setNativeProps(nativeProps) {
     this._root.setNativeProps(nativeProps); // eslint-disable-line
@@ -41,7 +54,7 @@ class View extends PureComponent {
       ...others
     } = this.props;
     const {backgroundColor, borderRadius, paddings, margins, alignments, flexStyle} = modifiers;
-    const Element = useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
+    const Element = this.Container;
 
     return (
       <Element