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

Comparing version 0.7.0 to 0.8.0

lib/Tab.js

@@ -17,2 +17,3 @@ /**
 } from 'react-native'
+import Badge from "./Badge"
 import { easeInOut } from './utils/easing'
@@ -34,3 +35,7 @@
   onTabPress: () => void,
-  onPress: () => void
+  onPress: () => void,
+  badgeText: string,
+  badgeSize: number,
+  badgeStyle: any,
+  isBadgeVisible: boolean,
 }
@@ -120,2 +125,3 @@
           {this._renderIcon()}
+          {this._renderBadge()}
           {this._renderLabel()}
@@ -127,5 +133,22 @@ </View>
 
+  _renderBadge = () => {
+    const { badgeText, badgeSize, badgeStyle, isBadgeVisible } = this.props;
+
+    if (badgeText === undefined && !isBadgeVisible) {
+      return null;
+    }
+
+    return (
+      <Badge
+        text={badgeText}
+        size={badgeSize}
+        style={badgeStyle}
+        isVisible={isBadgeVisible}
+      />
+    )
+  }
+
   _renderIcon = () => {
-    const mode = this._getModeString()
-    const { active, icon, activeIcon } = this.props
+    const mode = this._getModeString();
+    const { active, icon, activeIcon } = this.props;
 
@@ -140,2 +163,3 @@ return (
       >
+
         <View ref="_bnic" collapsable={false}>
@@ -284,3 +308,4 @@ {active && activeIcon ? activeIcon : icon}
     paddingRight: 12,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    position: "relative",
   },
@@ -307,4 +332,5 @@ shiftingInactiveContainer: {
     justifyContent: 'flex-end',
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    zIndex: 0
   }
 })

package.json

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

README.md

@@ -10,2 +10,3 @@ # Material Design Bottom Navigation for react-native
 * No dependencies
+* Includes a Badge
 * Support for [react-navigation](https://reactnavigation.org)
@@ -132,4 +133,7 @@
 | **`onPress`** | Function to be called when the Tab was pressed. **When you use this, the pressed tab won't be active automatically. You need to set it to active by updating `BottomNavigation.activeTab`.** This function will be called with the parameter `(newTabIndex) => {}` | `function` | – |
+| **`badgeText`** | Text for the tab's badge. **The badge will be hidden if no badgeText is passed. isBadgeVisible can be used to override this**. | `string` | - |
+| **`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 } }` |
+| **`isBadgeVisible`** | Determines if the badge is visible or not  | `boolean` | - |
 
-
 ## Behind the Navigation Bar
@@ -136,0 +140,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

50499

increased by6.11%

Number of package files

15

increased by7.14%

Lines of code

1128

increased by9.09%

Number of lines in readme file

297

increased by1.37%

No dependency changes