Modal navigation properly overlays root navigation
Why it matters
Mixing modal screens into the regular stack corrupts back-button semantics: dismissing what feels like a modal pops the user out of the flow they were mid-task in, or the modal sticks around as a permanent screen in history. Users expect modals to float above the app and close independently; anything else reads as a bug and spikes task-abandonment rates on forms and confirmations. iOS Human Interface Guidelines explicitly treat this as a presentation contract.
Severity rationale
Medium because modals still display but back-button semantics and presentation animation feel broken to users.
Remediation
Layer modals in a dedicated Group above root navigation with presentation: 'modal' so they overlay cleanly. In src/navigation/RootNavigator.tsx:
<RootStack.Navigator>
<RootStack.Group>
<RootStack.Screen name="Root" component={TabsNavigator} />
</RootStack.Group>
<RootStack.Group screenOptions={{ presentation: 'modal' }}>
<RootStack.Screen name="EditProfile" component={EditProfileModal} />
</RootStack.Group>
</RootStack.Navigator>
Closing the modal now pops only the modal layer and returns to the prior tab state.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile Navigation & Deep Linking Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-navigation-linking·automated