Routing

How to route

Use the built in hook from expo-router to handle navigation

import { useRouter } from "expo-router";

export const FuncComponent = () => {
  const navigation = useRouter()
  
  // To navigate and allow going back
  const navigate = () => {
    navigation.navigate("/")
  }

  // to navigate WITHOUT allowing going back
  const replace = () => {
    navigation.replace("/")
  }

  // ...
}

You should use navigation.replace in some cases. Especially when you want to foce the user to take some action. For example, when routing to the auth screen or the paywall screen. You might want to use navigation.replace to force the user to login/purchase instead of just hitting the back button.

Automatic Routing

What is Automatic Routing

Automatic Routing automatically routes your app to the correct screen based on the configs you have set up and the state of the app. If the user has not completed onboarding, it will display the onboarding screen. If the user has not logged, it will display the auth screen. Etc.

How to use

Just use navigation.replace("/") to redirect to the root screen of the app. This page will automatically route you to the correct page based on the app state

How it works

Automatic routing is handled by the useEffect in /app/index.tsx.

• If config.requireOnboarding is set, but the user has not completed onboarding, redirect to the onboarding page

• if config.requireAuth is set, but the user is not logged in, redirect to the onboarding page

• After signIn, signOut, etc. are called, the page will redirect to the root screen "/" and then is rerouted to the correct page

Custom Behavior

Modify the useEffect in /app/index.tsx to customize the behavior of the routing. For example, to force the user to authenticate before they do the onboarding, reorder the if statements

// If the user is not logged in and we're requiring auth, navigate to the auth screen
if (!hasAuthCompleted && config.requireAuth) {
  navigation.replace("/auth")
  return
}

// If the user is not done with onboarding and we're requiring onboarding, navigate to the onboarding screen
if (!hasOnboardingCompleted && config.requireOnboarding) {
  navigation.replace("/onboarding")
  return
}