react-native-material-design - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

lib/Avatar.js

@@ -13,3 +13,6 @@ import React, { Component, PropTypes, View, Image, Text } from 'react-native';
         backgroundColor: PropTypes.string,
-        text: PropTypes.string
+        text: PropTypes.string,
+        borderRadius: PropTypes.number,
+        borderColor: PropTypes.string,
+        borderWidth: PropTypes.number
     };
@@ -20,7 +23,20 @@
         color: '#ffffff',
-        backgroundColor: getColor('paperGrey500')
+        backgroundColor: getColor('paperGrey500'),
+        borderRadius: 40 / 2,
+        borderColor: 'rgba(0,0,0,.1)',
+        borderWidth: 1
     };
 
     render() {
-        const { image, icon, size, color, backgroundColor, text } = this.props;
+        const {
+            image,
+            icon,
+            size,
+            color,
+            backgroundColor,
+            text,
+            borderRadius,
+            borderColor,
+            borderWidth
+        } = this.props;
 
@@ -32,5 +48,5 @@ if (image) {
                     height: size,
-                    borderRadius: size / 2,
-                    borderColor: 'rgba(0,0,0,.1)',
-                    borderWidth: 1
+                    borderRadius: borderRadius,
+                    borderColor: borderColor,
+                    borderWidth: borderWidth
                 }
@@ -42,8 +58,10 @@ });
             return (
-                <View style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: getColor(backgroundColor), alignItems:'center', justifyContent: 'center' }}>
-                    <Icon
-                        name={icon}
-                        color={getColor(color)}
-                        size={0.6 * size}
-                    />
+                <View style={{ flex: 1 }}>
+                    <View style={{ width: size, height: size, borderRadius: borderRadius, backgroundColor: getColor(backgroundColor), alignItems:'center', justifyContent: 'center' }}>
+                        <Icon
+                            name={icon}
+                            color={color}
+                            size={0.6 * size}
+                        />
+                    </View>
                 </View>
@@ -55,6 +73,6 @@ );
             return (
-                <View style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: getColor(backgroundColor), alignItems:'center', justifyContent: 'center' }}>
-                    <Text style={{ color: getColor(color), fontSize: size / 3 }}>
-                        {text}
-                    </Text>
+                <View style={{ flex: 1 }}>
+                    <View style={{ width: size, height: size, borderRadius: borderRadius, backgroundColor: getColor(backgroundColor), alignItems:'center', justifyContent: 'center' }}>
+                        <Text style={{ color: color }}>{text}</Text>
+                    </View>
                 </View>
@@ -61,0 +79,0 @@ );

lib/Button.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
+import React, { Component, PropTypes, View, Text, TouchableNativeFeedback, Platform} from 'react-native';
 import Ripple from './polyfill/Ripple';
@@ -202,3 +202,3 @@ import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
                             backgroundColor: buttonStyle && buttonStyle.backgroundColor,
-                        }, raised && !isCompatible('elevation') && {
+                        }, raised && !isCompatible('elevation') && Platform.OS !== 'ios' && {
                             borderWidth: 1,
@@ -209,3 +209,3 @@ borderColor: 'rgba(0,0,0,.12)'
                 >
-                    <Text style={[TYPO.paperFontButton, textStyle]}>
+                    <Text style={[TYPO.paperFontButton, textStyle, styles.text]}>
                         {text || value}
@@ -253,4 +253,4 @@ </Text>
         position: 'relative',
-        top: 2
+        top: Platform.OS === 'android' ? 2 : -4
     }
-};
+};

lib/Card/index.js

@@ -23,3 +23,3 @@ import React, { Component, PropTypes, View, TouchableNativeFeedback } from 'react-native';
         children: PropTypes.node.isRequired,
-        style: PropTypes.object
+        style: View.propTypes.style
     };
@@ -26,0 +26,0 @@

lib/Divider.js

@@ -9,3 +9,3 @@ import React, { Component, PropTypes, View } from 'react-native';
         theme: PropTypes.oneOf(THEME_NAME),
-        style: PropTypes.object
+        style: View.propTypes.style
     };
@@ -12,0 +12,0 @@

lib/helpers.js

 import { Platform } from 'react-native';
+import processColor from 'processColor';
 import { PRIMARY, COLOR } from './config';
@@ -11,3 +12,3 @@
     if (string) {
-        if (string.indexOf('#') > -1 || string.indexOf('rgba') > -1) {
+        if (processColor(string) !== undefined)
             return string;
@@ -47,2 +48,2 @@ }
     }
-}
+}

lib/Icon.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react-native';
+import React, { Component, PropTypes, View} from 'react-native';
 import { default as VectorIcon } from 'react-native-vector-icons/MaterialIcons';
@@ -9,3 +9,3 @@ import { getColor } from './helpers';
         name: PropTypes.string.isRequired,
-        style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+        style: View.propTypes.style,
         size: PropTypes.number,
@@ -12,0 +12,0 @@ color: PropTypes.string

lib/polyfill/Ripple.js

 import React, { Component, PropTypes, View, Animated, TouchableOpacity } from 'react-native';
+import elevationPolyfill from './Elevation';
 
@@ -48,4 +49,3 @@ export default class Ripple extends Component {
                 <View
-                    style={style || {}}
-                    elevation={elevation ? elevation : 0}
+                    style={[style || {}, elevationPolyfill(elevation ? elevation : 0)]}
                 >
@@ -52,0 +52,0 @@ <Animated.View  style={[

lib/Toolbar.js

@@ -13,3 +13,3 @@ import React, { Component, PropTypes, View, Text } from 'react-native';
         primary: PropTypes.oneOf(PRIMARY_COLORS),
-        style: PropTypes.object,
+        style: View.propTypes.style,
         leftIconStyle: PropTypes.object,
@@ -134,4 +134,3 @@ rightIconStyle: PropTypes.object,
     leftIcon: {
-        marginLeft: 16,
-        marginRight: 8
+        margin: 16
     },
@@ -138,0 +137,0 @@ rightIcon: {

package.json

 {
   "name": "react-native-material-design",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "React Native Material Design Components",
@@ -29,3 +29,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "react-native-material-design-styles": "^0.2.6",
+    "react-native-material-design-styles": "https://github.com/react-native-material-design/react-native-material-design-styles.git",
     "react-native-vector-icons": "^1.0.3"
@@ -32,0 +32,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

HTTP dependency

Supply chain risk

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74650

increased by1.36%

Number of package files

31

increased by3.33%

Lines of code

2000

increased by2.15%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedreact-native-material-design-styles@0.2.7(transitive)

• Updatedreact-native-material-design-styles@https://github.com/react-native-material-design/react-native-material-design-styles.git