Quick Brick Navigator

You can access the Quick Brick app navigator object by using either the react hook, or the decorator if you are using a class component

import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
import { withNavigator } from "@applicaster/zapp-react-native-ui-components/Decorators/Navigator";
export function MyComponent(props) {
const navigator = useNavigation();
return; /* ... */
}
class _MyClassComponent extends React.Component<Props, State> {
render() {
const { navigator } = this.props;
return; /* ... */
}
}
export const MyClassComponent = withNavigator(_MyClassComponent);

Navigation methods

Navigation methods are invoked with either a feed entry or a screen in the layout.json provided by zapp. The Quick Brick navigation engines knows how to resolve the target screen to present depending on the entry or screen provided

navigator.push

(ZappEntry | ZappScreen) => void pushes a new screen in the navigation stack.

navigator.replace

(ZappEntry | ZappScreen) => void resets the navigation stack with the provided entry or screen

navigator.canGoBack

() => boolean indicates wether navigation can go back from the current place in the stack

navigator.goBack

(fallBackToHome = true) => void Goes back one level in the stack. If the stack is 1 level deep, but the current screen is not the home, it will go back to the home screen

navigator.goHome

() => void Goes back to the home screen and resets the navigation stack

Presenting a modal screen

Modal screens are presented on top of the app, without unmounting the current screen being presented. It allows to overlay content on top of an existing screen.

This is a very early api, and can lead to unexpected behaviour in some scenarios. Once a modal is presented, it is recommended to dismiss it before triggering any other navigation action of any kind.

navigator.openModal

({ item, options, props }) => void Opens a modal with the following options

  • item: Zapp Screen to present within the modal. Can be a general content screen or any screen plugin
  • options: options for the modal. These options can be used to override the options when opening React Native's Modal component
  • options.animated: (boolean: true): wether the presentation of the modal should animate or not
  • options.animationType: (string: "slide"): animation type to use for opening the modal. uses the same values as the React Native Modal component
  • options.onDismiss: (() => void): callback invoked after the modal is dismissed
  • options.onRequestClose: (() => void): callback invoked when the user requests to close the modal
  • options.onShow: (() => void): callback invoked when the modal is displayed
  • options.presentationStyle: (string = "overFullScreen"): sets the presentation style, uses the same values as the React Native Modal component
  • options.transparent: (boolean = true): wether the modal should have a transparent background
  • options.ModalContainer: by default, the modal will be presented using React Native's Modal component. But you can override this by providing another component to present the modal into. Sometimes on iOS, if your screen plugin uses a native UI component which also tries to present a modal, the OS will fail to do so. In this case, you can pass React Native's View component as ModalContainer, and you will be able to present & orchestrate your modal presentation from the native side
  • props: specific props to pass to the modal screen

navigator.dismissModal

() => void dismisses the modal

navigator.modalState

returns all the properties of the modal state:

  • screen: screen presented in the modal
  • options: options used for opening the modal
  • props: props passed to the modal screen

Other navigation properties

navigator.activeRiver

returns the data of the general content screen used to provide the navigation data.

navigator.currentRoute

returns the current path of the presented screen

navigator.screenData

returns all the data of the currently presented screen

navigator.setScreenTitle & navigator.screenTitle

allows to define the title of the screen, which is can be displayed in the navbar

navigator.setScreenSummary & navigator.screenSummary

allows to define the subtitle of the screen which can be displayed in the TV menu

navigator.isNavBarVisible

Boolean flag indicating wether or not the navbar is visible