Layout

Layout is a themed container component meant to be the root view of a screen. It applies the Eva background color based on the level prop, making it easy to create layered screen designs.

Import

import { Layout } from '@ui-kitten/components';

Basic Usage

import React from 'react';
import { Layout, Text } from '@ui-kitten/components';

const HomeScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category="h1">Home</Text>
  </Layout>
);

Props

Property	Type	Default	Description
level	'1' | '2' | '3' | '4'	'1'	Background color depth level. Higher values produce darker backgrounds.
style	ViewStyle	-	Additional styles applied to the container.
children	ReactNode	-	Content rendered inside the layout.

Layout also accepts all standard React Native View props.

Storybook

Live examples coming soon via Storybook.