No option to hide a header in StackNavigator

[knowbody]

Currently, there is no way to hide a header in StackNavigator

[fakenickels]

cc @medson10

[grabbou]

I have a bit more advanced plan for this particular feature than just "headerMode" config. In reality, there are many different ways to hide a header from a screen and we've seen this being a bit tricky to solve in case of React Navigation.

Right now, the header uses hardcoded HeaderInterpolator module - a set of functions that describe transitions between one state of it to another (when you push screen, it has to change from the current one to the next one).

My plan is to allow headerInterpolator to be set on Screen component so that each screen can define its own interpolator.

Then, our library just needs to extend default HeaderInterpolator and overwrite e.g. forContainer one to implement transition of our choice. For instance, in order to slide it up, we would most likely implement translateY. For hiding it along the screen, we would modify its translateX.

[grabbou]

@czystyl I know that you've been prototyping this already, I can help you by providing the ability to set headerInterpolator on per screen basis and then, you can work on making the interpolators itself.

[fakenickels]

@grabbou that seems interesting!

meanwhile, could we have another constructor in headerMode variant called Hidden as a quick way to hide the header?

[grabbou]

I know it sounds a bit "advanced" and time-consuming to implement, but I already have that in progress. I will try to land this solution tomorrow and if it doesn't work, I'll implement another workaround.

CC: @czystyl

[fakenickels]

Awesome, I think we can just use headerComponent to render nothing for now

[knowbody]

I think we can just use headerComponent to render nothing for now

@grabbou is this the solution "for now" if so let's close this and add the note in the docs somewhere.

[kennetpostigo]

@knowbody Do you have any examples of using this anywhere? Can't find it in the docs.

[knowbody]

@kennetpostigo hey, sorry for the late reply. The way you can do it is to use headerComponent to StackNavigator component. I know it is not ideal but that's a workaround for now.

here's an example

my App.re:

open Navigation;

module NullComponent = {
  let component = ReasonReact.statelessComponent("IOSHeader");
  let make = (~headerProps as _, _children) => {
    ...component,
    render: _self => ReasonReact.null,
  };
};

module Main = {
  let component = ReasonReact.statelessComponent("App");
  let make = _children => {
    ...component,
    render: _self =>
      <StackNavigator
        initialState=[|Config.Home|] headerComponent=NullComponent.make>
        ...(
             (~currentRoute, ~navigation) =>
               switch (currentRoute) {
               | _ => <Home navigation />
               }
           )
      </StackNavigator>,
  };
};

let app = () => <Main />;