Comments (15)
I wrote a custom NavigationBar
so that I could hide/show per route, but also animate it too... it was very quickly "penned" so it's unlikely to be solid, but it might point you in the right direction:
// CustomNavBar.js
import React, { Navigator, View, Animated, StyleSheet } from 'react-native';
var COMPONENT_NAMES = ['Title', 'LeftButton', 'RightButton'];
export default class extends Navigator.NavigationBar {
constructor(props: any) {
super(props);
this._shouldHideNavBar = this._shouldHideNavBar.bind(this);
let { navState } = props;
const route = navState.routeStack[navState.presentedIndex];
this.state = {
heightValue: new Animated.Value(
!route.hideNavBar ?
props.navigationStyles.General.TotalNavHeight : 0),
};
}
componentDidMount() {
setImmediate(this._shouldHideNavBar);
}
componentDidUpdate() {
setImmediate(this._shouldHideNavBar);
}
render(): View {
var navBarStyle = {
height: this.state.heightValue,
overflow: 'hidden',
};
var navState = this.props.navState;
var components = navState.routeStack.map((route, index) =>
COMPONENT_NAMES.map(componentName =>
this._getComponent(componentName, route, index)
)
);
return (
<Animated.View
key={this._key}
style={[styles.navBarContainer, navBarStyle, this.props.style]}>
{components}
</Animated.View>
);
}
_shouldHideNavBar() {
let { navState } = this.props;
const route = navState.routeStack[navState.presentedIndex];
Animated.timing(this.state.heightValue, {
duration: 250,
toValue: !route.hideNavBar ? this.props.navigationStyles.General.TotalNavHeight : 0,
}).start();
}
}
var styles = StyleSheet.create({
navBarContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
backgroundColor: 'transparent',
},
});
Usage:
// Render somewhere
<ExNavigator
navigator={navigator}
initialRoute={Router.getMyRoute()}
renderNavigationBar={props => <CustomNavBar {...props} />}
// Route somewhere
getMyRoute() {
return {
getSceneClass() {
return MyScreen;
},
hideNavBar: true,
};
},
Hope this might help
from ex-navigator.
With #19 it's possible to override showNavigationBar
on the route level:
{
showNavigationBar: false,
getSceneClass() {
return require('./HomeScene');
},
getTitle() {
return 'Home';
},
};
from ex-navigator.
Thanks @rogchap, works great!
A note to others, make sure to import your CustomNavBar
like so:
import CustomNavBar from './CustomNavBar';
from ex-navigator.
+1
from ex-navigator.
I haven't tested this but you could try re-rendering the ExNavigator with a different value for the navigationBarStyle
prop (set the height to 0. may also need to hide overflow). Let me know how it goes.
from ex-navigator.
This isn't ideal but you can also use two ExNavigators. The parent one can have showNavigationBar
set to false and then the first route can be wrapped in another ExNavigator with the navigation bar visible. Then instead of this.props.navigator.push
use this.props.navigator.parentNavigator.push
.
from ex-navigator.
Uh.. Actually I found another workaround. Just changed the color of navigator to my parent view and returned empty string to title. The navigation bar and its height is physically there but it works for my UI.
A feature to do that could be useful btw.
Thanks anyway
from ex-navigator.
@ide height to 0 with hidden overflow works.
Would be really nice if there was a way that the route could declare whether it wanted to hide the navigation bar 👍
from ex-navigator.
I tried to implement it in two different ways, but neither worked and I'm stuck. It seems two react issues are blocking this. I opened two PR here and linked the issues. I'd appreciate a second pair of eyes, maybe I'm missing something:
from ex-navigator.
@cjbell ExNavigator should accomodate many different ways to hide the nav bar (sliding out, fading, fading + sliding, not completely hiding) so I'd prefer to make that possible and let people write their own code (as @despairblue is doing -- except Navigator / ExNavigator don't make that easy to do quite yet). So we probably won't add a method like hideNavigationBar
but do want to let you implement this yourself and if it's something lots of people use, you could publish it as a mixin or helper lib.
from ex-navigator.
Does this work in 0.3.0 release?. I've tried to add showNavigationBar: false
into my route, but its still showing up.
from ex-navigator.
@alexcurtis showNavigationBar
isn't supported on routes because we don't yet have an API. It might involve adding a second scene config field that controls the nav bar's animation but we haven't thought about it much.
from ex-navigator.
how do i rerender exnavigator with different values for the navigationBarStyle prop when using a new route ? @ide
from ex-navigator.
@jawadrehman That's not supported right now -- you'll have to look through the code to see how to write a custom NavigationBar implementation.
from ex-navigator.
@rogchap you, sir, are a champion!
from ex-navigator.
Related Issues (20)
- import type * as ExRoute from './ExRoute'; HOT 3
- onWillFocus called for previous route and pushed route
- cannot navigate using navigator.push HOT 1
- renderScene doesn't render the component with latest properties passed to the router
- Are there any plans to wrap Navigator Experimental? HOT 1
- proxy `replacePreviousAndPop` method HOT 2
- problems with UIManager.measure() HOT 4
- Element type is invalid: expected a string HOT 2
- How to make title center in android? HOT 4
- Dude's where's the ex-navigation mentioned at ReactEurope? HOT 5
- Can we use ex-navigator to create slide menu ? HOT 2
- when react-native >=0.27, The code 'import ExNavigator from '@exponent/react-native-navigator' ' is wrong HOT 2
- When hiding the back button on Android, the title is placed odd. HOT 1
- Override Back Button Route HOT 1
- How do I get when the user presses 'back'?
- Two export default lines in ExRouteRenderer.js HOT 1
- Only one default export allowed per module. HOT 1
- getNavigatorByUID() -> "Navigator does not exist" HOT 1
- Hook up navigation bar methods to the scene state and props HOT 2
- onDidFocus inside route component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ex-navigator.