Skip to content

7. Split

Erik Poort edited this page May 3, 2018 · 2 revisions

What?

This is an odd one, but you can use it if you want. You can basically show two pages in one view.

Structure

navigation.start(
  <SplitView id="horizontal_split" axis="SplitView.AXIS.HORIZONTAL">
    <SingleView id="home" screen={Home} />
    <SingleView id="home" screen={Home} />
  </SplitView>
);

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

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

this.props.horizontal_split

Replace

To replace any of the nodes in the split view:

this.props.split.replace("node1", <SingleView id="home" screen={Home} />);

You can replace node1 or node2 with any navigation type.

Clone this wiki locally