AuthLayout

A keyboard-aware, vertically-centered layout shell for authentication flows. Accepts slots for a logo, title, subtitle, form content, and footer. The template owns spacing and structural layout only — it contains no business logic.

When to use: Any auth flow screen — login, signup, forgot password, verification code entry.

When not to use: Settings or detail screens — use SettingsLayout. Content-heavy screens with scrollable lists — build a custom layout.

Import

import { AuthLayout } from '@/components';

Usage

<AuthLayout
  logo={<BrandLogo />}
  title="Welcome back"
  subtitle="Log in to your account"
  footer={<Text variant="caption" color="muted">v1.0.0</Text>}
>
  <AuthForm ... />
</AuthLayout>

Props

Prop	Type	Default	Description
logo	ReactNode	—	Brand mark or illustration above the title
title	string	—	Screen heading (rendered as Heading level={2})
subtitle	string	—	Secondary line below title
children	ReactNode	—	Form content (required)
footer	ReactNode	—	Fixed bottom row for navigation links
testID	string	—

Anatomy

┌─────────────────────────────────┐
│           [logo]                │
│         [title]                 │
│         [subtitle]              │
│                                 │
│         [children]              │
│        (form content)           │
│                                 │
│           [footer]              │
└─────────────────────────────────┘

• The layout is keyboard-avoiding — the form shifts up when the keyboard opens
• The content area is scrollable on small screens
• The footer sticks to the bottom

Minimal login screen

export function LoginScreen() {
  return (
    <AuthLayout title="Sign in">
      <AuthForm
        mode="login"
        email={email} onChangeEmail={setEmail}
        password={password} onChangePassword={setPassword}
        onSubmit={handleLogin}
      />
    </AuthLayout>
  );
}

With all slots filled

export function SignupScreen() {
  return (
    <AuthLayout
      logo={<Image source={logoAsset} style={{ width: 64, height: 64 }} />}
      title="Create account"
      subtitle="Free to start. No credit card required."
      footer={
        <View style={{ flexDirection: 'row', gap: 4 }}>
          <Text variant="caption" color="muted">Already have an account?</Text>
          <Text variant="caption" color="accent" onPress={() => router.push('/login')}>
            Sign in
          </Text>
        </View>
      }
    >
      <AuthForm mode="signup" ... />
    </AuthLayout>
  );
}

Do / Don’t

Do: Keep all navigation and validation logic in the Screen, not in AuthLayout.

Don’t: Use AuthLayout for non-auth screens. It’s designed for centered, form-centric content — settings screens, profile screens, and list screens need SettingsLayout or a custom layout.

Related

• AuthForm — the form organism that fills the children slot
• SettingsLayout — template for settings and detail screens