Expo Navigation

File-based routing framework.

Navigation between screens.

App directory

• directory containing only the routes and their layouts.
• files in this directory becomes a screen in native app and web page.

Root layout

• app/_layout.tsx file defines shared UI elements such as headers and tab bars.
• this remains consistent between different routes.

index files

• match their parent directory and do not add path segment

Route file

• exports a React component as its default value

Stack

Foundation to navigate between different screens in an app.

Stack is defined in the _layout.tsx:

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="about" options={{ title: 'About' }} />
    </Stack>
  );
}

On Android, a stacked route animates on top of the current screen On iOS, a stacked route animates from the right

Link

You can navigate from page to page using Link component:

import { Text, View, StyleSheet } from 'react-native';
 import { Link } from 'expo-router'; 

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
      <Link href="/about" style={styles.button}>
        Go to About screen
      </Link>
    </View>
  );
}

(tabs) Sub directory

Special directory to group routes together and display them in a bottom tab bar.

(tabs)/_layout.tsx is separate from the root layout.