[BottomNavigation] Added show and hide animations #55

HofmannZ · 2016-12-07T14:34:38Z

I just added some show and hide animations to the BottomNavigation component.

It can be passed as a prop to the component like shouldShow={true} or shouldHide={true}. It follows the material design guidelines on motion and curves, we use this to hide the BottomNavigation when scrolling in a ScrollView.

Fix bottom navigation component

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

* 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

…g the material design mation guidelines

xotahal · 2016-12-07T17:31:36Z

src/BottomNavigation/BottomNavigation.react.js

+    constructor(props) {
+        super(props);
+        this.state = {
+            moveAnimated: new Animated.Value(0 - this.context.uiTheme.bottomNavigation.container.height),


There should be something like this:

constructor(props, context) { super(props, context); .... context.uiTheme ... }

First question:
Does it work? :) Because the bottomNavigation is StylSheet and you should use this method to access to height. I'll try it later as well.

Second question:
Why we need bottom navigation to start as hidden?

Yeah, I have it configured to animate in at mount, but I think it's more appropriate to init it in view. That will mean there is no need for the context in the constructor.

xotahal · 2016-12-07T17:38:29Z

src/BottomNavigation/BottomNavigation.react.js

+            this._show();
+        }
+
+        if (nextProps.shouldHide !== this.props.shouldHide && nextProps.shouldHide === true) {


There should be just one property to control if the bottom navigation is visible or not ...

Modal uses visible
Status bar uses hidden

So, pick one of them ;) Status bar is probably more similar to bottom navigation. And please, give it to propTypes :)

I will change that up

xotahal · 2016-12-07T17:50:12Z

src/BottomNavigation/BottomNavigation.react.js

+          container: {
+            bottom: this.state.moveAnimated,
+          },
+        };


First of all:
getStyles should return complete styles. So, you can move the local object to get styles method and pass the this.state to getStyles method as a third param. As I did it here

But:
IMHO it's better to use it directly in animated.view since it's instance of Animated.Value. Because it's kind of internal state of current position of view and if someone passes style prop to BottomNavigation, he could rewrite your animated value, because user's style has always the biggest priority

<Animated.View style={[styles.container, { bottom: this.state.moveAnimated }]>

HofmannZ · 2016-12-07T20:52:18Z

I made some changes as requested, It should now suit better.

HofmannZ · 2016-12-18T22:00:19Z

Hey man, still waiting for this PR to be merged, this is the feature from the guideline that it implements: https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-behavior

xotahal · 2016-12-19T09:38:38Z

Sorry for that @HofmannZ, I've just fetched the current version and there is kind of problem. Could you merge it with master and run eslint and test - I've just made a revision of eslint and jest, now I have to write a documentation about it :) There will be just small issues, fix them and it's ready I think ..

…es. (xotahal#62) * [BottomNavigation] Ability to handle custom Icons instead of icon names. * Fix PropTypes.

…y has some small issues.

HofmannZ · 2016-12-28T10:16:48Z

Fixed those small issues, also merged with your master and ran the new Jest tests. All test suites passed. All ready to merge with master ;)

xotahal

Hey @HofmannZ :) Have you already tried somewhere? I've just pulled it and tried with demo app and the behaivour is strange. But maybe I use it in bad way.

xotahal · 2017-01-03T18:40:51Z

src/BottomNavigation/BottomNavigation.react.js

