Navigation

The app is fundamentally seperated into two sections; authorized and unauthorized domains. If authentication fails, the entire authenticated component tree is detached.

const App = () => {
  const { isAuthenticated } = useAuth();

  return isAuthenticated ? <AuthenticatedApp> : <UnauthenticatedApp />
};

Navigator structure#

The main screens of the app is rendered by a bottom tabs navigator called Main. Each screen rendered by Main contains its own stack navigator. Dialogue and settings are rendered by the AuthenticatedApp stack navigator, making them accessible by all other stack navigators. The NoBottomTabs stack is used to render fullscreen modal, e.g. apoointment details. The reason why this is placed on the root level is because react navigation does not allow rendering of nested navigators as fullscreen components.

NavigationContainer
├── AuthenticatedApp (stack)
│   │
│   ├── Main (bottom tabs)
│   │   ├── Home (initial screen)
│   │   ├── MyHealth
│   │   └── Calendar
│   │       ├── Date
│   │       └── Overview
│   │
│   ├── Settings (stack)
│   │   ├── SettingsScreen (initial screen)
│   │   ├── EditProfileScreen
│   │   ├── EditContactInfoScreen
│   │   ├── PreferencesScreen
│   │   ├── PrivacyScreen
│   │   ├── AppAccessScreen
│   │   ├── AboutScreen
│   │   └── EditProfileScreen
│   │
│   ├── NoBottomTabs
│   │   ├── CustomEventEdit
│   │   ├── CustomEventCreate
│   │   ├── AppointmentDetails
│   │   ├── AppointmentReschedule
│   │   └── CustomEventDetails
│   │
│   └── Dialogue
│       ├── DialogueOverview (initial screen)
│       ├── DialogueThreads
│       ├── DialogueChat
│       └── DialogueParticipants
│
└── UnauthenticatedApp (stack)
    ├── BankID (initial screen)
    ├── PinCode
    ├── Biometrics
    └── E2ELogin