react-native-material-bottom-navigation
Advanced tools
react-native-material-bottom-navigation - npm Package Compare versions
Comparing version 0.4.1 to 0.5.0
@@ -28,7 +28,7 @@ /** | ||
| backgroundColor: string, | ||
| shifting?: ?boolean, | ||
| onTabChange: () => void, | ||
| style: any, | ||
| innerStyle: any, | ||
| children: Array<ReactElement<Tab>>, | ||
| __hideWarningForUsingTooManyTabs: boolean | ||
| children: Array<ReactElement<Tab>> | ||
| } | ||
@@ -49,3 +49,2 @@ | ||
| backgroundColor: 'white', | ||
| __hideWarningForUsingTooManyTabs: false, | ||
| onTabChange: () => {} | ||
@@ -59,3 +58,2 @@ } | ||
| state: BottomNavigationState | ||
| isShifting: boolean | ||
| layoutWillChange: boolean | ||
@@ -71,3 +69,2 @@ iconPositions: Array<{ x: number, y: number }> | ||
| // Default values | ||
| this.isShifting = false | ||
| this.layoutWillChange = false | ||
@@ -99,7 +96,6 @@ this.dimensions = { width: -1, height: -1 } | ||
| this.isShifting = children.length > 3 | ||
| this.iconPositions = new Array(children.length).fill({ x: 0, y: 0 }) | ||
| if (children.length > 5) { | ||
| if (__DEV__ && !this.props.__hideWarningForUsingTooManyTabs) { | ||
| if (__DEV__) { | ||
| console.warn('You shouldn\'t put more than 5 Tabs in the ' + | ||
@@ -159,2 +155,6 @@ 'BottomNavigation. Styling may break and it\'s against the specs in ' + | ||
| var shifting = this.props.shifting != null | ||
| ? this.props.shifting | ||
| : this.props.children.length > 3 | ||
| return ( | ||
@@ -185,3 +185,3 @@ <View | ||
| React.cloneElement(child, { | ||
| shifting: this.isShifting, | ||
| shifting, | ||
| active: tabIndex === activeTab, | ||
@@ -188,0 +188,0 @@ tabIndex: tabIndex, |
@@ -58,4 +58,3 @@ /** | ||
| backgroundColor: bnOptions.backgroundColor, | ||
| __hideWarningForUsingTooManyTabs: | ||
| bnOptions.__hideWarningForUsingTooManyTabs | ||
| shifting: bnOptions.shifting | ||
| } | ||
@@ -62,0 +61,0 @@ |
@@ -279,3 +279,2 @@ /** | ||
| maxWidth: 96, | ||
| minWidth: 56, | ||
| flex: 1 | ||
@@ -285,3 +284,2 @@ }, | ||
| maxWidth: 168, | ||
| minWidth: 96, | ||
| flex: 1.75 | ||
@@ -288,0 +286,0 @@ }, |
| { | ||
| "name": "react-native-material-bottom-navigation", | ||
| "version": "0.4.1", | ||
| "version": "0.5.0", | ||
| "description": "JS Implementation of the Material Design Guidelines' Bottom Navigation for react-native", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -9,3 +9,2 @@ # Material Design Bottom Navigation for react-native | ||
| * Switches automatically between Fixed Navigation (up to 3 tabs) and Shifting Navigation (3 - 5 tabs) | ||
| * Highly configurable | ||
| * No dependencies | ||
@@ -98,2 +97,4 @@ * Support for [react-navigation](https://reactnavigation.org) | ||
| **Note:** If you are searching for more customization options, like label styles for fonts/positioning/..., they are *intentionally* not supported. More and more customizations would be actively against the Material Design Guidelines, and I want to encourage you to follow the Guidelines. | ||
| ### BottomNavigation | ||
@@ -109,5 +110,5 @@ | ||
| | **`onTabChange`** | Function to be called when a Tab was clicked and changes into active state. Will be called with parameters `(newTabIndex, oldTabIndex) => {}`. | `function` | `noop` | | ||
| | **`style`** | **Required.** Style will be directly applied to the component. Use this to set the height of the BottomNavigation (should be 56), to position it, to add shadow and border. The only pre-set rule is `overflow: hidden`. You have to set the other styles yourself! Why? Maybe your designer is a crazy person and demands a height of 80dp, or wants it to be positioned on the top. I got you. | `object` | **Required.** | | ||
| | **`style`** | **Required.** Style will be directly applied to the component. Use this to set the height of the BottomNavigation (should be 56), to position it, to add shadow and border. The only pre-set rule is `overflow: hidden`. | `object` | **Required.** | | ||
| | **`innerStyle`** | All tabs are wrapped in another container. Use this to add styles to this container. The main reason why you would want to use this is to put the Navigation behind the Android System Navigation Bar. See below for an example on how to achieve this. | `object` | – | | ||
| | **`__hideWarningForUsingTooManyTabs`** | There will be a warning if you use more than 5 Tabs. You shouldn't use more than 5 Tabs! Setting this to true will suppress this warning, but the prop name will judge you forever. | `boolean` | `false` | | ||
| | **`shifting`** | Turn manually on/off shifting mode. | `boolean` | `true` if > 3 Tabs, otherwise `false` | | ||
@@ -166,4 +167,2 @@ **Hints:** | ||
| _**Note: Please try to use the latest version or even the master-branch of react-navigation.** I don't use hacks or exotic functionalities from react-navigation, so I don't expect this will break in the near future._ | ||
| 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`. | ||
@@ -178,9 +177,8 @@ | ||
| import { TabNavigator } from 'react-navigation' | ||
| import { AppRegistry } from 'react-native'; | ||
| class MoviesAndTV extends React.Component { | ||
| static navigationOptions = { | ||
| tabBar: { | ||
| label: 'Movies & TV', | ||
| icon: () => (<Icon size={24} color="white" name="tv" />) | ||
| } | ||
| tabBarLabel: 'Movies & TV', | ||
| tabBarIcon: () => (<Icon size={24} color="white" name="tv" />) | ||
| } | ||
@@ -193,6 +191,4 @@ | ||
| static navigationOptions = { | ||
| tabBar: { | ||
| label: 'Music', | ||
| icon: () => (<Icon size={24} color="white" name="music-note" />) | ||
| } | ||
| tabBarLabel: 'Music', | ||
| tabBarIcon: () => (<Icon size={24} color="white" name="music-note" />) | ||
| } | ||
@@ -205,6 +201,4 @@ | ||
| static navigationOptions = { | ||
| tabBar: { | ||
| label: 'Newsstand', | ||
| icon: () => (<Icon size={24} color="white" name="Newsstand" />) | ||
| } | ||
| tabBarLabel: 'Newsstand', | ||
| tabBarIcon: () => (<Icon size={24} color="white" name="Newsstand" />) | ||
| } | ||
@@ -243,2 +237,4 @@ | ||
| }) | ||
| AppRegistry.registerComponent('MyApp', () => MyApp); | ||
| ``` | ||
@@ -271,3 +267,3 @@ | ||
| - **`innerStyle`** | ||
| - **`__hideWarningForUsingTooManyTabs`** | ||
| - **`shifting`** | ||
| - **`tabs`**: Configuration for the tabs, see below. | ||
@@ -274,0 +270,0 @@ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.96%
42954
- Lines of code
- decreased by-0.46%
867
- Number of lines in readme file
- decreased by-1.33%
296
No dependency changes