Mobile App Navigation Patterns: User Experience Guide 2026

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { HomeScreen, SearchScreen, ProfileScreen } from './screens';

type TabParamList = {
  Home: undefined;
  Search: { query?: string };
  Profile: { userId: string };
};

const Tab = createBottomTabNavigator<TabParamList>();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: '#007AFF',
          tabBarInactiveTintColor: '#8E8E93',
          tabBarStyle: { paddingBottom: 8, height: 60 },
          headerShown: true,
        }}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{ tabBarLabel: 'Home', tabBarIcon: HomeIcon }}
        />
        <Tab.Screen
          name="Search"
          component={SearchScreen}
          options={{ tabBarLabel: 'Search', tabBarIcon: SearchIcon }}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{ tabBarLabel: 'Profile', tabBarIcon: ProfileIcon }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

import { createDrawerNavigator } from '@react-navigation/drawer';
import { DashboardScreen, SettingsScreen, HelpScreen } from './screens';

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerType: 'front',
        drawerPosition: 'left',
        swipeEnabled: true,
        swipeEdgeWidth: 40,
      }}
    >
      <Drawer.Screen name="Dashboard" component={DashboardScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
      <Drawer.Screen name="Help" component={HelpScreen} />
    </Drawer.Navigator>
  );
}

import { createNativeStackNavigator } from '@react-navigation/native-stack';

type StackParamList = {
  ProductList: undefined;
  ProductDetail: { productId: string };
  Checkout: { productId: string; quantity: number };
  OrderConfirmation: { orderId: string };
};

const Stack = createNativeStackNavigator<StackParamList>();

function ProductFlow() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: true,
        animation: 'slide_from_right',
      }}
    >
      <Stack.Screen name="ProductList" component={ProductListScreen} />
      <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
      <Stack.Screen name="Checkout" component={CheckoutScreen} />
      <Stack.Screen name="OrderConfirmation" component={OrderConfirmationScreen} />
    </Stack.Navigator>
  );
}

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const HomeStack = createNativeStackNavigator();
const SearchStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen} />
      <HomeStack.Screen name="Comments" component={CommentsScreen} />
    </HomeStack.Navigator>
  );
}

function SearchStackScreen() {
  return (
    <SearchStack.Navigator>
      <SearchStack.Screen name="SearchHome" component={SearchScreen} />
      <SearchStack.Screen name="Results" component={ResultsScreen} />
      <SearchStack.Screen name="ItemDetail" component={ItemDetailScreen} />
    </SearchStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Search" component={SearchStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator();

function RootNavigator() {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="Main" component={MainTabs} />
      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
        <RootStack.Screen name="CreatePost" component={CreatePostScreen} />
        <RootStack.Screen name="Filter" component={FilterScreen} />
        <RootStack.Screen name="Share" component={ShareScreen} />
      </RootStack.Group>
    </RootStack.Navigator>
  );
}

import SwiftUI

struct FilterSheet: View {
    @Environment(\.dismiss) private var dismiss
    @State private var selectedCategory: String = "All"

    var body: some View {
        NavigationStack {
            List {
                Section("Categories") {
                    ForEach(["All", "Work", "Personal", "Finance"], id: \.self) { category in
                        Button(action: { selectedCategory = category }) {
                            HStack {
                                Text(category)
                                if selectedCategory == category {
                                    Spacer()
                                    Image(systemName: "checkmark")
                                }
                            }
                        }
                    }
                }
            }
            .navigationTitle("Filter")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .confirmationAction) {
                    Button("Apply") { dismiss() }
                }
            }
        }
        .presentationDetents([.medium, .large])
        .presentationDragIndicator(.visible)
    }
}

const linking = {
  prefixes: ['https://myapp.com', 'myapp://'],
  config: {
    screens: {
      Home: {
        screens: {
          Feed: 'feed',
          PostDetail: 'post/:postId',
        },
      },
      Search: {
        screens: {
          SearchHome: 'search',
          Results: 'search/:query',
        },
      },
      Profile: 'user/:userId',
    },
  },
};

function App() {
  return (
    <NavigationContainer linking={linking}>
      {/* navigators */}
    </NavigationContainer>
  );
}

import { useLinking } from '@react-navigation/native';
import { useEffect } from 'react';
import { Linking } from 'react-native';

function useDeepLinkHandler() {
  useEffect(() => {
    // Handle link when app was opened via deep link
    Linking.getInitialURL().then((url) => {
      if (url) {
        handleIncomingLink(url);
      }
    });

    // Handle links while app is running
    const subscription = Linking.addEventListener('url', (event) => {
      handleIncomingLink(event.url);
    });

    return () => subscription?.remove();
  }, []);
}

function handleIncomingLink(url: string) {
  // Parse, validate, and navigate
  console.log('Deep link received:', url);
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List(products) { product in
                NavigationLink(value: product) {
                    ProductRow(product: product)
                }
            }
            .navigationTitle("Products")
            .navigationDestination(for: Product.self) { product in
                ProductDetailView(product: product)
            }
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button("Filter", systemImage: "line.3.horizontal.decrease") {
                        // Show filter
                    }
                }
            }
        }
    }
}

// build.gradle.kts
dependencies {
    implementation("androidx.navigation:navigation-compose:2.8.0")
}

import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "products"
    ) {
        composable("products") {
            ProductListScreen(
                onProductClick = { productId ->
                    navController.navigate("product/$productId")
                }
            )
        }
        composable(
            route = "product/{productId}",
            arguments = listOf(
                navArgument("productId") { type = NavType.StringType }
            )
        ) { backStackEntry ->
            val productId = backStackEntry.arguments?.getString("productId")
            ProductDetailScreen(productId = productId!!)
        }
        composable("checkout/{productId}?quantity={quantity}") {
            CheckoutScreen()
        }
    }
}

