Stack

push()

Push a screen into the stack and update the display according to the screen options.

Parameters

Name	Required	Type	Description
componentId	Yes	string	The componentId of a screen pushed into the stack, or the id of the stack.
layout	No	Layout	The layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well.

Example

Component

The most common use case - push a single React component.

Navigation.push(this.props.componentId, {

component: {

name: 'example.PushedScreen'

}

});

Update options on push

Options are applied when the screen becomes visible.

Navigation.push(this.props.componentId, {

component: {

name: 'example.PushedScreen',

options: {

topBar: {

title: {

text: 'Pushed screen title'

}

}

}

}

});

Push other layouts

Any layout type can be pushed. In this example we push a SideMenu layout.

Navigation.push(this.props.componentId, {

sideMenu: {

left: {

component: {

name: 'drawerScreen'

}

},

center: {

component: {

name: 'centerScreen'

}

}

}

});

pop()

Pop the top screen from the stack.

Parameters

Name	Required	Type	Description
componentId	Yes	string	The componentId of a screen pushed into the stack, or the stack id.
mergeOptions	No	Options	Options to be merged before popping the screen (optional).

Navigation.pop(this.props.componentId);

popToRoot()

Pop all screens pushed into the stack.

Parameters

Name	Required	Type	Description
componentId	Yes	string	The componentId of a screen pushed into the stack, or the stack id.
mergeOptions	No	Options	Options to be merged before popping the screen (optional).

Navigation.popToRoot(this.props.componentId);

popTo()

Pop the stack to a given component.

Parameters

Name	Required	Type	Description
componentId	Yes	string	The destination componentId
mergeOptions	No	Options	Options to be merged before popping the screen (optional).

Navigation.popTo(componentId);

setStackRoot()

Reset the stack to the given layout (accepts multiple children).

Parameters

Name	Required	Type	Description
componentId	Yes	string	The componentId of a screen pushed into the stack, or the stack id.
layout	Yes	Layout or Layout[]	A single Component or array of components.

Example

Single child

Navigation.setStackRoot(this.props.componentId, {

component: {

name: 'example.NewRootScreen'

}

});

Multiple children

In the example below we reset the stack with two components. The first one will be the root component and the second (PushedScreen) will be displayed. Pressing the back button (either hardware or software) will pop it, revealing the root component - NewRootScreen.

Navigation.setStackRoot(this.props.componentId, [

{

component: {

name: 'NewRootScreen',

}

},

{

component: {

name: 'PushedScreen',

}

}

]);