Expo Playground

Default Exports

export default tells Expo "this is the main component in this file — put it on screen." Every screen in your app needs exactly one default export.

export default function HomeScreen() {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
}

How it works

Each file can have only one default export. When another file imports it, it can use any name:

// These all import the same component
import HomeScreen from "./HomeScreen";
import MyPage from "./HomeScreen";
import Whatever from "./HomeScreen";

Compare this with named exports, where the name must match exactly:

// Named export — name must match
export function helper() {}
import { helper } from "./utils";

Why this matters in Expo

Expo Router uses the file system for navigation. The default export of each file in the app/ directory becomes a screen:

  • app/index.tsx → default export renders at /
  • app/settings.tsx → default export renders at /settings

Try this: Remove export default from a screen component and watch what happens — Expo won't know what to render!

See this concept in action with interactive code highlighting

Try in Playground