Authentication navigation pattern — split stacks là gì?

Pattern phổ biến: không điều hướng giữa Login screen và App screens trong cùng một stack.

Thay vào đó render hai stack khác nhau dựa trên auth state.

function RootNavigator() {
  const { user, isLoading } = useAuth()
  if (isLoading) return <SplashScreen />
  return (
    <NavigationContainer>
      {user ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  )
}

Lợi ích:
- Khi user null → AppStack unmount hoàn toàn → không còn stale data, không cần manually navigation.reset().
- Login flow không "lưu" lịch sử trong AppStack → user không swipe-back từ Home về Login được (security).
- Logout = chỉ cần set user = null, navigation tự switch.

Pitfall: transition giữa AuthStack ↔ AppStack mặc định không animate (cây React unmount/remount toàn bộ). Để có animation:
- JS stack (@react-navigation/stack): screenOptions={{ animationTypeForReplace: 'pop' }} cho phép custom transition.
- Native stack (@react-navigation/native-stack): không có prop tương đương — dùng react-native-bootsplash hoặc fade overlay tự custom (Reanimated <Animated.View> ở root) để cover transition.
- Hoặc giữ wrapper component animate opacity quanh <NavigationContainer> con.