Skip to content

Commit

Permalink
Add show and hide animation [BottomNavigation] (#73)
Browse files Browse the repository at this point in the history 
* Added bottom navigation component with dacumentation, as dricribed in the material design guidelines

* Fixed a bug where the list item component uses a static background instad of canvas collor

* Added onPress ad required prop type

* Fix bottom navigation component

- moves BottomNavigationAction under BottomNavigation.Action
- makes styles global, moves them to getTheme.js
- adds ability to use action without label
- adds missing paddingTop
- adds missing comments
- fixes lint

* [BottomNavigation] Add show and hide animations (#55)

* Remove code specific to Android in Toolbar Search (#54)

All platforms (iOS, android and 3rd party windows) implements BackAndroid (iOS mocks it).

* [BottomNavigation] Added component (#52)

* Add bottom navigation component

* Fixed a bug where the list item component uses the wrong then color refrence

* Fixed a bug where the list item component uses a static background instad of canvas collor

* Added onPress ad required prop type

* Fix bottom navigation component

- moves BottomNavigationAction under BottomNavigation.Action
- makes styles global, moves them to getTheme.js
- adds ability to use action without label
- adds missing paddingTop
- adds missing comments
- fixes lint

* Update BottomNavigation.md

* Update README.md

* Delete BottomNavigationAction.md

* Bump version

* Added show and hide animations to BottomNavigation component following the material design mation guidelines

* Edit based on feedback in pull request

* Fix eslint errors

* Update jest

* Add snapshot tests for Subheader

* Add circle.yml

* Update codecov.yml

* Add codecov.io (#57)

* Add tests for Container.react.js

* Update README.md

* [BottomNavigation] Ability to handle custom Icons instead of icon names. (#62)

* [BottomNavigation] Ability to handle custom Icons instead of icon names.

* Fix PropTypes.

* [RippleFeedback] Use TouchableOpacity for iOS (#41) (#64)

* Minor bug fix and added nativa animation driver support for android

* Fixed lint error.

* Added useNAtiveDriver and fixed the heigth issue

* Fix getting height of bottom navigation

* Fix eslint
  • Loading branch information
@xotahal
xotahal authored Jan 10, 2017
1 parent 2381444 commit 1b39688
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 12 deletions.
3 changes: 3 additions & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
"react/jsx-indent-props": [2, 4],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/no-unused-prop-types": 0,
// this could be on, but I have to resolve couple of things
// see https://github.com/eslint/eslint/issues/5139
"class-methods-use-this": "off",
},
"globals": {
"after": false,
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,5 @@ log.android
.idea
webpack-assets.json
*report*

yarn.lock
7 changes: 5 additions & 2 deletions docs/BottomNavigation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import { BottomNavigation } from 'react-native-material-ui';
...
render() {
<BottomNavigation active={this.state.active} >
<BottomNavigation active={this.state.active} hidden={false} >
<BottomNavigation.Action
key="today"
icon="today"
Expand Down Expand Up @@ -49,6 +49,10 @@ const propTypes = {
*/
children: PropTypes.node.isRequired,
/**
* Wether or not the BottomNaviagtion should show
*/
hidden: PropTypes.bool, /* DEFAULT: false */
/*
* Inline style of bottom navigation
*/
style: PropTypes.shape({
Expand Down Expand Up @@ -82,6 +86,5 @@ const propTypes = {
active: Text.propTypes.style,
disabled: Text.propTypes.style,
}),

};
```
72 changes: 72 additions & 0 deletions docs/BottomNavigationAction.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
# [BottomNavigationAction](https://material.google.com/components/bottom-navigation.html)

### Usage

Check [this](https://github.com/xotahal/react-native-material-ui/blob/master/docs/BottomNavigation.md) for more infromation on the BottomNavigation component.

```js
...
import { BottomNavigationAction } 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>
}
```
### API
```js
const propTypes = {
/**
* 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.
*/
onPress: PropTypes.func,
/**
* Inline style of bottom navigation
*/
style: PropTypes.shape({
container: View.propTypes.style,
active: Text.propTypes.style,
disabled: Text.propTypes.style,
}),
};
```
61 changes: 55 additions & 6 deletions src/BottomNavigation/BottomNavigation.react.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable import/no-unresolved, import/extensions */
import React, { PropTypes, PureComponent } from 'react';
import { View } from 'react-native';
import { View, Platform, Animated, Easing, StyleSheet } from 'react-native';
/* eslint-enable import/no-unresolved, import/extensions */

import BottomNavigationAction from './BottomNavigationAction.react';
Expand All @@ -15,21 +15,26 @@ const propTypes = {
*/
children: PropTypes.node.isRequired,
/**
* Wether or not the BottomNaviagtion should show
*/
hidden: PropTypes.bool,
/**
* Inline style of bottom navigation
*/
style: PropTypes.shape({
container: View.propTypes.style,
}),
};
const defaultProps = {
hidden: false,
style: {},
};
const contextTypes = {
uiTheme: PropTypes.object.isRequired,
};

function getStyles(props, context) {
const { bottomNavigation } = context.uiTheme;

const local = {};

return {
Expand All @@ -44,22 +49,66 @@ function getStyles(props, context) {
* Component for bottom navigation
* https://material.google.com/components/bottom-navigation.html
*/

class BottomNavigation extends PureComponent {
constructor(props, context) {
super(props, context);

this.state = {
styles: getStyles(props, context),
moveAnimated: new Animated.Value(0),
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.style !== this.props.style) {
this.setState({ styles: getStyles(nextProps, this.context) });
}

if (nextProps.hidden !== this.props.hidden) {
if (nextProps.hidden === true) {
this.hide();
} else {
this.show();
}
}
}
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: StyleSheet.flatten(styles.container).height,
duration: 195,
easing: Easing.bezier(0.4, 0.0, 0.6, 1),
useNativeDriver: Platform.OS === 'android',
}).start();
}
render() {
const { active, children } = this.props;
const styles = getStyles(this.props, this.context);
const { styles } = this.state;

return (
<View style={styles.container}>
<Animated.View
style={[styles.container, {
transform: [{
translateY: this.state.moveAnimated,
}],
}]}
>
{React.Children.map(
children,
child => React.cloneElement(child, {
...child.props,
active: child.key === active,
}),
)}
</View>
</Animated.View>
);
}
}
Expand Down
4 changes: 0 additions & 4 deletions src/BottomNavigation/BottomNavigationAction.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { StyleSheet, View, Text } from 'react-native';
import RippleFeedback from '../RippleFeedback';
import Icon from '../Icon';


const propTypes = {
/**
* Will be rendered above the label as a content of the action.
Expand Down Expand Up @@ -37,7 +36,6 @@ const propTypes = {
active: Text.propTypes.style,
disabled: Text.propTypes.style,
}),

};
const defaultProps = {
active: false,
Expand Down Expand Up @@ -82,9 +80,7 @@ function getStyles(props, context) {
};
}


class BottomNavigationAction extends PureComponent {

renderIcon(icon, styles, color) {
let element;
if (React.isValidElement(icon)) {
Expand Down

1 comment on commit 1b39688

@dinesh-tech1990
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When scrolling up and down, show and hide animation not working in BottomNavigation.
My code is:

      <BottomNavigation active={this.state.active}
       
        style={{ container: { position: 'absolute', bottom: 0, left: 0, right: 0 } }}
      >
        <BottomNavigation.Action
          key="Today"
          icon="today"
          label="Today"
          onPress={() => this.setState({ active: 'Today' })}
        />
        <BottomNavigation.Action
          key="Profile"
          icon="person"
          label="Profile"
          onPress={() => {
            this.setState({ active: 'Profile' });
          }}
        />
        <BottomNavigation.Action
          key="Map"
          icon="map"
          label="Map"
          onPress={() => this.setState({ active: 'Map' })}
        />
        <BottomNavigation.Action
          key="Chat"
          icon="chat"
          label="Chat"
          onPress={() => this.setState({ active: 'Chat' })}
        />
      </BottomNavigation>

I am using react-native FlatList in Today.js page
export default class TodayView extends Component {
constructor(props, context) {
super(props, context);
}

render() {
return (


Welcome to Today View

<FlatList
data={[
{ key: 'Devin' },
{ key: 'Jackson' },
{ key: 'James' },
{ key: 'Joel' },
{ key: 'John' },
{ key: 'Jillian' },
{ key: 'Jimmy' },
{ key: 'Julie' },
{ key: 'John' },
{ key: 'Jillian' },
{ key: 'Jimmy' },
{ key: 'Dinesh' },
]}
renderItem={({ item }) => <Text style={{padding : 50}}>{item.key}}
/>

);
}
};

Please sign in to comment.