Authenticated routes animation/transition between pages

[andredewaard]

Is it possible to create animations/transition between pages that aren't in the same Stack layout?

What i mean is that in the example Expo gives the authenticated routes are not in the same stack as shown here
https://docs.expo.dev/router/reference/authentication/
But this means that when i login the transition between the login page and the main app is instant and looks off.

What i did is add them to the same stack so you see the default stack animation between the 2 pages. But by doing so users that login are able to swipe back to the login page, Also when users logout they can swipe back to the main app again.

How could we prevent this? I know about this method https://reactnavigation.org/docs/preventing-going-back but that feels hacky to me.

This is the folder/route structure i have

and the layout inside (app)

export default function AppLayout() {

  const onLayoutRootView = useCallback(async () => {
    await SplashScreen.hideAsync();
  }, []);

  return (
    <View className="flex-1" onLayout={onLayoutRootView} >
      <Stack
        screenOptions={{
          headerShown: false
        }}
      >
        <Stack.Screen
          name="tabs"
          options={{
            headerShown: false
          }}
        />
        <Stack.Screen
          name="login"
          options={{
            headerShown: false
          }}
        />
        <Stack.Screen
          name="mfa"
          options={{
            headerShown: false
          }}
        />
      </Stack>
    </View>
  )
}

I see this tutorial about react navigation. is this also possible with expo router since its based on react navigation?

[andredewaard]

Based on https://reactnavigation.org/docs/auth-flow/ i should do this.
Im using react query as state machine and data gets updated when i login, No need to redirect. But when doing so i keep going back to the Login view while that one should not be there anymore.

export default function AppLayout() {
  const onLayoutRootView = useCallback(async () => {
    await SplashScreen.hideAsync()
  }, [])

  const { data } = useQuery(authQueries.getMe())

  return (
    <View className="flex-1" onLayout={onLayoutRootView}>
      <Stack
        screenOptions={{
          headerShown: false
        }}
      >
        {!!data ? (
          <Stack.Screen
            name="tabs"
            options={{
              headerShown: false
            }}
          />
        ) : (
          <>
            <Stack.Screen
              name="login"
              options={{
                headerShown: false
              }}
            />
            <Stack.Screen
              name="mfa"
              options={{
                headerShown: false
              }}
            />
          </>
        )}
      </Stack>
    </View>
  )
}