[BottomNavigation] Added show and hide animations

.eslintrc

@@ -15,6 +15,7 @@
     "no-shadow": 0, // Shadowing is a nice language feature. Naming is hard.
     // eslint-plugin-import
     "import/no-unresolved": [2, {"commonjs": true}],
+    "import/no-extraneous-dependencies": 0,
     "import/named": 2,
     "import/default": 2,
     "import/namespace": 2,

.gitignore

@@ -40,6 +40,7 @@ fastlane/README*
 # Directories #
 ###############
 .gradle
+coverage
 build
 node_modules
 xcuserdata
@@ -48,3 +49,5 @@ log.android
 .idea
 webpack-assets.json
 *report*
+
+yarn.lock

README.md

@@ -3,13 +3,11 @@
 **Highly customizable material design components for React Native!**
 
 [![npm](https://img.shields.io/npm/v/react-native-material-ui.svg)](https://www.npmjs.com/package/react-native-material-ui)
+[![codecov](https://codecov.io/gh/xotahal/react-native-material-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/xotahal/react-native-material-ui)
 [![npm](https://img.shields.io/npm/dm/react-native-material-ui.svg)](https://img.shields.io/npm/dm/react-native-material-ui.svg)
 [![GitHub issues](https://img.shields.io/github/issues/xotahal/react-native-material-ui.svg)](https://github.com/xotahal/react-native-material-ui/issues)
 [![Dependencies](https://david-dm.org/xotahal/react-native-material-ui.svg)](https://david-dm.org/xotahal/react-native-material-ui.svg)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/xotahal/react-native-material-ui/master/LICENSE)
-[![Beerpay](https://beerpay.io/xotahal/react-native-material-ui/badge.svg?style=beer-square)](https://beerpay.io/xotahal/react-native-material-ui)  [![Beerpay](https://beerpay.io/xotahal/react-native-material-ui/make-wish.svg?style=flat-square)](https://beerpay.io/xotahal/react-native-material-ui?focus=wish)
-
-
 
 
 # Getting Started
@@ -142,6 +140,7 @@ You can try our [Demo App](https://github.com/xotahal/react-native-material-ui-d
 
 <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/toolbars-1.png" width="280">
 <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/toolbars-anim-1.gif" width="280">
+<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/bottom-navigation-1.gif" width="285">
 ![Example 1](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-1.jpg "Example 1")
 ![Example 2](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-2.jpg "Example 2")
 ![Example 3](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-3.jpg "Example 3")
@@ -155,6 +154,7 @@ Here is a list of all component included in this library. (I'm working on docume
 - [Action Button](https://github.com/xotahal/react-native-material-ui/blob/master/docs/ActionButton.md)
 - Avatar
 - [Badge](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Badge.md)
+- [Bottom Navigation](https://github.com/xotahal/react-native-material-ui/blob/master/docs/BottomNavigation.md)
 - [Button](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Button.md)
 - Card
 - Checkbox
@@ -167,8 +167,3 @@ Here is a list of all component included in this library. (I'm working on docume
 - Radio button
 - Subheader
 - [Toolbar](https://github.com/xotahal/react-native-material-ui/blob/master/docs/Toolbar.md)
-
-## Support on Beerpay
-Hey dude! Help me out for a couple of :beers:!
-
-[![Beerpay](https://beerpay.io/xotahal/react-native-material-ui/badge.svg?style=beer-square)](https://beerpay.io/xotahal/react-native-material-ui)  [![Beerpay](https://beerpay.io/xotahal/react-native-material-ui/make-wish.svg?style=flat-square)](https://beerpay.io/xotahal/react-native-material-ui?focus=wish)

circle.yml

@@ -0,0 +1,25 @@
+machine:
+  node:
+    version: stable
+  environment:
+    YARN_VERSION: 0.17.10
+    PATH: "${PATH}:${HOME}/.yarn/bin:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
+
+dependencies:
+  pre:
+    - |
+      if [[ ! -e ~/.yarn/bin/yarn || $(yarn --version) != "${YARN_VERSION}" ]]; then
+        curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION
+      fi
+  cache_directories:
+    - ~/.yarn
+    - ~/.cache/yarn
+  override:
+    - yarn
+
+test:
+  override:
+    - yarn lint
+    - yarn test
+  post:
+    - bash <(curl -s https://codecov.io/bash)

codecov.yml

@@ -0,0 +1,4 @@
+comment:
+  layout: "header, diff, sunburst"
+  branches: null
+  behavior: default

docs/BottomNavigation.md

@@ -1,56 +1,91 @@
 # [BottomNavigation](https://material.google.com/components/bottom-navigation.html)
 
-### Usage
+<img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/bottom-navigation-1.gif" width="285">
 
-Check [this](https://github.com/xotahal/react-native-material-ui/blob/master/docs/BottomNavigationAction.md) for more infromation on the BottomNavigationAction component.
+### Usage
 
 ```js
 ...
-import { BottomNavigation } from '../react-native-material-ui';
+import { BottomNavigation } from 'react-native-material-ui';
 ...
-state = {
-  navIndex: 0,
-};
-
 render() {
-  <BottomNavigation>
-    <BottomNavigationAction
-      label="Home"
-      iconName="home"
-      isActive={this.state.navIndex === 0}
-      onPress={() => this.setState({navIndex: 0})}
-    />
-    <BottomNavigationAction
-      label="Collection"
-      iconName="collections"
-      isActive={this.state.navIndex === 1}
-      onPress={() => this.setState({navIndex: 1})}
-    />
-    <BottomNavigationAction
-      label="Store"
-      iconName="store"
-      isActive={this.state.navIndex === 2}
-      onPress={() => this.setState({navIndex: 2})}
-    />
-    <BottomNavigationAction
-      label="Menu"
-      iconName="menu"
-      isActive={this.state.navIndex === 3}
-      onPress={() => this.setState({navIndex: 3})}
-    />
-  </BottomNavigation>
+    <BottomNavigation active={this.state.active} hidden={false} >
+        <BottomNavigation.Action
+            key="today"
+            icon="today"
+            label="Today"
+            onPress={() => this.setState({ active: 'today' })}
+        />
+        <BottomNavigation.Action
+            key="people"
+            icon="people"
+            label="People"
+            onPress={() => this.setState({ active: 'people' })}
+        />
+        <BottomNavigation.Action
+            key="bookmark-border"
+            icon="bookmark-border"
+            label="Bookmark"
+            onPress={() => this.setState({ active: 'bookmark-border' })}
+        />
+        <BottomNavigation.Action
+            key="settings"
+            icon="settings"
+            label="Settings"
+            onPress={() => this.setState({ active: 'settings' })}
+        />
+    </BottomNavigation>
 }
 ```
 ### API
 ```js
+// BottomNavigation
+const propTypes = {
+    /**
+    * The key of selected/active tab
+    */
+    active: PropTypes.string,
+    /**
+    * BottomNavigation.Action nodes
+    */
+    children: PropTypes.node.isRequired,
+    /**
+    * Wether or not the BottomNaviagtion should show
+    */
+    hidden: PropTypes.bool, /* DEFAULT: false */
+    /*
+    * Inline style of bottom navigation
+    */
+    style: PropTypes.shape({
+        container: View.propTypes.style,
+    }),
+};
+
+// BottomNavigation.Action
 const propTypes = {
     /**
-    * Node list with BottomNavigationAction components
+    * Will be rendered above the label as a content of the action.
+    */
+    icon: PropTypes.string.isRequired,
+    /**
+    * Will be rendered under the icon as a content of the action.
+    */
+    label: PropTypes.string,
+    /**
+    * True if the action is active (for now it'll be highlight by primary color)
+    */
+    active: PropTypes.bool.isRequired,
+    /**
+    * Callback for on press event.
     */
-    children: PropTypes.bool.isRequired,
+    onPress: PropTypes.func,
     /**
-    * You can overide any style for this bottom navigation
+    * Inline style of bottom navigation
     */
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    style: PropTypes.shape({
+        container: View.propTypes.style,
+        active: Text.propTypes.style,
+        disabled: Text.propTypes.style,
+    }),
 };
 ```

docs/BottomNavigationAction.md

@@ -45,20 +45,28 @@ render() {
 ```js
 const propTypes = {
     /**
-    * Sets the label of the navigation action
+    * Will be rendered above the label as a content of the action.
     */
-    label: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
     /**
-    * The vector icon name for the navigation action
+    * Will be rendered under the icon as a content of the action.
     */
-    iconName: PropTypes.string.isRequired,
+    label: PropTypes.string,
     /**
-    * Sets the action on active based on the state.
+    * True if the action is active (for now it'll be highlight by primary color)
     */
-    isActive: PropTypes.bool,
+    active: PropTypes.bool.isRequired,
     /**
-    * You can overide any style for this bottom navigation
+    * Callback for on press event.
     */
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    onPress: PropTypes.func,
+    /**
+    * Inline style of bottom navigation
+    */
+    style: PropTypes.shape({
+        container: View.propTypes.style,
+        active: Text.propTypes.style,
+        disabled: Text.propTypes.style,
+    }),
 };
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React Native Material Design Components",
   "main": "./index.js",
   "scripts": {
@@ -12,7 +12,9 @@
     "url": "https://github.com/xotahal/react-native-material-ui"
   },
   "jest": {
-    "preset": "jest-react-native"
+    "preset": "react-native",
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": true
   },
   "keywords": [
     "react-native",
@@ -36,16 +38,19 @@
   },
   "devDependencies": {
     "babel-core": "^6.14.0",
-    "babel-eslint": "^6.1.2",
-    "babel-jest": "^15.0.0",
+    "babel-eslint": "^7.1.1",
+    "babel-jest": "^17.0.2",
     "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react-native": "^1.9.0",
-    "eslint": "^3.6.1",
-    "eslint-config-airbnb": "^12.0.0",
-    "eslint-plugin-import": "^1.15.0",
-    "eslint-plugin-jsx-a11y": "^2.2.0",
-    "eslint-plugin-react": "^6.3.0",
-    "jest-cli": "^15.1.1"
+    "eslint": "^3.11.1",
+    "eslint-config-airbnb": "^13.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "2.2.3",
+    "eslint-plugin-react": "^6.8.0",
+    "jest": "^17.0.3",
+    "react": "^15.4.1",
+    "react-native": "^0.39.2",
+    "react-test-renderer": "^15.4.1"
   }
 }

src/ActionButton/ActionButton.react.js

@@ -1,5 +1,7 @@
+/* eslint-disable import/no-unresolved, import/extensions */
 import { View, Text, LayoutAnimation, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import React, { PureComponent, PropTypes } from 'react';
+/* eslint-enable import/no-unresolved, import/extensions */
 import Icon from '../Icon';
 import IconToggle from '../IconToggle';
 import RippleFeedback from '../RippleFeedback';

src/Avatar/Avatar.react.js

@@ -1,5 +1,7 @@
+/* eslint-disable import/no-unresolved, import/extensions */
 import React, { PureComponent, PropTypes } from 'react';
 import { View, Image, Text, StyleSheet } from 'react-native';
+/* eslint-enable import/no-unresolved, import/extensions */
 import Icon from '../Icon';
 
 const propTypes = {

src/Badge/Badge.react.js

@@ -1,5 +1,7 @@
+/* eslint-disable import/no-unresolved, import/extensions */
 import { Text, View } from 'react-native';
 import React, { PureComponent, PropTypes } from 'react';
+/* eslint-enable import/no-unresolved, import/extensions */
 import Icon from '../Icon';
 
 const propTypes = {