Expo Router Layout Boundaries: Why Screens Remount and How to Handle It

The State Disappears When You Switch Tabs

You build a form on one tab, switch to another tab to check something, then switch back. The form is blank. In Expo Router, this is often not a bug in your component logic. It is a consequence of how file-based routing maps files to navigation containers.

Expo Router generates navigators from your app/ directory. When a screen moves between layout boundaries, or when a layout wrapper re-renders, React may unmount and remount the screen component. Local state such as unsaved form inputs, scroll position, or temporary UI flags disappears unless you lift it or persist it.

How Layout Files Define Navigation Boundaries

A _layout.tsx file defines a shared wrapper for every route in its directory. Routes inside app/(tabs)/ share a tab navigator; routes outside it do not. The directory name in parentheses is a route group: it organizes files without adding a URL segment.

Because each layout can correspond to a distinct navigation container, moving app/settings.tsx into app/(tabs)/settings.tsx changes which navigator owns that screen. Navigating away and back can remount the component tree inside that container.

Worked Example: A Settings Form Inside a Tab Group

Check that your installed expo-router version matches your Expo SDK release before adding layout-dependent navigation.

# Directory layout
app/
  _layout.tsx
  (tabs)/
    _layout.tsx
    index.tsx
    settings.tsx

# app/(tabs)/settings.tsx
import { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

export default function SettingsScreen() {
  const [name, setName] = useState('');

  return (
    
      
    
  );
}

Run npx expo start from the project root. Open the app in Expo Go or a development client. Type a name, switch to the index tab, then return to settings. If the input clears, the screen remounted when the tab navigator recreated it.

To persist input across tab switches, lift state into a shared context or a layout-level provider, or use AsyncStorage to save and restore values on mount.

Trade-Off: Shared Layouts vs. Predictable Mounting

Layout groups give you:

• Shared tab bars, headers, or authentication wrappers without duplicating UI
• Automatic deep links that respect the file structure
• Type-safe route parameters when you generate TypeScript types

But they also mean:

• Screens can remount when navigation containers change
• Local state does not survive navigation by default
• Moving a file between groups alters its navigation contract and may break existing deep links

For highly customized nested navigators or shared element transitions, you may need to drop down to React Navigation APIs directly instead of relying solely on file-based conventions.

Actionable Check: Confirm Remount Behavior

1. Open app/(tabs)/_layout.tsx and confirm which screens it wraps.
2. Add a console.log or use React DevTools to observe whether a screen component re-initializes when you navigate away and back.
3. Check the installed expo-router version against your Expo SDK release; mismatched versions can change navigation mounting behavior.

Treat your app/ directory as a navigation schema. Before moving files, identify every Link and deep link that references the old path, and decide whether state needs to survive the move.