Layout

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

Usage

Open on Snack ↗

import { Layout, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/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 '@onlynative/components'
import { ThemeProvider } from '@onlynative/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 '@onlynative/components'
import { ThemeProvider } from '@onlynative/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.

Props

Prop	Type	Default	Required	Description
immersive	boolean	false	No	When `true`, removes all safe area insets for full-screen layout.
edges	Edge[]	-	No	Explicit set of safe-area edges to apply. Overrides `immersive` when provided.
style	StyleProp<ViewStyle>	-	No	Additional styles applied to the SafeAreaView container.