add cleanStyle and dirtyStyle props

.travis.yml

@@ -5,7 +5,7 @@ deploy:
   provider: npm
   email: [email protected]
   api_key:
-    secure: YAYQqaTuQW+mVlhLk+yzPj3hqS+o8BOCwMejOHlqkOyRlW5XjUvkNbYgrIJhiED7U8HVpxLoo4t1LsInzqp3nA0A3cxgWQsANCbACZHtPeEcCocS5p7DiZMVO1qNZcNHKufXZ+PMydfcmMAsm6/hlc4u+YYK1i2y22e8cBBLjjjHpzaE4meY7KKlMxCdBnpqB1I+duWPiR2ylju/4oAhYeG80GtpwpgpGe6Tq+qBi0vgAqzepverSvFA96WEm/rtGIIZfS2VyRiLbiyRSjG74/46zkpcSaLQtWJtZBiQLLBWSrZATWfxISaMpKxWN2DGhGwbaowAIousy6Z0pXa4uqI76aPdIPPOL3HKS+XVZrVmiCpM3wAwxNxhyDkmhSB1bLMf1bAFgGzm4i9lMYttZGb+dXoHCN4RI1pVRWpQJb6NBRsh1h2jzpbBSATMSWpQ7/fq/a7x6cW/pET+Cgo74EYwPxix/m7uDAoG3r8p3A0Nreguc0pvW2kHcodLd+BPItgnDWM8eUucYaCarGplXBb21VAfTnyZ1YVe/WEKoMXaRav0jj/ZMfdS2AC156JNr6pJGNRkWf6HxnKoAHBci/qIV5cOMWyGIeEW3utu9egQAmcLaDAEtLqZs0b/xjas1dcRMKtUNo6/WVbSoIajyRbRqO8N0zz3XYeGYIyJQF8=
+    secure: wVytlKecwCh6pGhC3LvZ1Qav7WaPNqBPd20aEt44O4qHfYP5KGAtitdBkcO4LirnCMDV6H48OCMhjabKwXD3Hl9D7LnUHE12n1Dz7x6RrEwtzsZ5X2PQyBc9Jk9W3vRHtRX9z3sugpTcNUUg5hRZMkyJifDW/DiQPGjnAYlWmyDmQyoJPAmYexPekB/lQ81R+s8e4UhCeW2ysCZBtebhP43Lb5axsvt3RNVFHm+6cY1EjT4zAYBVNtdue4LlcKz2eX9JP4A6K5K0sQQ/zCa2GqsD9Mgr30ZtPHhdbL7DmY11qdw1Ps2TkKeTGwrizGvp/kIBWb3Ys7oz2CEnMagksv9jRaD4JOJ2cvL1qBsF7fC74oIuBnWMl/8gKqPPbHyzc3yMr7kW4zcq8McBjUFZHF+GVe4aEVNfx0VEMlfjSKD9DEXJakRUR+NIE2jh8fVOt5NSrMVxzAMHOnujPaaL2C/LI593DlPh+ejEEydPZOVLYNBN6sz1FYMg7PiDB4Oa2oBRn2+KMrDlTfHgkhQZaNXyOSd3jBzIoUwStaRvw6+5tjpBxtdvWjSETQyfwGQ4sarGkuG+E6J3kdvNgYot6dZxdzRyav47ffUniouBx+kB+OBAFl8Jl5vPVse0oBKEoYNdPWSHqyC4LMl1VxIjrR+jraLOJw+asVgXGCylvdY=
   on:
     repo: mayank-patel/react-native-floating-labels
     branch: release

index.js

@@ -1,5 +1,7 @@
 'use strict';
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
 import {
   StyleSheet,
@@ -9,19 +11,30 @@ import {
   Easing,
   Text,
   View,
-  Platform
+  Platform,
+  ViewPropTypes
 } from 'react-native';
 
-var textPropTypes = Text.propTypes || View.propTypes
+var textPropTypes = Text.propTypes || ViewPropTypes
 var textInputPropTypes = TextInput.propTypes || textPropTypes
 var propTypes = {
   ...textInputPropTypes,
   inputStyle: textInputPropTypes.style,
   labelStyle: textPropTypes.style,
   disabled: PropTypes.bool,
-  style: View.propTypes.style,
+  style: ViewPropTypes.style,
 }
 
+const cleanStyle = {
+  fontSize: 20,
+  top: 7
+};
+
+const dirtyStyle = {
+  fontSize: 12,
+  top: -17
+};
+
 var FloatingLabel  = React.createClass({
   propTypes: propTypes,
 
@@ -31,7 +44,10 @@ var FloatingLabel  = React.createClass({
       dirty: (this.props.value || this.props.placeholder)
     };
 
-    var style = state.dirty ? dirtyStyle : cleanStyle
+    this.cleanStyle = this.props.cleanStyle ? this.props.cleanStyle : cleanStyle;
+    this.dirtyStyle = this.props.dirtyStyle ? this.props.dirtyStyle : dirtyStyle;
+
+    var style = state.dirty ? this.dirtyStyle : this.cleanStyle
     state.labelStyle = {
       fontSize: new Animated.Value(style.fontSize),
       top: new Animated.Value(style.top)
@@ -48,7 +64,7 @@ var FloatingLabel  = React.createClass({
   },
 
   _animate(dirty) {
-    var nextStyle = dirty ? dirtyStyle : cleanStyle
+    var nextStyle = dirty ? this.dirtyStyle : this.cleanStyle
     var labelStyle = this.state.labelStyle
     var anims = Object.keys(nextStyle).map(prop => {
       return Animated.timing(
@@ -103,7 +119,6 @@ var FloatingLabel  = React.createClass({
     return (
       <Animated.Text
         ref='label'
-        numberOfLines={this.props.numberOfLines}
         style={[this.state.labelStyle, styles.label, this.props.labelStyle]}
       >
         {this.props.children}
@@ -137,8 +152,10 @@ var FloatingLabel  = React.createClass({
         returnKeyType: this.props.returnKeyType,
         selectTextOnFocus: this.props.selectTextOnFocus,
         selectionState: this.props.selectionState,
+        selectionColor: this.props.selectionColor,
         style: [styles.input],
         testID: this.props.testID,
+        accessibilityLabel: this.props.accessibilityLabel,
         value: this.state.text,
         underlineColorAndroid: this.props.underlineColorAndroid, // android TextInput will show the default bottom border
         onKeyPress: this.props.onKeyPress
@@ -157,7 +174,6 @@ var FloatingLabel  = React.createClass({
   		<View style={elementStyles}>
         {this._renderLabel()}
         <TextInput
-          ref={(r) => { this.input = r; }}
           {...props}
         >
         </TextInput>
@@ -196,14 +212,9 @@ var styles = StyleSheet.create({
   label: labelStyleObj
 })
 
-var cleanStyle = {
-  fontSize: 20,
-  top: 7
-}
-
-var dirtyStyle = {
-  fontSize: 12,
-  top: -17,
-}
+FloatingLabel.propTypes = {
+  disabled: PropTypes.bool,
+  style: Text.propTypes.style,
+};
 
 module.exports = FloatingLabel;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-floating-labels",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "description": "Reusabe floating lable component for react native",
   "main": "index.js",
   "repository": {
@@ -15,7 +15,7 @@
     "android"
   ],
   "dependencies": {
-    "lodash": "^3.8.0"
+
   },
   "scripts": {
     "test": "echo 'Success'"