Interview Questions
React Navigation is a popular navigation library for React Native that provides a way to navigate between screens. It offers various navigation patterns (stack, tab, drawer), handles deep linking, supports animations, and provides a simple API for managing navigation state and screen transitions.
The main types are: 1) Stack Navigator for basic back/forward navigation, 2) Tab Navigator for switching between tabs, 3) Drawer Navigator for slide-in menus, 4) Bottom Tab Navigator for bottom tab bars, and 5) Material Top Tab Navigator for swipeable top tabs.
Navigation between screens is done using the navigation prop: navigation.navigate('ScreenName') for basic navigation, navigation.push('ScreenName') for stacking screens, navigation.goBack() for going back, and navigation.reset() for resetting the navigation state.
navigate() moves to a screen and avoids duplicating if it's already in the stack, while push() always adds a new instance of the screen to the stack, even if it already exists. push() is useful when you want multiple instances of the same screen.
Parameters can be passed between screens using: navigation.navigate('ScreenName', { paramName: value }) and accessed in the destination screen using route.params. Parameters can also be passed using nested navigation or through the initial params of a screen.
Deep linking allows apps to handle external URLs and open specific screens. It's implemented using linking configuration in React Navigation, enabling the app to respond to both universal links (http/https) and custom URL schemes, mapping them to specific screens and parameters.
The Android back button can be handled using the useFocusEffect or useBackHandler hooks from @react-navigation/native. You can customize the behavior by returning true to prevent default back navigation or false to allow it.
NavigationContainer is the root component that manages navigation state and integrates with the device's navigation features. It must wrap all navigator components and can be configured with themes, linking configuration, and state persistence options.
Headers can be customized using screenOptions or options props on navigators or individual screens. Options include title, headerStyle, headerTintColor, headerRight, headerLeft, and headerTitle. Custom components can be used for complete header customization.
Navigation lifecycle events include focus/blur (when screens gain/lose focus) and beforeRemove (before screen removal). These can be handled using hooks like useFocusEffect, useIsFocused, or navigation event listeners for custom behavior.
Nested navigation involves placing one navigator inside another (e.g., tab navigator inside stack navigator). Each navigator maintains its own navigation state, and proper screen nesting helps organize complex navigation flows and maintain navigation state hierarchy.
Navigation state can be persisted using persistNavigationState and loadNavigationState props on NavigationContainer. This enables saving/restoring navigation state across app restarts, requiring implementation of storage logic using AsyncStorage or similar.
Authentication flows typically use conditional navigation based on auth state, often implementing stack switching or nested navigation. Common patterns include auth stack, app stack, and loading screens, with proper state management for smooth transitions.
Navigation events (focus, blur, beforeRemove, state) can be listened to using addListener. They're useful for triggering side effects, analytics tracking, or cleanup operations when navigation state changes occur.
Custom animations can be implemented using cardStyleInterpolator for stack navigator or custom transition configurations. This involves defining animation timing, interpolation, and gesture handling for smooth screen transitions.
Navigation middlewares intercept and modify navigation actions before they're processed. They're useful for logging, analytics, validation, or implementing complex navigation patterns that require custom logic or side effects.
Deep linking with parameters requires proper linking configuration with parameter extraction from URLs, parameter validation, and state restoration. Implementation includes handling both universal links and custom schemes with proper parameter parsing.
Navigation performance optimization includes: 1) Screen preloading, 2) Lazy loading screens, 3) Minimizing re-renders during navigation, 4) Proper use of useMemo and useCallback for navigation callbacks, 5) Optimizing header/tab bar updates.
Navigation testing involves mocking navigation props, simulating navigation actions, testing deep linking handling, and verifying navigation state changes. Tools include @testing-library/react-native and jest-native for comprehensive testing.
Linking configuration defines URL pattern matching for deep links, including parameter extraction and screen mapping. It supports both universal links and custom URL schemes, enabling proper routing of external and internal navigation.
Complex navigation patterns involve combining multiple navigators, handling nested navigation state, implementing custom transitions, and managing navigation lifecycles. Examples include multi-level drawers, modal stacks, and split-view navigation.
State restoration involves persisting navigation state, handling deep links, managing authentication state, and implementing proper error recovery. Considerations include partial state restoration, state validation, and handling version changes.
Custom navigators require implementing core navigation logic, gesture handling, transition animations, and proper integration with React Navigation's infrastructure. Includes managing navigation state, screen lifecycle, and custom events.
Large-scale navigation involves modular navigation configuration, code splitting, proper type definitions, state management integration, and performance optimization. Includes handling deep linking, state persistence, and complex navigation patterns.
Offline navigation requires state persistence, queue management for navigation actions, proper error handling, and state synchronization upon reconnection. Includes handling deep links and maintaining navigation state consistency.
Multi-window navigation involves managing separate navigation states, synchronizing navigation between windows, handling window lifecycle events, and maintaining consistent navigation state across windows.
Navigation analytics involves tracking screen views, navigation patterns, user flows, and interaction metrics. Implementation includes middleware for analytics events, proper timing of tracking calls, and handling background/foreground transitions.
AR/VR navigation requires custom transition animations, gesture handling for 3D space, maintaining spatial awareness, and proper integration with native AR/VR frameworks. Includes handling navigation in immersive modes.
Accessible navigation includes proper focus management, screen reader support, gesture alternatives, and clear navigation announcements. Involves customizing navigation behavior for different accessibility needs and proper labeling.