Version: 7.11.2

Interact programmatically with the Stack

The Navigation object provides ways to programmatically manipulate the stack.

Interact with the Stack by componentId#

Each layout pushed into the stack has an id. When in the context of a component, The component's componentId can be used to interact with a parent stack. When using a component's componentId, the native implementation knows to perform the command on the parent Stack of this component.

In this example, we push a screen onto the component's parent stack.

const React = require('react');
const Navigation = require('react-native-navigation');

class MyComponent extends React.Component {
  onButtonClick = () => {
    Navigation.push(this.props.componentId, {
      component: {
        name: 'PUSHED_SCREEN'
      }
    });
  }
}

Interact with the Stack by a predefined id#

Sometimes we're required to interact with a specific stack not from the context of a component pushed into it. To do so, assign the stack a predefined id and use it when invoking any stack command.

Navigation.setRoot({
  root: {
    stack: {
      id: 'MyStack', // This is the id we're going to use when interacting with the stack
      children: [
        {
          component: {
            name: 'SomeComponent'
          }
        }
      ]
    }
  }
});

function push() {
  Navigation.push('MyStack', {
    component: {
      name: 'PushedScreen'
    }
  });
}