What problem does it solve? Building consistent navigation in a React Native app with Expo Router requires coordinating stack layouts, tab bars, route guards, safe area insets, and gesture behavior, and mistakes in any of these cause broken back behavior or UI clipped by device notches. ## Core Features & Use Cases - App Shell Structure: Defines the root layout with auth and query providers, an auth group for login/register, and a four-tab layout (Overview, Practice, Exams, Profile) with a custom tab bar. - Focus Mode & Gesture Control: Configures fullscreen exam and session screens with hidden headers and disabled swipe-back gestures to prevent accidental exits. - Route Guards & Safe Areas: Enforces auth and profile redirects using useSegments and useEffect, and applies useSafeAreaInsets padding to scroll views and fixed bottom elements. - Use Case: When adding a new exam screen to the mobile app, follow these patterns to hide the header, disable the back gesture, and pad the bottom content above the home indicator. ## Quick Start Ask the assistant to add a new screen to the Expo Router app following the mobile navigation patterns for tabs, safe area, and gesture settings.
