diff --git a/lib/Avatar.js b/lib/Avatar.js
index 1126c16..9564c7a 100644
--- a/lib/Avatar.js
+++ b/lib/Avatar.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {View, Image, Text} from "react-native";
 import Icon from './Icon';
 import { getColor } from './helpers';
diff --git a/lib/Button.js b/lib/Button.js
index a40efae..688bd27 100644
--- a/lib/Button.js
+++ b/lib/Button.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from "react";
-import {ActivityIndicator, View, Text, TouchableNativeFeedback, Platform} from "react-native";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ActivityIndicator, View, Text, TouchableNativeFeedback, Platform } from 'react-native';
 import Ripple from './polyfill/Ripple';
 import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
 import { getColor, isCompatible } from './helpers';
@@ -19,11 +20,7 @@ export default class Button extends Component {
         loading: PropTypes.bool,
         activityIndicatorColor: PropTypes.string,
         raised: PropTypes.bool,
-        styles: PropTypes.shape({
-            button:   View.propTypes.style,
-            disabled: View.propTypes.style,
-            text:     Text.propTypes.style
-        }),
+        styles: PropTypes.shape({}),
         onPress: PropTypes.func,
         onLongPress: PropTypes.func,
     };
@@ -36,7 +33,7 @@ export default class Button extends Component {
         raised: false,
         activityIndicatorColor: 'black',
         styles: {
-            disabled: {opacity: 0.5}
+            disabled: { opacity: 0.5 }
         }
     };
 
@@ -258,7 +255,7 @@ export default class Button extends Component {
                         elevation: raised ? elevation : 0
                     },
                     styles.button
-                  ]}
+                ]}
                 >
                     <Text style={[TYPO.paperFontButton, textStyle, componentStyles.text, styles.text]}>
                         {text || value}
diff --git a/lib/Card/Actions.js b/lib/Card/Actions.js
index 2fe2c29..6de467f 100644
--- a/lib/Card/Actions.js
+++ b/lib/Card/Actions.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, View} from "react-native";
 
 export default class Actions extends Component {
@@ -34,4 +35,4 @@ const styles = StyleSheet.create({
     actions: {
         flexDirection: 'row'
     }
-});
\ No newline at end of file
+});
diff --git a/lib/Card/Body.js b/lib/Card/Body.js
index 66bea89..6e03bce 100644
--- a/lib/Card/Body.js
+++ b/lib/Card/Body.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, View} from "react-native";
 
 export default class Body extends Component {
diff --git a/lib/Card/Media.js b/lib/Card/Media.js
index 715bfe8..b75017e 100644
--- a/lib/Card/Media.js
+++ b/lib/Card/Media.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, Image, View} from "react-native";
 
 export default class Media extends Component {
@@ -50,4 +51,4 @@ const styles = StyleSheet.create({
         paddingLeft: 16,
         paddingRight: 16
     }
-});
\ No newline at end of file
+});
diff --git a/lib/Card/index.js b/lib/Card/index.js
index fed68bb..96a26b2 100644
--- a/lib/Card/index.js
+++ b/lib/Card/index.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from "react";
-import {View, TouchableNativeFeedback} from "react-native";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View, TouchableNativeFeedback, Platform } from 'react-native';
 import Ripple from '../polyfill/Ripple';
 import { getColor, isCompatible } from '../helpers';
 
@@ -20,8 +21,7 @@ export default class Card extends Component {
         elevation: PropTypes.number,
         disabled: PropTypes.bool,
         onPress: PropTypes.func,
-        children: PropTypes.node.isRequired,
-        style: View.propTypes.style
+        children: PropTypes.node.isRequired
     };
 
     static defaultProps = {
@@ -62,7 +62,8 @@ export default class Card extends Component {
             );
         }
 
