Skip to content

Navigation

Janukan Sivajeyan edited this page Aug 10, 2023 · 1 revision

Introduction

Within the ICard Web App, users can navigate between different screens (pages). The navigation is implemented using React Navigation. There are two ways to navigate within the App

  1. Tabs
  2. Stacks

Screens

Screens are the individual pages,two arguments are required for their creation

  1. Identifier
  2. React Component

The identifier is used the reference the screen and the React Component is the rendered page. Screens are created from a Stack, but can be used with either a Tab or Stack Navigator.

Navigation Methods

Tab

The tab navigator operates similar to a web browser, users navigate between pages by clicking/tapping a tab. Within the web app, a tab navigator is defined within App.js

Stack

The stack navigator operates by representing the pages visited using a stack data structure. This allows for navigation to go backwards and forwards with respect to the stack. Navigation with the stack can be user driven by clicking buttons or triggered by an event (i.e. returned api request). There are multiple stack navigators present within the web app such as in App.js and RegistrationView.jsx

Implementation Details

The tab and stack navigators accept options arguments for setting certain parameters such as component visibility and component icons. Within the web app these screen options are defined within ScreenOption.js

Clone this wiki locally