Navigation & Routing

VibeFast uses Expo Router for all navigation. If you're familiar with web development frameworks like Next.js, the concepts will feel very familiar. The file system itself defines the routes of your application.

Overview of the app Directory

All your app's routes are defined by the files and folders inside the src/app/ directory.

• _layout.tsx: Defines a shared layout for a group of screens. The root layout in app/_layout.tsx is where all your global providers (like Convex and Theme providers) are set up.
• () Folders (e.g., (tabs)): These are called "groups" and are used to organize routes without affecting the URL path. This is perfect for defining different navigation sections, like your main tab bar.
• [...missing].tsx: This is a catch-all route that handles any path that doesn't match another file, effectively serving as your "Not Found" page.

How-To: Create a New Screen

Creating a new page is as simple as creating a new file.

import { Text, View } from '@/components/ui';
import { Stack } from 'expo-router';

export default function NotificationsScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Notifications' }} />
      <View className="flex-1 items-center justify-center">
        <Text>Notification Settings</Text>
      </View>
    </>
  );
}

How-To: Link Between Screens

To navigate between screens, use the <Link> component from expo-router.

import { Link } from 'expo-router';
import { Button } from '@/components/ui';

// To navigate to our new screen:
<Link href="/settings/notifications" asChild>
  <Button label="Go to Notification Settings" />
</Link>

The asChild prop is important—it allows you to use your own custom components (like VibeFast's <Button>) as the pressable navigation element.

Dynamic Routes

Expo Router also supports dynamic routes for creating pages with parameters (e.g., a user profile page).

• A file named app/(routes)/profile/[id].tsx will match any path like /profile/123 or /profile/user-abc.
• Inside the component, you can get the id parameter using the useLocalSearchParams hook from Expo Router.