4. Stack

Structure

This is how you run the app with a stack:

navigation.start(
  <StackView id="home_stack">
    <SingleView id="home" screen={Home} />
  </StackView>
);

Or if you want to be crazy, and start the app with an active stack of multiple pages:

navigation.start(
  <StackView id="home_stack">
    <SingleView id="home" screen={Home} />
    <SingleView id="home2" screen={Home} />
    <SingleView id="home3" screen={Home} />
    <SingleView id="home4" screen={Home} />
  </StackView>
);

Starting the app now, will show your Home, and a back button to bring you back to another instance of Home.

Calls

Calls are navigator type specific, so you should access them that way as well. It doesn't make sense to call 'push' on a tabbar, so these calls are split up.
You can access the navigation via the props:

this.props.stack

Because you can nest navigation types, you can also access the navigator by its id (in the example above 'home_stack'):

this.props.home_stack

Push

You can push a view, or any other type of navigation like this:

this.props.stack.push(<SingleView id="home" screen={Home} />);

Reset

If you want a push to reset the current stack, you can:

const reset = true;
this.props.stack.push(<SingleView id="home" screen={Home} />, reset);

Pop

To pop a view programmatically use:

this.props.stack.pop();

Pop to

You can also pop to a certain page in the stack. Every screen has a screenID, which is like a breadcrumb trail of navigator ids. The current id can be found in the navigator:

this.props.single.screenID // /home_stack/home/home2/home3/home4
this.props.stack.screenID // /home_stack

If you want to pop to /home_stack/home/home2, you can:

this.props.stack.popTo("/home_stack/home/home2");

Pop to root

You can also pop to the root of the stack:

this.props.stack.popToRoot();