Skip to content
This repository has been archived by the owner on Feb 15, 2019. It is now read-only.

Variable height for navigation bar #451

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ Flow).
## Updating route params

Sometimes you don't have all of the data that you need to set the
navigation bar title when you mount the route - for example, if you
navigation bar title or height when you mount the route - for example, if you
navigate to a user profile screen by user id and need to fetch the
profile data before you know what the name is. In this case,
one solution is to use the `updateCurrentRouteParams` function available
Expand All @@ -296,13 +296,17 @@ on `StackNavigation` navigators.
+
+ return params.isCool ? `Hey cool person!` : `zzz`;
},
+ height(params) {
+ return params.height;
+ }
}
}

+ componentDidMount() {
+ setTimeout(() => {
+ this.props.navigator.updateCurrentRouteParams({
+ isCool: this.props.route.params.name === 'Brent'
+ isCool: this.props.route.params.name === 'Brent',
+ height: 115
+ })
+ }, 1000);
+ }
Expand Down Expand Up @@ -423,6 +427,8 @@ will be rendered in the title position of the `navigationBar`.
will be rendered in the right position of the `navigationBar`.
- `renderBackground` - a function that should return a React component that
will be rendered in the background of the `navigationBar`.
- `height` - Either a number or a function that returns a number,
representing the height of the navigation bar. The function is provided with the route params as the first argument.

## TabNavigation

Expand Down
6 changes: 5 additions & 1 deletion src/ExNavigationRouter.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,11 @@ export class ExNavigationRoute {
};

getBarHeight = () => {
return _.get(this.config, 'navigationBar.height');
const height = _.get(this.config, 'navigationBar.height');
if (typeof height === 'function') {
return height(this.params, this.config);
}
return height;
};

getBarBorderBottomWidth = () => {
Expand Down
Loading