AppShell

Application layout with header, navbar, aside and footer

Import: import { AppShell } from 'react-native-mantine';

Usage

import { AppShell } from 'react-native-mantine';

const [collapsed, setCollapsed] = useState(false);

<AppShell
  header={{ height: 48 }}
  footer={{ height: 40 }}
  navbar={{ width: 110, collapsed }}
  padding="md"
>
  <AppShell.Header>{/* ... */}</AppShell.Header>
  <AppShell.Navbar>{/* ... */}</AppShell.Navbar>
  <AppShell.Main>{/* ... */}</AppShell.Main>
  <AppShell.Footer>{/* ... */}</AppShell.Footer>
</AppShell>

// Sections are absolutely positioned, AppShell.Main
// receives offsets matching the configured sizes

Props

Prop	Type	Default	Description
`header`	`{ height: number }`		Header configuration, required when AppShell.Header is used
`footer`	`{ height: number }`		Footer configuration, required when AppShell.Footer is used
`navbar`	`{ width: number; collapsed?: boolean }`		Navbar configuration, required when AppShell.Navbar is used. collapsed hides the navbar and removes its offset
`aside`	`{ width: number; collapsed?: boolean }`		Aside configuration, required when AppShell.Aside is used. collapsed hides the aside and removes its offset
`padding`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`"md"`	Key of theme.spacing or number, padding of AppShell.Main
`children`	`ReactNode`		AppShell content: Header, Navbar, Aside, Footer and Main sections

Source on GitHub · npm