Typechecking With PropTypes

lib/FloatingLabel.js

@@ -1,11 +1,12 @@
 'use strict';
-import React, {Component, PropTypes} from "react";
-import {StyleSheet, Animated} from "react-native";
+import React, { Component } from "react";
+import { StyleSheet, Animated } from "react-native";
+import PropTypes from 'prop-types';
 
 export default class FloatingLabel extends Component {
-  constructor(props: Object) {
+  constructor(props) {
     super(props);
-    if(props.dense) {
+    if (props.dense) {
       this.posTop = 12;
       this.posBottom = 32;
       this.fontLarge = 13;
@@ -23,7 +24,7 @@ export default class FloatingLabel extends Component {
       fontSize: new Animated.Value(fontSize)
     };
   }
-  shouldComponentUpdate(nextProps: Object, nextState: Object) : bool {
+  shouldComponentUpdate(nextProps, nextState) {
     return (this.props.hasValue !== nextProps.hasValue) ? false : true;
   }
   floatLabel() {
@@ -50,7 +51,7 @@ export default class FloatingLabel extends Component {
       })
     ]).start();
   }
-  render() : Object {
+  render() {
     let {
       label,
       labelColor,
@@ -66,7 +67,7 @@ export default class FloatingLabel extends Component {
         }, styles.labelText, this.props.isFocused && {
           color: highlightColor
         }, style]}
-        onPress={()=> {
+        onPress={() => {
           this.props.focusHandler();
         }}
       >

lib/TextField.js

@@ -1,12 +1,13 @@
 'use strict';
-import React, {Component, PropTypes} from "react";
-import {View, TextInput, StyleSheet} from "react-native";
+import React, { Component } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import PropTypes from 'prop-types';
 
 import Underline from './Underline';
 import FloatingLabel from './FloatingLabel';
 
 export default class TextField extends Component {
-  constructor(props: Object, context: Object) {
+  constructor(props, context) {
     super(props, context);
     this.state = {
       isFocused: false,
@@ -23,18 +24,18 @@ export default class TextField extends Component {
   isFocused() {
     return this.state.isFocused;
   }
-  measureLayout(...args){
+  measureLayout(...args) {
     this.refs.wrapper.measureLayout(...args)
   }
-  componentWillReceiveProps(nextProps: Object){
-    if(this.props.text !== nextProps.value){
+  componentWillReceiveProps(nextProps) {
+    if (this.props.text !== nextProps.value) {
       nextProps.value.length !== 0 ?
         this.refs.floatingLabel.floatLabel()
         : this.refs.floatingLabel.sinkLabel();
-      this.setState({text: nextProps.value});
+      this.setState({ text: nextProps.value });
     }
-    if(this.props.height !== nextProps.height){
-      this.setState({height: nextProps.height});
+    if (this.props.height !== nextProps.height) {
+      this.setState({ height: nextProps.height });
     }
   }
   render() {
@@ -62,35 +63,35 @@ export default class TextField extends Component {
       ...props
     } = this.props;
     return (
-      <View style={[dense ? styles.denseWrapper : styles.wrapper, this.state.height ? {height: undefined}: {}, wrapperStyle]} ref="wrapper">
+      <View style={[dense ? styles.denseWrapper : styles.wrapper, this.state.height ? { height: undefined } : {}, wrapperStyle]} ref="wrapper">
         <TextInput
           style={[dense ? styles.denseTextInput : styles.textInput, {
             color: textColor
           }, (this.state.isFocused && textFocusColor) ? {
             color: textFocusColor
           } : {}, (!this.state.isFocused && textBlurColor) ? {
             color: textBlurColor
-          } : {}, inputStyle,  this.state.height ? {height: this.state.height} : {}]}
+          } : {}, inputStyle, this.state.height ? { height: this.state.height } : {}]}
           multiline={multiline}
           onFocus={() => {
-            this.setState({isFocused: true});
+            this.setState({ isFocused: true });
             this.refs.floatingLabel.floatLabel();
             this.refs.underline.expandLine();
             onFocus && onFocus();
           }}
           onBlur={() => {
-            this.setState({isFocused: false});
+            this.setState({ isFocused: false });
             !this.state.text.length && this.refs.floatingLabel.sinkLabel();
             this.refs.underline.shrinkLine();
             onBlur && onBlur();
           }}
           onChangeText={(text) => {
-            this.setState({text});
+            this.setState({ text });
             onChangeText && onChangeText(text);
           }}
           onChange={(event) => {
-            if(autoGrow){
-              this.setState({height: event.nativeEvent.contentSize.height});
+            if (autoGrow) {
+              this.setState({ height: event.nativeEvent.contentSize.height });
             }
             onChange && onChange(event);
           }}

lib/Underline.js

@@ -1,9 +1,10 @@
 'use strict';
-import React, {Component, PropTypes} from "react";
-import {View, StyleSheet, Animated} from "react-native";
+import React, { Component } from "react";
+import { View, StyleSheet, Animated } from "react-native";
+import PropTypes from 'prop-types';
 
 export default class Underline extends Component {
-  constructor(props: Object) {
+  constructor(props) {
     super(props);
     this.state = {
       lineLength: new Animated.Value(0),