Ready to move beyond a single screen in your React Native app? Expo Router makes adding new pages incredibly simple by leveraging the file system itself. In this guide, we'll walk through creating new pages and linking them together to build a multi-screen application.
Creating Your First New Page
The magic of Expo Router is that every file you add to your app folder automatically becomes a new route. Want an About page? Just create a new file called about.jsx.
Inside this file, create a standard React Native component. Expo Router will automatically generate a route that matches your filename—in this case, your About page will be available at /about.
The index page (your homepage) is special—it uses the route path / instead of /index.
Linking Between Pages
To navigate between pages, Expo Router provides a Link component—similar to an anchor tag in HTML. Import it from the Expo router package:
import { Link } from 'expo-router';
Then use it in your component with an href prop pointing to your route:
<Link href="/about"> About Page </Link>
The Link component handles navigation with a smooth slide animation, giving your app a native feel.
Styling Your Links
Make your links look more clickable with some basic styling. Apply a style prop to your Link components:
<Link href="/about" style={styles.link}> About Page </Link>
With corresponding style definition:
link: {
marginVertical: 10,
borderBottomWidth: 1,
borderBottomColor: '#fff'
}
Scaling Your Navigation
While manually adding links works for simple apps, you'll want a more elegant navigation solution as your app grows. Expo Router offers several approaches to manage navigation more effectively, including automatic back buttons and navigation bars—topics we'll explore in future lessons.
Now you have the foundation for creating multi-page applications with Expo Router. Try adding different pages and experiment with navigation to see how easily you can build complex app structures!
Comments
Post a Comment