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 defaultfrom 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