[RTT] Fixing App crash in Release mode

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';

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}

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'
     }
-});
+});

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 {

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
     }
-});
+});

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;

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'
     }

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';

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
     }
-};
+};

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 {

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';

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';

lib/Icon.js

@@ -1,13 +1,12 @@
-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';
 
 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 (

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';
 

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'
     }
-});
+});

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';

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';

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 {
     }
 
 }
-

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
-});
+});

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,