[Toolbar] Added show and hide animations

docs/BottomNavigation.md

@@ -1,4 +1,5 @@
 # [BottomNavigation](https://material.google.com/components/bottom-navigation.html)
+
 <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/bottom-navigation-1.gif" width="285">
 <img src="https://raw.githubusercontent.com/xotahal/react-native-material-ui-demo-app/master/resources/bottom-navigation-anim.gif" width="285">
 

src/Toolbar/Toolbar.react.js

@@ -10,6 +10,8 @@ import {
     TextInput,
     TouchableWithoutFeedback,
     View,
+    Platform,
+    Easing,
 } from 'react-native';
 /* eslint-enable import/no-unresolved, import/extensions */
 import IconToggle from '../IconToggle';
@@ -84,6 +86,10 @@ const propTypes = {
     */
     translucent: PropTypes.bool,
     /**
+    * Wether or not the Toolbar should show
+    */
+    hidden: PropTypes.bool,
+    /**
     * Called when centerElement was pressed.
     * TODO: better to rename to onCenterElementPress
     */
@@ -146,6 +152,7 @@ const propTypes = {
 const defaultProps = {
     elevation: 4, // TODO: probably useless, elevation is defined in getTheme function
     style: {},
+    hidden: false,
 };
 const contextTypes = {
     uiTheme: PropTypes.object.isRequired,
@@ -219,6 +226,7 @@ class Toolbar extends PureComponent {
         this.state = {
             isSearchActive: props.isSearchActive,
             searchValue: '',
+            moveAnimated: new Animated.Value(0),
         };
     }
     componentWillReceiveProps(nextProps) {
@@ -230,6 +238,14 @@ class Toolbar extends PureComponent {
         if (nextProps.searchable && this.state.isSearchActive) {
             this.backButtonListener = addBackButtonListener(this.onSearchCloseRequested);
         }
+        // if hidden prop is changed we animate show or hide
+        if (nextProps.hidden !== this.props.hidden) {
+            if (nextProps.hidden === true) {
+                this.hide();
+            } else {
+                this.show();
+            }
+        }
     }
     onMenuPressed = (labels) => {
         const { onRightElementPress } = this.props;
@@ -268,7 +284,6 @@ class Toolbar extends PureComponent {
             searchable.onSearchPressed();
         }
 
-
         this.setState({
             isSearchActive: true,
             searchValue: '',
@@ -283,7 +298,6 @@ class Toolbar extends PureComponent {
             searchable.onSearchClosed();
         }
 
-
         this.setState({
             isSearchActive: false,
             searchValue: '',
@@ -292,6 +306,24 @@ class Toolbar extends PureComponent {
     focusSearchField() {
         this.searchFieldRef.focus();
     }
+    show = () => {
+        Animated.timing(this.state.moveAnimated, {
+            toValue: 0,
+            duration: 225,
+            easing: Easing.bezier(0.0, 0.0, 0.2, 1),
+            useNativeDriver: Platform.OS === 'android',
+        }).start();
+    }
+    hide = () => {
+        const { moveAnimated, styles } = this.state;
+
+        Animated.timing(moveAnimated, {
+            toValue: (-1 * StyleSheet.flatten(styles.container).height),
+            duration: 195,
+            easing: Easing.bezier(0.4, 0.0, 0.6, 1),
+            useNativeDriver: Platform.OS === 'android',
+        }).start();
+    }
     renderLeftElement = (style) => {
         const { searchable, leftElement, onLeftElementPress, size } = this.props;
 
@@ -496,7 +528,13 @@ class Toolbar extends PureComponent {
         const styles = getStyles(this.props, this.context, this.state);
 
         return (
-            <Animated.View style={styles.container}>
+            <Animated.View
+                style={[styles.container, {
+                    transform: [{
+                        translateY: this.state.moveAnimated,
+                    }],
+                }]}
+            >
                 {this.renderLeftElement(styles)}
                 {this.renderCenterElement(styles)}
                 {this.renderRightElement(styles)}