react-native-material-bottom-navigation - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

lib/Badge.js

@@ -10,3 +10,4 @@ /**
   Text,
-  StyleSheet
+  StyleSheet,
+  Animated
 } from 'react-native';
@@ -20,2 +21,3 @@
   isVisible: boolean,
+  translateY: number,
 }
@@ -47,3 +49,5 @@
         zIndex: 9999,
-        bottom: 10,
+        top: 3,
+        left: "50%",
+        marginLeft: 15
       },
@@ -70,3 +74,3 @@ style.container
   render() {
-    const { children, text, isVisible } = this.props;
+    const { children, text, isVisible, translateY } = this.props;
     const styles = this.createStyles();
@@ -78,9 +82,12 @@ if (!isVisible) {
     return (
-      <View>
-        <View style={styles.container}>
-          <Text style={styles.text}>{text}</Text>
-        </View>
-      </View>
+      <Animated.View
+        style={[
+          styles.container,
+          { transform: [{ translateY: translateY }] },
+        ]}
+      >
+        <Text style={styles.text}>{text}</Text>
+      </Animated.View>
     )
   }
 }

lib/Tab.js

@@ -132,2 +132,3 @@ /**
     const { badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props;
+    const mode = this._getModeString();
 
@@ -139,8 +140,9 @@ if (badgeText === undefined && !isBadgeVisible) {
     return (
-      <Badge
-        text={badgeText}
-        size={badgeSize}
-        style={badgeStyle}
-        isVisible={isBadgeVisible}
-      />
+        <Badge
+          text={badgeText}
+          size={badgeSize}
+          style={badgeStyle}
+          isVisible={isBadgeVisible}
+          translateY={this.state[mode].iconY}
+        />
     )
@@ -147,0 +149,0 @@ }

package.json

 {
   "name": "react-native-material-bottom-navigation",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "JS Implementation of the Material Design Guidelines' Bottom Navigation for react-native",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -134,3 +134,3 @@ # Material Design Bottom Navigation for react-native
 | **`badgeSize`** | Size of the badge. Will be used to calculate the height, width, and border radius (height: size, width: size, borderRadius: size/2)  | `number` | 20 |
-| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style  | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, bottom: 10 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` |
+| **`badgeStyle`** | Style for the badge. `badgeStyle.container` will be used to determine the badge's container style, and `badgeStyle.text` will be used to determine the badge's text style  | `object` | `{ container: { position: "absolute", width: 20, height: 20, borderRadius: 20 / 2, alignItems: "center", justifyContent: "center", backgroundColor: "#F50057", zIndex: 9999, top: 3, left: "50%", marginLeft: 15 }, text: { color: "#fff", fontWeight: "500", fontSize: 12 } }` |
 | **`isBadgeVisible`** | Determines if the badge is visible or not  | `boolean` | - |
@@ -137,0 +137,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

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

50786

increased by0.57%

Lines of code

1137

increased by0.8%

No dependency changes