Motivation

The problem

The opinionated solution

Goals

Discoverable and scalable

Offline-First and Fast

Data Fetching and Error Handling

Example

❌ Before Expo Router

app/home.js
import { Text } from 'react-native';

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

App.js
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as Linking from 'expo-linking';
import HomeScreen from './app/home';

const Stack = createNativeStackNavigator();
const prefix = Linking.createURL('/');

const linking = {
  prefixes: [prefix],
  config: {
    // Deep link configuration
    home: {
      // Must be updated to match the screens in the project
      path: '/home',
      screens: {},
    },
  },
};

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

index.js
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

✅ After Expo Router

app/home.js
import { Text } from 'react-native';

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

Request for Comments

• API Design: Specifically the routing convention and layouts API. We want to make sure the API is intuitive and easy to use.
• Tooling and workflow: We want to make sure the tooling is fast and easy to use. We also want to make sure the workflow is intuitive and easy to understand, this is especially true for navigating URLs on a native device where there is no URL bar.
• Performance: We want to make sure the app is fast and reliable. We also want to make sure the app is small and lightweight. We're currently focused on “make it work”, with “make it fast” features like bundle splitting, and suspense boundaries coming in a future version. The file system-based router enables our tooling to implement many performance optimizations behind the scenes without needing to refactor in the future.

Special thanks

• Moti Zilberman • Metro bundler at Meta.
• Brent Vatne & Satyajit Sahoo • Expo / React Navigation.
• Charlie Cheever • Expo / PHP fan.

Notice

Thanks for reading 👏

• Join the Discord server to discuss more.
• Help me out by starring ⭐️ Expo on GitHub.