Layout

Layout provides a safe area wrapper with the theme background color applied automatically.

Usage

Open on Snack ↗

import { Layout, Typography } from '@rootnative/components'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <Layout>
          <Typography variant="headlineSmall">Inside safe area</Typography>
          <Typography variant="bodyMedium">Theme background applied automatically.</Typography>
        </Layout>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Immersive Mode

For full-screen layouts that extend behind the status bar:

Open on Snack ↗

import { Layout, Typography } from '@rootnative/components'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <Layout immersive>
          <Typography variant="headlineSmall">Immersive content</Typography>
          <Typography variant="bodyMedium">No safe area insets applied.</Typography>
        </Layout>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Custom Edges

Control which safe area edges are applied:

Open on Snack ↗

import { Layout, Typography } from '@rootnative/components'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <Layout edges={['top', 'bottom']}>
          <Typography variant="headlineSmall">Top + Bottom insets</Typography>
        </Layout>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

By default, only the bottom edge is applied. In immersive mode, no edges are applied. edges is checked first and overrides immersive — <Layout immersive edges={['top']} /> applies the top inset and ignores immersive.

note

Layout always paints theme.colors.background and strips backgroundColor from the style you pass, so the app background stays a single themed surface. To draw a different background, nest a Box (or any View) inside it.

Props

Prop	Type	Default	Required	Description
immersive	boolean	false	No	When `true`, removes all safe area insets for full-screen layout.
edges	Edge[]	['bottom']	No	Explicit set of safe-area edges to apply. Overrides `immersive` when provided. Only the bottom edge is applied by default, because `AppBar` usually owns the top inset — pass `['top', 'bottom']` on a screen with no AppBar, or a title placed under the status bar will be clipped.
style	StyleProp<ViewStyle>	-	No	Additional styles applied to the SafeAreaView container.