+
+    hide = () => {
+        Animated.timing(this.state.moveAnimated, {
+            toValue: this.context.uiTheme.bottomNavigation.container.height,


This is not correct. Because it always returns undefined. Another problem is when you override ...container.height it will return bad number.

Ends with this error:

xotahal · 2017-01-03T18:44:38Z

When I fixed the ...height number it works like this:

But looks really good. Can't wait when we use it :)

HofmannZ · 2017-01-03T18:53:02Z

Did not try the demo app, my bad on that one. I made some little changes as well, where we only useNativeDriver on android and not on iOS. Seems to be a little funky on iOS.
Could also use the behavior on the Toolbar, because it should also hide as described in the Guidelines. I could set up a PR for that right away.

HofmannZ · 2017-01-03T19:40:56Z

Could not connect the demo app's dev server to my iPhone due to a small change in the iOS source code, already did a quick PR with the fix 🤓.

Fix getting height of bottom navigation

xotahal · 2017-01-10T09:49:54Z

Thanks for that @HofmannZ ;)

* 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

* 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

HofmannZ and others added 8 commits December 6, 2016 17:35

Merge pull request #1 from xotahal/HotmannZ

d3d774e

Fix bottom navigation component

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

042c60e

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

Update BottomNavigation.md

cc689fc

Update README.md

1a49cbb

Delete BottomNavigationAction.md

6f9a51d

Bump version

e9f99b7

Added show and hide animations to BottomNavigation component followin…

fcb9c4b

…g the material design mation guidelines

xotahal requested changes Dec 7, 2016

View reviewed changes

Edit based on feedback in pull request

d4db786

xotahal added 8 commits December 13, 2016 17:06

Fix eslint errors

1738e09

Update jest

01c569d

Add snapshot tests for Subheader

2c368e2

Add circle.yml

b6a8a1f

Update codecov.yml

a562055

Add codecov.io (xotahal#57)

31ad470

Add tests for Container.react.js

6945805

Update README.md

f076dc1

NewOldMax and others added 5 commits December 21, 2016 11:13

[BottomNavigation] Ability to handle custom Icons instead of icon nam…

decb49a

…es. (xotahal#62) * [BottomNavigation] Ability to handle custom Icons instead of icon names. * Fix PropTypes.

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

c37d6aa

Minor bug fix and added nativa animation driver support for android

7123d5f

Merged HofmannZ/origin with xotahal/master, jest tests pass, lint onl…

2a1c143

…y has some small issues.

Fixed lint error.

4ce9e72

xotahal reviewed Jan 3, 2017

View reviewed changes

Added useNAtiveDriver and fixed the heigth issue

048dc3e

xotahal and others added 2 commits January 10, 2017 10:25

Fix getting height of bottom navigation

7d41340

Merge pull request #2 from xotahal/hofmaster

08aab19

Fix getting height of bottom navigation

xotahal merged commit 663e417 into xotahal:HotmannZ Jan 10, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BottomNavigation] Added show and hide animations #55

[BottomNavigation] Added show and hide animations #55

HofmannZ commented Dec 7, 2016

xotahal Dec 7, 2016

HofmannZ Dec 7, 2016

xotahal Dec 7, 2016

HofmannZ Dec 7, 2016

xotahal Dec 7, 2016

HofmannZ commented Dec 7, 2016

HofmannZ commented Dec 18, 2016

xotahal commented Dec 19, 2016

HofmannZ commented Dec 28, 2016

xotahal left a comment

xotahal Jan 3, 2017

xotahal commented Jan 3, 2017

HofmannZ commented Jan 3, 2017

HofmannZ commented Jan 3, 2017

xotahal commented Jan 10, 2017

[BottomNavigation] Added show and hide animations #55

[BottomNavigation] Added show and hide animations #55

Conversation

HofmannZ commented Dec 7, 2016

xotahal Dec 7, 2016

Choose a reason for hiding this comment

HofmannZ Dec 7, 2016

Choose a reason for hiding this comment

xotahal Dec 7, 2016

Choose a reason for hiding this comment

HofmannZ Dec 7, 2016

Choose a reason for hiding this comment

xotahal Dec 7, 2016

Choose a reason for hiding this comment

HofmannZ commented Dec 7, 2016

HofmannZ commented Dec 18, 2016

xotahal commented Dec 19, 2016

HofmannZ commented Dec 28, 2016

xotahal left a comment

Choose a reason for hiding this comment

xotahal Jan 3, 2017

Choose a reason for hiding this comment

xotahal commented Jan 3, 2017

HofmannZ commented Jan 3, 2017

HofmannZ commented Jan 3, 2017

xotahal commented Jan 10, 2017