Navigation

This app uses react-navigation to navigate between screens. The navigation folder holds all files associated with navigating:

The NavigationContainer is located in App.jsx and wraps the app's navigation. The navigationRef is also initiated here, creating a ref to the navigators, so that navigation may be handled anywhere in the app. Including Redux action creators.

AuthNavigator handles login. It handles auto-login if there is a valid token stored on the device. It then conditionally renders either the login screen or the drawer navigator if there is a logged in user. Learn more about authentication flows in React Navigation.

DrawerNavigator contains the three main stack navigators in the app: Dashboard, Orders, and Routing. It also contains the Logout button for the user to log out. The drawer conditionally contains a DSPRScreen if the user is a driver for more than one DSPR. The drawer may be opened or closed by swiping from the left or by pressing the hamburger menu in the header.

DashboardNavigator is a stack navigator containing the DashboardScreen.

OrderListNavigator is a stack navigator containing the OrderListScreen, from which the user may navigate to the OrderDetails screen, and from there to the ManageNotesScreen.

RoutingNavigator is a stack navigator containing the RoutingScreen, from which the user may navigate to the OrderDetails screen, and from there to the ManageNotesScreen.

Each screen in the screens folder acts as a parent component or container. Each screen connects to the Redux store, handles logic, and passes props to its child components in the components folder.