import Layout from '../Layout'
import Span from '../typography/Span'
import { u } from '../../config/helpers'
import { Sandbox } from '@startupjs/docs'

# Layout

`Layout` serves as the root element of the application. It purpose is to render content within the safe area boundaries of a device. Also it displays a [StatusBar](https://reactnative.dev/docs/statusbar) for `android` & `ios` native apps.

```jsx
import { Layout } from '@startupjs/ui'
```

## Example

```jsx example
return (
  <Layout style={{
    backgroundColor: '#fff',
    height: u(25),
    alignItems: 'center',
    justifyContent: 'center'
  }}>
    <Span size='xxl'>Layout area</Span>
  </Layout>
)
```

## Sandbox

<Sandbox Component={Layout} />