I want to show navbar in portrait mode and hide in landscape mode (for fullscreen video). Is there a way to do this?
You may implement your own NavBar and pass it to the Scene. I'm using something like that
onLayout({nativeEvent}){
const isPortrait = nativeEvent.layout.width === WIDTH;
if (isPortrait){
if (this.state.height != NAVBAR_HEIGHT_PORTRAIT){
this.setState({height: NAVBAR_HEIGHT_PORTRAIT, delta:STATUS_BAR_HEIGHT});
}
} else {
if (this.state.height != NAVBAR_HEIGHT_LANDSCAPE){
this.setState({height: NAVBAR_HEIGHT_LANDSCAPE, delta:0});
}
}
}
render(){
return (
<View onLayout={this.onLayout.bind(this)} style={[styles.container, {height:this.state.height}, this.props.style]} >
{this.props.navBarHeader}
<View style={[styles.container, {height:this.state.height}, this.props.style]} >
<View style={{height:this.state.delta,flex:1}}></View>
<View style={{height:this.state.height-this.state.delta, flexDirection:'row'}}>
{this.props.navigationState.children.length > 1 ? this.renderBackButton(this.props) : this.renderLeftButton(this.props)}
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
{this.renderTitle(this.props)}
</View>
{this.renderRightButton(this.props)}
</View>
{this.props.footer}
</View>
</View>
);
}
Maybe we could incorporate such logic within the components NavBar if community will want it and submit PR.
Yes I am using something similar, albeit simpler -
onLayout = event => {
const { width, height } = event.nativeEvent.layout;
var newStyle;
if (width > height) {
newStyle = update(this.state.style, {marginTop: {$set: 0}});
} else {
newStyle = update(this.state.style, {marginTop: {$set: 64}});
}
this.setState({style: newStyle});
// hide navbar in landscape mode
Actions.refresh({hideNavBar: (width > height)});
}
Hey @vinayr im trying to do something similar but, on my scene i got
componentDidMount(){
Actions.refresh({hideNavBar:false});
}
componentWillUnmount(){
Actions.refresh({hideNavBar: true})
}
So when im leaving the scene the navbar, but also reloads the state or something like that, cuz the previous scene had a validation that pushed to the current scene, and when i go back it redirects again to the scene.
Most helpful comment
You may implement your own NavBar and pass it to the Scene. I'm using something like that
Maybe we could incorporate such logic within the components NavBar if community will want it and submit PR.