Navigation plugin

Supported plugin types

  • nav_bar
  • menu

Overview

The navigation plugins are rendered in packages/zapp-react-native-app/App/Layout/Layout.js. In the default layout there is a visible navigation bar, and a hidden side menu which is triggered via the MenuToggleContext.

Props passed to both navigation plugins

proptypedescription
activeRiverobjectCurrently active screen
toggleMenuobjectGetter for the menu toggle. Use this to compare the previous and next value of the context
setToggleMenufunctionSetter for the menu toggle. Use this to notify either of the components that the menu was toggled
navigatorobjectNavigator object from packages/zapp-react-native-ui-components/Decorators/Navigator/index.js
selectedbooleanIs the active screen selected? Helper for marking the selected navigation in the menu
titlestringActive screen title
homebooleanHelper: Is the active screen the home screen?
stylesobjectActive screen's style
assetsobjectActive screen's assets
rulesobjectActive screen's rules
nav_itemsarrayNavigation items of the matching plugin, extracted from rivers.json

How can I create and use a nav_bar plugin?

  • Reference: packages/zapp-react-native-ui-components/Components/NavBar/index.js
  • Create a proper react-native plugin of nav_bar type
  • The plugin should have some menu button the user can interact with, e.g. <TouchableHighlight/>
  • The plugin should trigger this.props.setToggleMenu({}) when appropriate

How can I create and use a menu plugin?

  • Reference: packages/zapp-react-native-ui-components/Components/SideMenu/index.js
  • Create a proper react-native plugin of menu type
  • The plugin should check if the value of this.props.toggleMenu has changed in the componentDidUpdate lifecycle stage, like this:
componentDidUpdate(prevProps: Props) {
if (prevProps.toggleMenu !== this.props.toggleMenu) {
// Do something about it, like starting an animation
}
}
  • Each change in this prop value should be reflected with the appropriate action - show/hide menu
  • It is NOT advised to call this.props.setToggleMenu({}) from the side menu, since it could cause circular/endless calls.