-        const defaultRippleColor = 'rgba(153,153,153,.4)';
+        // remove ripple background color for ios to avoid greyed background card when clicked.
+        const defaultRippleColor = Platform.OS === 'ios'? 'rgba(153,153,153,0)': 'rgba(153,153,153,.4)';
         const rippleColor = (() => {
             if (disabled || !(overrides && overrides.rippleColor)) {
                 return defaultRippleColor;
diff --git a/lib/Checkbox.js b/lib/Checkbox.js
index 5127e9c..3a32f17 100644
--- a/lib/Checkbox.js
+++ b/lib/Checkbox.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, Text, View, TouchableHighlight} from "react-native";
 import { TYPO, PRIMARY, COLOR, PRIMARY_COLORS, THEME_NAME } from './config';
 import Icon from './Icon';
@@ -15,7 +16,11 @@ export default class Checkbox extends Component {
         value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
         checked: PropTypes.bool,
         disabled: PropTypes.bool,
-        onCheck: PropTypes.func
+        onCheck: PropTypes.func,
+        labelStyle: PropTypes.any,
+        labelContainer: PropTypes.any,
+        containerStyle: PropTypes.any,
+        iconStyle: PropTypes.any,
     };
 
     static defaultProps = {
@@ -25,7 +30,7 @@ export default class Checkbox extends Component {
     };
 
     render() {
-        const { theme, primary, checked, disabled, value, onCheck } = this.props;
+        const { theme, primary, checked, disabled, value, onCheck, labelStyle, labelContainer, containerStyle, iconStyle } = this.props;
 
         const status = (()=> {
             if (disabled) {
@@ -84,7 +89,7 @@ export default class Checkbox extends Component {
                 underlayColor={disabled ? 'rgba(0,0,0,0)' : UNDERLAY_COLOR}
                 activeOpacity={1}
             >
-                <View style={styles.container}>
+                <View style={[styles.container, containerStyle]}>
                     <IconToggle
                         disabled={disabled}
                         color={CURR_COLOR}
@@ -94,16 +99,14 @@ export default class Checkbox extends Component {
                               size={24}
                               color={CURR_COLOR}
                               key={value}
-                              style={{
+                              style={[{
                                   opacity: OPACITY,
                                   margin: 16,
-                              }}
+                              }, iconStyle]}
                         />
                     </IconToggle>
                     <View
-                        style={{alignItems: 'center',
-                              flexDirection: 'row',
-                            	flex: 1}}
+                        style={[styles.labelContainer, labelContainer]}
                         onPress={() => onCheck(!checked, value)}
                     >
                         <Text
@@ -113,7 +116,8 @@ export default class Checkbox extends Component {
                                 COLOR[`${theme}PrimaryOpacity`],
                                 disabled && COLOR[`${theme}DisabledOpacity`], {
                                     color: LABEL_COLOR
-                                }
+                                },
+                                labelStyle,
                             ]}
                         >
                             {this.props.label}
@@ -137,7 +141,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         flex: 1
     },
-    labelContainer :{
+    labelContainer: {
+        alignItems: 'stretch',
+        alignSelf: 'center',
         justifyContent: 'center',
         flexDirection:'row'
     }
diff --git a/lib/CheckboxGroup.js b/lib/CheckboxGroup.js
index 8535dc2..572fc3d 100644
--- a/lib/CheckboxGroup.js
+++ b/lib/CheckboxGroup.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {View} from "react-native";
 import Checkbox from './Checkbox';
 import { THEME_NAME, PRIMARY, PRIMARY_COLORS } from './config';
diff --git a/lib/Divider.js b/lib/Divider.js
index eb03443..5cc9d16 100644
--- a/lib/Divider.js
+++ b/lib/Divider.js
@@ -1,13 +1,13 @@
-import React, {Component, PropTypes} from "react";
-import {View} from "react-native";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
 import { THEME_NAME } from './config';
 
 export default class Divider extends Component {
 
     static propTypes = {
         inset: PropTypes.bool,
-        theme: PropTypes.oneOf(THEME_NAME),
-        style: View.propTypes.style
+        theme: PropTypes.oneOf(THEME_NAME)
     };
 
     static defaultProps = {
@@ -36,4 +36,4 @@ const styles = {
     divider: {
         height: 1
     }
-};
\ No newline at end of file
+};
diff --git a/lib/Drawer/Header.js b/lib/Drawer/Header.js
index b85e7af..05cd4f2 100644
--- a/lib/Drawer/Header.js
+++ b/lib/Drawer/Header.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {View, Image} from "react-native";
 
 export default class Header extends Component {
diff --git a/lib/Drawer/Section.js b/lib/Drawer/Section.js
index 67b14f8..76662ca 100644
--- a/lib/Drawer/Section.js
+++ b/lib/Drawer/Section.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {View, Text, TouchableNativeFeedback} from "react-native";
 import Icon from '../Icon';
 import Ripple from '../polyfill/Ripple';
diff --git a/lib/Drawer/index.js b/lib/Drawer/index.js
index e97a60c..780229d 100644
--- a/lib/Drawer/index.js
+++ b/lib/Drawer/index.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {ScrollView} from "react-native";
 import { THEME_NAME, PRIMARY_COLORS } from '../config';
 import { getColor } from '../helpers';
diff --git a/lib/Icon.js b/lib/Icon.js
index 38f836a..dee50dc 100644
--- a/lib/Icon.js
+++ b/lib/Icon.js
@@ -1,5 +1,5 @@
-import React, {Component, PropTypes} from "react";
-import {View} from "react-native";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { getColor } from './helpers';
 import VectorIconComponent from './VectorIconComponent';
 
@@ -7,7 +7,6 @@ export default class Icon extends Component {
 
     static propTypes = {
         name: PropTypes.string.isRequired,
-        style: View.propTypes.style,
         size: PropTypes.number,
         color: PropTypes.string,
         allowFontScaling: PropTypes.bool
@@ -20,7 +19,7 @@ export default class Icon extends Component {
     };
 
     render() {
-        const { name, style, size, color, allowFontScaling} = this.props;
+        const { name, style, size, color, allowFontScaling } = this.props;
         const VectorIcon = VectorIconComponent.get();
 
         return (
diff --git a/lib/IconToggle.js b/lib/IconToggle.js
index b5cd31c..e3bc75b 100644
--- a/lib/IconToggle.js
+++ b/lib/IconToggle.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {Text, View, Animated} from "react-native";
 import { getColor } from './helpers';
 
diff --git a/lib/List.js b/lib/List.js
index 22e9929..0d7ea72 100644
--- a/lib/List.js
+++ b/lib/List.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, View, Text, TouchableWithoutFeedback} from "react-native";
 import { TYPO } from './config';
 
@@ -175,4 +176,4 @@ const styles = StyleSheet.create({
         alignSelf: 'flex-end',
         alignItems: 'flex-end'
     }
-});
\ No newline at end of file
+});
diff --git a/lib/RadioButton.js b/lib/RadioButton.js
index 819c1d8..407072b 100644
--- a/lib/RadioButton.js
+++ b/lib/RadioButton.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, Text, View, TouchableHighlight} from "react-native";
 import Icon from './Icon';
 import IconToggle from './IconToggle';
diff --git a/lib/RadioButtonGroup.js b/lib/RadioButtonGroup.js
index 3f7a8ce..28b4418 100644
--- a/lib/RadioButtonGroup.js
+++ b/lib/RadioButtonGroup.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {View} from "react-native";
 import RadioButton from './RadioButton';
 import { PRIMARY, PRIMARY_COLORS, THEME_NAME } from './config';
diff --git a/lib/Ripple.js b/lib/Ripple.js
index 1afa283..2b248bc 100644
--- a/lib/Ripple.js
+++ b/lib/Ripple.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {View, Text, TouchableNativeFeedback} from "react-native";
 import { default as PolyfillRipple } from './polyfill/Ripple';
 import { isCompatible } from './helpers';
@@ -49,4 +50,3 @@ export default class Ripple extends Component {
     }
 
 }
-
diff --git a/lib/Subheader.js b/lib/Subheader.js
index 5817fc9..2acfc18 100644
--- a/lib/Subheader.js
+++ b/lib/Subheader.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from "react";
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
 import {StyleSheet, View, Text} from "react-native";
 import { TYPO, THEME_NAME } from './config';
 import { getColor } from './helpers';
@@ -48,4 +49,4 @@ const styles = StyleSheet.create({
         padding: 16
     },
     text: TYPO.paperFontBody1
-});
\ No newline at end of file
+});
diff --git a/lib/Toolbar.js b/lib/Toolbar.js
index d28c51c..2a0f64c 100644
--- a/lib/Toolbar.js
+++ b/lib/Toolbar.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from "react";
-import {View, Text} from "react-native";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View, Text } from 'react-native';
 import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
 import { getColor } from './helpers';
 import Icon from './Icon';
@@ -11,7 +12,6 @@ export default class Toolbar extends Component {
         title: PropTypes.string,
         theme: PropTypes.oneOf(THEME_NAME),
         primary: PropTypes.oneOf(PRIMARY_COLORS),
-        style: View.propTypes.style,
         leftIconStyle: PropTypes.object,
         rightIconStyle: PropTypes.object,
         elevation: PropTypes.number,
diff --git a/lib/polyfill/Ripple.js b/lib/polyfill/Ripple.js
index 4e41e9c..6fedf30 100644
--- a/lib/polyfill/Ripple.js
+++ b/lib/polyfill/Ripple.js
@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from "react";
-import {View, Animated, TouchableOpacity, Platform} from "react-native";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View, Animated, TouchableOpacity, Platform } from 'react-native';
 
 import elevationPolyfill from './Elevation';
 
@@ -25,7 +26,7 @@ export default class Ripple extends Component {
         elevation: PropTypes.array,
         onPress: PropTypes.func,
         onLongPress: PropTypes.func,
-        style: PropTypes.oneOfType([View.propTypes.style, PropTypes.object, PropTypes.array]),
+        style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
         children: PropTypes.element.isRequired
     };
 
@@ -41,25 +42,25 @@ export default class Ripple extends Component {
 
         // Extract padding, margin from style since IOS overflow: hidden has issues with the shadow
         if(Platform.OS == 'ios') {
-            ({outerStyle, innerStyle} = (style instanceof Array ? style : [style]).reduce((obj, styles) => {
+            ({ outerStyle, innerStyle } = (style instanceof Array ? style : [style]).reduce((obj, styles) => {
                 if (styles instanceof Object) {
                     Object.entries(styles).forEach(
                         ([name, value]) =>
-                            [
-                                'marginLeft',
-                                'marginRight',
-                                'marginTop',
-                                'marginBottom',
-                                'marginHorizontal',
-                                'marginVertical',
-                                'margin',
-                                'borderRadius',
-                                'backgroundColor'
-                            ].indexOf(name) !== -1 ? obj.outerStyle[name] = value : obj.innerStyle[name] = value
+                                [
+                                    'marginLeft',
+                                    'marginRight',
+                                    'marginTop',
+                                    'marginBottom',
+                                    'marginHorizontal',
+                                    'marginVertical',
+                                    'margin',
+                                    'borderRadius',
+                                    'backgroundColor'
+                                ].indexOf(name) !== -1 ? obj.outerStyle[name] = value : obj.innerStyle[name] = value
                     )
                 }
                 return obj
-            }, {outerStyle: {}, innerStyle: {}}));
+            }, { outerStyle: {}, innerStyle: {} }));
         }
 
         return (
diff --git a/package.json b/package.json
index 83985a4..d39d762 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
   "homepage": "https://github.com/react-native-material-design/react-native-material-design",
   "dependencies": {
     "react-native-material-design-styles": "git+https://github.com/react-native-material-design/react-native-material-design-styles.git",
-    "react-native-vector-icons": "^2.0.1"
+    "react-native-vector-icons": "^4.4.2"
   },
   "devDependencies": {
     "babel-eslint": "^4.1.6",