Routing

File-Based Routing

Files in the app directory automatically become routes in your application. This project uses Expo Router, which brings the best routing concepts from the web to native apps.

For complete documentation, check out the Expo Router docs.

Dynamic Routes

Create dynamic routes by wrapping the filename in square brackets. The segment name becomes a parameter accessible in the page component.

1// app/user/[id].tsx
2import { useLocalSearchParams } from 'expo-router';
3import { View, Text } from 'react-native';
4
5export default function User() {
6  const { id } = useLocalSearchParams();
7
8  return (
9    <View>
10      <Text>User ID: {id}</Text>
11    </View>
12  );
13}

Layouts & Groups

Layouts (_layout.tsx) allow you to share UI (like headers or tab bars) across multiple routes.Groups (folders with parentheses, e.g., (tabs)) allow you to organize routes without affecting the URL path.

1// app/_layout.tsx
2import { Stack } from 'expo-router';
3
4export default function RootLayout() {
5  return (
6    <Stack>
7      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
8      <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
9    </Stack>
10  );
11}

Navigation

Use the Link component or router object to navigate between screens.

1import { Link, router } from 'expo-router';
2
3export function Home() {
4  return (
5    <View>
6      <Link href="/profile" asChild>
7        <Button>Go to Profile</Button>
8      </Link>
9      
10      <Button onPress={() => router.push('/settings')}>
11        Settings
12      </Button>
13    </View>
14  );
15}

Deep Linking

Deep linking allows users to open your app from a URL. This project is pre-configured to handle deep links using Expo Router.

Configuration

The URL scheme is defined in your environment configuration. By default, it is set to reactnativestarter.

To change it, update the APP_SCHEME variable in your .env file:

1APP_SCHEME=my-cool-app

This is loaded in app.config.ts and passed to the Expo config.

Testing Deep Links

You can test deep links using the CLI or simulator commands.

1# Install the CLI if you haven't
2npm install -g uri-scheme
3
4# Test on iOS Simulator
5npx uri-scheme open "reactnativestarter://profile" --ios
6
7# Test on Android Emulator
8npx uri-scheme open "reactnativestarter://profile" --android

1# iOS (xcrun)
2xcrun simctl openurl booted "reactnativestarter://profile"
3
4# Android (adb)
5adb shell am start -W -a android.intent.action.VIEW -d "reactnativestarter://profile" com.development.reactnativestarter

Universal Links & App Links

For standard web URLs (like https://myapp.com/profile) to open your app, you need to configure Universal Links (iOS) and App Links (Android).

• iOS: Requires an Associated Domains entitlement and an apple-app-site-association file on your website.
• Android: Requires assetlinks.json verification.

Refer to the Expo Deep Linking Guide for full setup instructions.