How to Hide header

[saeropark]

Hi as you can see I have 3 very ugly headers.

How it works is the main header "EVENTS & ANNOUNCEMENTS" is under a drawer navigator from sidebar.js

by clicking on each item drawer, it will open up a screen, and in this case a view with 2 tabs (the blue tabs) eventTabs.js

SO WHEN i click on each listitem, it will open up another screen with the header. currently. I have hidden the TITLE: PULSE EVENT header., but i was wondering is there a way to set "EVENTS & ANNOUNCEMENTS to the listitem title?

or

to hide sidebar.js header and enforce a the current screen's EventStack navigator header?

Inside ``eventTabs.js`:

const AnnStack = StackNavigator({
    List: {screen: EventList},
    Info: {screen: EventDetail},
    
} );

const EventTab = TabNavigator({
    Upcoming: { screen: AnnStack },
    Past: { screen: PastTab },
},
    { mode: 'modal' } // this is needed to make sure header is hidden on ios
);

const EventStack = StackNavigator({
    Home: {screen: EventTab},
});

[saeropark]

I think my issue similar to #88 and #141

but my problem is between navigators in different files. Hopefully there is some help..

[bktoky]

static navigationOptions = {
header: null,
};

[saeropark]

@bktoky i have done that to hide the TITLE: XXX header. however, i wish to either

• replace it with EVENTS & ANNOUNCEMENTS header
• hide EVENTS & ANNOUNCEMENTS header when i navigate into eventTabs.js

[xipgroc]

have you tried headerMode: 'none' as option of StackNavigator?

[JanPeter]

I'm using the StackNavigator and headerMode: 'none' does not work for me. At least if I configure it like the following:

export default class Onboarding extends Component {

  static navigationOptions = {
    headerMode: 'none'
  }

  ...
}

header: null works for me.

I think the documentation there is a little misleading as:

none - No header will be rendered.

means at least in my opinion that no header will be displayed. So it doesn't make any sense to render the grey block where the header would be placed. But furthermore:

header
React Element or a function that given HeaderProps returns a React Element, to display as a header. Setting to null hides header.

Clearly says that the header will be hidden.

[jaycee425]

is there a way to do it programmatically?
header: navigation.state.params.thanks === 'thanks' ? null : [what-to-put],
I want it to have just the normal component not a personalized one,, thank you :D

---

nevermind i just make the control on the header height and set it to 0 when i dont need it and then the null on hte header left and right if needed ...if there's an easier way im open ot suggestions

[JanPeter]

@jaycee425 You can do it programmatically with the following code:

static navigationOptions = ({ navigation }) => ({
  header: (navigation.state.params.thanks) => <HeaderView content={navigation.state.params.thanks} /> : null,
})

And then you can set the state params with this:

componentWillMount() {
  this.props.navigation.setParams({ thanks: "Something" });
}

Although I haven't tried the code myself and I'm not sure if something like the HeaderView is accessible for the public api in react-navigation and if there is a content property on that. But I think in an abstract way, this is how you set it programmatically.

[puelocesar]

I want to hide the navigation bar when showing my searchBar, so I do the following:

if (navigation.state.params && navigation.state.params.showSearch) {
    return {
        header: null,
    }
}

This works fine on iOS, but on Android, I get a blank header above my UI. Any ideas?

[spencercarli]

Hi! In an effort to get the hundreds of issues on this repo under control I'm closing issues tagged as questions. Please don't take this personally - it's simply something we need to do to get the issues to a manageable point. If you still have a question I encourage you to re-read the docs, ask on StackOverflow, or ask on the #react-navigation Reactiflux channel. Thank you!

[thebylito]

static navigationOptions = { header: null };

this works for me, "react-navigation": "^2.0.4"

[brentvatne]

https://reactnavigation.org/docs/en/navigation-options-resolution.html for more info