Skip to content

A change in tabs can produce display issues. #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 26, 2016
Merged

A change in tabs can produce display issues. #362

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d8b556
When there is a change in tabs via props in ScrollableTabBar, recalcu…
ghuh Jul 25, 2016
aa39509
Merge branch 'master' into fix-width-on-new-tabs
ghuh Aug 5, 2016
a883cb8
Add example where the number of tabs changes forcing it back and fort…
ghuh Aug 5, 2016
601090d
Revert "Add example where the number of tabs changes forcing it back …
ghuh Sep 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
When there is a change in tabs via props in ScrollableTabBar, recalcu… 
…late width
  • Loading branch information
@ghuh
ghuh committed Jul 25, 2016
commit 2d8b556b8707b513ed478c8ee650dc16bcb66b7e
7 changes: 7 additions & 0 deletions ScrollableTabBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,13 @@ const ScrollableTabBar = React.createClass({
</View>;
},

componentWillReceiveProps(nextProps) {
// If the tabs change, force the width of the tabs container to be recalculated
if (JSON.stringify(this.props.tabs) != JSON.stringify(nextProps.tabs) && this.state._containerWidth) {
Copy link
Collaborator

@skv-headless skv-headless Sep 25, 2016

Choose a reason for hiding this comment

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

Don't you think that shallow comparison would be enough?

Copy link
Contributor Author

@ghuh ghuh Sep 25, 2016

Choose a reason for hiding this comment

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

That's why I used JSON.stringify. It's a poor man's deep equals. There are more precise ways to do it but they all take a lot more code and have slower performance.

Regardless, yes, I believe this should be sufficient to ensure that any change will trigger the state to update correctly.

this.setState({ _containerWidth: null, });
}
},

onTabContainerLayout(e) {
this._tabContainerMeasurements = e.nativeEvent.layout;
let width = this._tabContainerMeasurements.width;
Expand Down