Is there any way to hide navigation bar after initial route

[sercanov]

I know the showNavigationBar prop with the ExNavigator component but I need to hide navbar after first route. Is there any way ?

Thanks

[melihmucuk]

+1

[ide]

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.

[jesseruder]

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.

[sercanov]

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

[cjbell]

@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 :+1:

[despairblue]

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:

• #16
• #17

[ide]

@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.

[despairblue]

With #19 it's possible to override showNavigationBar on the route level:

{
  showNavigationBar: false,

  getSceneClass() {
    return require('./HomeScene');
  },

  getTitle() {
    return 'Home';
  },
};

[alexcurtis]

Does this work in 0.3.0 release?. I've tried to add showNavigationBar: false into my route, but its still showing up.

[ide]

@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.

[jawadrehman]

how do i rerender exnavigator with different values for the navigationBarStyle prop when using a new route ? @ide

[ide]

@jawadrehman That's not supported right now -- you'll have to look through the code to see how to write a custom NavigationBar implementation.

[rogchap]

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

[joshuapinter]

Thanks @rogchap, works great!

A note to others, make sure to import your CustomNavBar like so:

import CustomNavBar from './CustomNavBar';

[jasonwiener]

@rogchap you, sir, are a champion!