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

Comparing version 0.5.0 to 0.5.1

lib/BottomNavigation.js

@@ -57,2 +57,3 @@ /**
   layoutWillChange: boolean
+  nextActiveTab: number
   iconPositions: Array<{ x: number, y: number }>
@@ -69,2 +70,3 @@ dimensions: { width: number, height: number }
     this.dimensions = { width: -1, height: -1 }
+    this.nextActiveTab = props.activeTab
     this.state = {
@@ -99,4 +101,4 @@ activeTab: props.activeTab,
         console.warn('You shouldn\'t put more than 5 Tabs in the ' +
-          'BottomNavigation. Styling may break and it\'s against the specs in ' +
-          'the Material Design Guidelines.')
+          'BottomNavigation. Styling may break and it\'s against the specs ' +
+          'in the Material Design Guidelines.')
       }
@@ -131,6 +133,7 @@ }
     const { activeTab: oldTabIndex } = this.state
+    const { nextActiveTab } = this
     const tabAmount = this.props.children.length
 
     // Change active tab when activeTab-prop changes
-    if (newTabIndex !== oldTabIndex) {
+    if (newTabIndex !== oldTabIndex && newTabIndex !== nextActiveTab) {
       // Test index out of bounce
@@ -205,2 +208,8 @@ if (newTabIndex < 0 && newTabIndex >= tabAmount) {
 
+    // Directly save the active tab index, but not in the state.
+    // This way we can block any componentUpdate when the activeTab prop is
+    // set to a value which the BottomNavigation already has.
+    // (see componentWillReceiveProps)
+    this.nextActiveTab = tabIndex
+
     // Delegation to next tick will cause smoother animations
@@ -207,0 +216,0 @@ setTimeout(() => {

package.json

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

README.md

@@ -24,3 +24,3 @@ # Material Design Bottom Navigation for react-native
 
-![behind system navigation](.github/behind-nav-bar.gif)
+![behind navigation bar](.github/behind-nav-bar.gif)
 
@@ -31,3 +31,3 @@
 - [Configuration](#configuration)
-- [Behind the System Navigation](#behind-the-system-navigation)
+- [Behind the Navigation Bar](#behind-the-navigation-bar)
 - [Usage for react-navigation](#usage-for-react-navigation)
@@ -134,8 +134,10 @@ - [Roadmap](#roadmap)
 
-## Behind the System Navigation
+## Behind the Navigation Bar
 
-In the Material Design Guidelines you can see examples with the Bottom Navigation behind the System Navigation. That looks pretty sweet. In general that's pretty simple. But please read all steps carefully, especially Step 3. Really, do it.
+In the Material Design Guidelines you can see examples with the Bottom Navigation behind the Software Navigation Bar. That looks pretty sweet. In theory, that's pretty simple. In practice there's a problem: Not every device has a visible Navigation Bar. If someone has hardware buttons on his phone, the Navigation Bar is usually hidden. As of now, we can't simply detect if it's visible. If you don't detect it and just add the following code, the BottomNavigation will have a huge padding-bottom on devices without a Navigation Bar.
 
-**Step 0.** Jump to Step 3 and decide, if you really want to do it. If you finished reading Step 3 and really want to do this, continue with Step 1.
+See [Issue #28](https://github.com/timomeh/react-native-material-bottom-navigation/issues/28) for more informations with an initial proposal by @keeleycarrigan.
 
+However, if you know what you're doing, you only need to adjust a few things:
+
 **Step 1.** In order to make the System Navigation translucent, you have to add this to `android/app/src/main/res/values/styles.xml`:
@@ -158,12 +160,8 @@
 
-**Step 3.** That was easy. You're finished. **Except, there's one catch: Not everybody has a visible System Navigation.** If someone has hardware buttons on their phone, they can turn off the System Navigation. This package doesn't check if the System Navigation is visible or not. You have to do it yourself.
+**Step 3.** You're done!
 
-You may ask why there's no easier way. Why can't I as maintainer of this package check if the System Navigation is visible, but instead you need to check it and write more Code?  
-The answer is, that there's currently no native API/Component in react-native, which gets the height of the System Navigation or can set its color and translucency – and I don't want to deal with dependencies here. I also couldn't find a package which checks if the Navigation Bar is visible.  
-So, to summarize: if you really want to do this, you have to research quite a bit. Maybe there's now a package which deals with this. Maybe there isn't and you have to code something yourself. If you're successful, please tell everyone about it by announcing it in a [new Issue](https://github.com/timomeh/react-native-material-bottom-navigation/issues/new). You will be a hero.
 
-
 ## Usage for [react-navigation](https://reactnavigation.org)
 
-This package includes a Component to plug into react-navigation. It is as configurable as the standalone version. To achieve this, it uses a separate configuration inside `tabBarOptions`. You can only set those configurations for the Bottom Navigation inside the `TabNavigatorConfig` of `TabNavigator()` – not inside `static navigationOptions` or inside the `RouteConfigs`.
+This package includes a Component to plug into react-navigation. It is as configurable as the standalone version. To achieve this, it uses a separate configuration inside `tabBarOptions`. You can only set those configurations for the Bottom Navigation inside the `TabNavigatorConfig` of `TabNavigator()` – **not inside `static navigationOptions` or inside the `RouteConfigs`**.
 
@@ -235,3 +233,3 @@ The following example will explain everything you need to get started.
 
-AppRegistry.registerComponent('MyApp', () => MyApp);
+AppRegistry.registerComponent('MyApp', () => MyApp)
 ```
@@ -290,6 +288,4 @@
 
-At the moment react-navigation changes quite frequently, and I don't want to look for those changes constantly. That's why everything is in its own namespace. Also the Bottom Navigation has some features which are not covered by react-navigation.
+At the time I developed this, react-navigation was in an early beta stage. It wasn't easy to get those options and add new options. I could only access the configs inside `tabBarOptions`, hence everything is stored there.
 
-I believe it's better to have 100% control over what you're programming, even if this means you need to configure a few more things in your code.
-
 ## Roadmap
@@ -296,0 +292,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

45704

increased by6.4%

Number of package files

15

increased by15.38%

Lines of code

997

increased by14.99%

Worsened metrics

Number of lines in readme file

292

decreased by-1.35%

No dependency changes