Expo Router (Navigation)

Launch-Native uses Expo Router, bringing file-based routing to React Native. If you have ever used Next.js App Router, you will feel right at home!

1. File Structure

Your app's navigation is entirely determined by the files inside the app/ directory.

app/index.tsx matches the / route (your initial Home screen).
app/settings.tsx matches the /settings route.
app/(auth)/login.tsx matches /login (the (auth) folder is a "group" and is ignored in the URL path).
app/user/[id].tsx is a dynamic route that matches /user/1, /user/2, etc.

2. Navigating Between Screens

To move between screens, you can use the declarative <Link> component or the imperative useRouter hook.

Using the Link Component

Best used for simple text links or buttons where you don't need to execute logic before navigating.

import { Link } from "expo-router";
import { View } from "react-native";

export function NavigationMenu() {
  return (
    <View>
      <Link href="/settings" className="text-blue-500 font-medium mt-4">
        Go to Settings
      </Link>
    </View>
  );
}

Using useRouter (for functions)

Best used when you need to run a function (like a login or an API call) before redirecting the user.

import { useRouter } from "expo-router";
import { TouchableOpacity, Text } from "react-native";

export function LoginButton() {
  const router = useRouter();

  const handleLogin = async () => {
    // 1. Perform login logic here...
    await myLoginFunction();

    // 2. Navigate to the dashboard
    router.replace("/dashboard"); // Uses replace() instead of push() to prevent going back to login
  };

  return (
    <TouchableOpacity onPress={handleLogin} className="bg-black p-4 rounded-md">
      <Text className="text-white text-center">Log In</Text>
    </TouchableOpacity>
  );
}

Expo Router (Navigation)

1. File Structure

2. Navigating Between Screens

Using the Link Component

Using useRouter (for functions)

On this page