react-native-navigation/docs/docs/screen-api.md

Screen API

This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the Navigation module and expect to receive the current presented component id from screen props.componentId. Component must initialize in stack in order to push another component.

push(componentId, layout)

Push a new screen into this screen’s navigation stack.

Navigation.push(this.props.componentId, {
  component: {
    name: 'example.PushedScreen',
    passProps: {
      text: 'Pushed screen'
    },
    options: {
      topBar: {
        title: {
          text: 'Pushed screen title'
        }
      }
    }
  }
});

pop(componentId)

Pop the top screen from this screen’s navigation stack.

Navigation.pop(this.props.componentId);

popToRoot(componentId)

Pop all the screens until the root from this screen’s navigation stack.

Navigation.popToRoot(this.props.componentId);

popTo(componentId)

Pop the stack to a given component.

Navigation.popTo(componentId);

setStackRoot(componentId, params)

Reset the current navigation stack to a new screen component (the stack root is changed).

Navigation.setStackRoot(this.props.componentId, {
  component: {
        name: 'example.NewRootScreen',
        passProps: {
          text: 'Root screen'
        },
        options: {
          animated: true // Will animate root change same as push
        }
      }
});

showModal(layout = {})

Show a screen as a modal.

Navigation.showModal({
  stack: {
    children: [{
      component: {
        name: 'example.ModalScreen',
        passProps: {
          text: 'stack with one child'
        },
        options: {
          topBar: {
            title: {
              text: 'Modal'
            }
          }
        }
      }
    }]
  }
});

dismissModal(componentId)

Dismiss the current modal.

Navigation.dismissModal(this.props.componentId);

dismissAllModals()

Dismiss all the current modals at the same time.

Navigation.dismissAllModals();

mergeOptions(componentId, options = {})

Set options dynamically for component.

Navigation.mergeOptions(this.props.componentId, {
  topBar: {
    visible: true,
    title: {
      text: 'Title'
    }
  },
  bottomTabs: {

  },
  bottomTab: {

  },
  sideMenu: {

  },
  overlay: {

  }
});