Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Routing & Navigation

Routing and navigation refer to organizing an app into distinct screens, mapping screens to URLs, moving between those screens, and displaying the appropriate platform-specific navigation-related user interface elements (eg: tabs, navigation bar, screen transition animations and gestures, drawers). Navigation has very nuanced behavior on each platform and is extremely complicated to build entirely on your own, so you should always use a library to ensure that your app looks and behaves as users expect.
React Navigation is the most popular navigation library in the React Native ecosystem and the best choice for most apps. It is maintained by the Expo team and supports Android, iOS, and the web.
Info-icon
This video demonstrates using React Navigation on iOS, Android, and web. Notice that it adapts to the platform conventions in each case. The code that powers this example app is available on GitHub in react-navigation/example.

Usage

  1. Install React Navigation in your project, refer to the Getting started guide.
  2. Read the "Fundamentals" section of the React Navigation docs, starting with Hello React Navigation.
Example
import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

Next

Linking

Create links and handle incoming URL requests for your app.

Arrow-right-icon
Deep linking

Connect an app to a website to enable universal links and deep links.

Arrow-right-icon
React Navigation linking

Forward URLs to React Navigation screens.

Arrow-up-right-icon

FAQ

Triangle-down-icon
Can I use Next.js routing for web?
Yes, you can use Next.js routing for the web. You can read more about this in Using Next.js with Expo for Web.
Triangle-down-icon
Can I use React Native Navigation by Wix?
This library is not available in the Expo Go app and is not yet compatible with expo-dev-client.
We recommend createNativeStackNavigator from React Navigation to use Android and iOS native navigation APIs.
  • Message-iconAsk a question on the forums
  • Edit-iconEdit this page

Was this doc helpful?