// Navigate to detail
navController.navigate("product/$productId")

// Navigate and clear back stack
navController.navigate("checkout/$productId") {
    popUpTo("products") { inclusive = false }
}

// Handle system back
BackHandler(enabled = true) {
    navController.popBackStack()
}

import { GestureHandlerRootView } from 'react-native-gesture-handler';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Drawer.Navigator
          screenOptions={{
            swipeMinDistance: 20,
            swipeEdgeWidth: 30,
            // Exclude center area from edge swipe
            gestureDirection: 'inverted',
          }}
        >
          {/* screens */}
        </Drawer.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View } from 'react-native';

function SafeAreaScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingLeft: insets.left,
      paddingRight: insets.right,
      flex: 1,
    }}>
      {/* Screen content */}
    </View>
  );
}

// SwiftUI - safe area handling
struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem { Label("Home", systemImage: "house") }
        }
        .ignoresSafeArea(.keyboard)
        .safeAreaInset(edge: .bottom) {
            // Custom bottom bar if needed
        }
    }
}

import { useNavigationState } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';

function NavigationPersistence() {
  const navigationRef = useRef(null);
  const [isReady, setIsReady] = useState(false);
  const [initialState, setInitialState] = useState();

  useEffect(() => {
    const restoreState = async () => {
      try {
        const savedState = await AsyncStorage.getItem('NAV_STATE');
        if (savedState) {
          setInitialState(JSON.parse(savedState));
        }
      } finally {
        setIsReady(true);
      }
    };
    restoreState();
  }, []);

  const saveState = (state: NavigationState) => {
    AsyncStorage.setItem('NAV_STATE', JSON.stringify(state));
  };

  if (!isReady) return null;

  return (
    <NavigationContainer
      ref={navigationRef}
      initialState={initialState}
      onStateChange={saveState}
    >
      {/* navigators */}
    </NavigationContainer>
  );
}

import 'package:flutter/material.dart';

class TabAwareScaffold extends StatefulWidget {
  @override
  State<TabAwareScaffold> createState() => _TabAwareScaffoldState();
}

class _TabAwareScaffoldState extends State<TabAwareScaffold>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<Widget> _screens = [
    const FeedScreen(),
    const SearchScreen(),
    const ProfileScreen(),
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(() {
      if (!_tabController.indexIsChanging) {
        // Tab changed - could persist scroll position
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        controller: _tabController,
        children: _screens,
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _tabController.index,
        onDestinationSelected: (index) {
          _tabController.animateTo(index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

import { render, fireEvent } from '@testing-library/react-native';

describe('Navigation', () => {
  it('navigates from product list to detail', () => {
    const { getByText, getByTestId } = render(<App />);

    fireEvent.press(getByText('Product 1'));

    expect(getByTestId('product-detail')).toBeTruthy();
    expect(getByText('Product Detail')).toBeTruthy();
  });

  it('preserves tab state on switch', () => {
    const { getByText } = render(<App />);

    fireEvent.press(getByText('Search'));
    fireEvent.press(getByText('Home'));

    // Home tab should retain state
    expect(getByText('Feed')).toBeTruthy();
  });

  it('handles deep link correctly', () => {
    const linking = {
      getInitialURL: () => Promise.resolve('myapp://post/123'),
    };

    const { getByText } = render(
      <NavigationContainer linking={linking}>
        <App />
      </NavigationContainer>
    );

    // Should navigate to post detail
    expect(getByText('Post 123')).toBeTruthy();
  });
});

import { useNavigation } from '@react-navigation/native';
import analytics from '@segment/analytics-react-native';

function NavigationTracker() {
  const navigation = useNavigation();

  useEffect(() => {
    const unsubscribe = navigation.addListener('state', (e) => {
      const currentRoute = navigation.getCurrentRoute();
      analytics.track('Screen Viewed', {
        screen_name: currentRoute?.name,
        screen_params: currentRoute?.params,
        timestamp: Date.now(),
      });
    });

    return unsubscribe;
  }, [navigation]);
}

function AccessibleTabBar() {
  return (
    <View style={styles.tabBar} accessibilityRole="tabbar">
      <TouchableOpacity
        accessibilityRole="tab"
        accessibilityLabel="Home - Double tap to go to home"
        accessibilityState={{ selected: isActive('Home') }}
        onPress={() => navigate('Home')}
        style={styles.tab}
      >
        <HomeIcon />
        <Text>Home</Text>
      </TouchableOpacity>
    </View>
  );
}

import { useFocusEffect } from '@react-navigation/native';

function FeedScreen() {
  useFocusEffect(
    useCallback(() => {
      // Prefetch data for likely next screen
      prefetchTopStories();
    }, [])
  );
}

async function prefetchTopStories() {
  const stories = await api.getTopStories({ limit: 5 });
  Image.prefetch(stories.map(s => s.thumbnailUrl));
}

import { lazy, Suspense } from 'react';

const ProfileScreen = lazy(() => import('./screens/ProfileScreen'));
const SettingsScreen = lazy(() => import('./screens/SettingsScreen'));

function LazyNavigator() {
  return (
    <Suspense fallback={<ActivityIndicator />}>
      <Tab.Navigator>
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </Suspense>
  );
}

import { useNavigationState } from '@react-navigation/native';

function NavigationMemoryMonitor() {
  const state = useNavigationState(state => state);

  useEffect(() => {
    const stackDepth = state.routes.length;
    if (stackDepth > 10) {
      console.warn('Navigation stack too deep:', stackDepth);
    }
  }, [state]);

  return null;
}