diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts
index e05fad752..439d2c26d 100644
--- a/src/framework/ui/index.ts
+++ b/src/framework/ui/index.ts
@@ -3,6 +3,14 @@ import {
   Avatar as AvatarComponent,
   Props as AvatarProps,
 } from './avatar/avatar.component';
+import {
+  BottomNavigatorTab as BottomNavigatorTabComponent,
+  Props as BottomNavigatorTabProps,
+} from './tabNavigator/bottomNavigatorTab.component';
+import {
+  BottomTabNavigator as BottomTabNavigatorComponent,
+  Props as BottomTabNavigatorProps,
+} from './tabNavigator/bottomTabNavigator.component';
 import {
   Button as ButtonComponent,
   Props as ButtonProps,
@@ -11,14 +19,34 @@ import {
   ButtonGroup as ButtonGroupComponent,
   Props as ButtonGroupProps,
 } from './buttonGroup/buttonGroup.component';
+import {
+  CheckBox as CheckBoxComponent,
+  Props as CheckBoxProps,
+} from './checkbox/checkbox.component';
 import {
   Input as InputComponent,
   Props as InputProps,
 } from './input/input.component';
 import {
-  Text as TextComponent,
-  Props as TextProps,
-} from './text/text.component';
+  Layout as LayoutComponent,
+  Props as LayoutProps,
+} from './layout/layout.component';
+import {
+  List as ListComponent,
+  Props as ListProps,
+} from './list/list.component';
+import {
+  ListItem as ListItemComponent,
+  Props as ListItemProps,
+} from './list/listItem.component';
+import {
+  Modal as ModalComponent,
+  Props as ModalProps,
+} from './modal/modal.component';
+import {
+  Popover as PopoverComponent,
+  Props as PopoverProps,
+} from './popover/popover.component';
 import {
   Radio as RadioComponent,
   Props as RadioProps,
@@ -27,18 +55,6 @@ import {
   RadioGroup as RadioGroupComponent,
   Props as RadioGroupProps,
 } from './radioGroup/radioGroup.component';
-import {
-  Layout as LayoutComponent,
-  Props as LayoutProps,
-} from './layout/layout.component';
-import {
-  Toggle as ToggleComponent,
-  Props as ToggleProps,
-} from './toggle/toggle.component';
-import {
-  CheckBox as CheckBoxComponent,
-  Props as CheckBoxProps,
-} from './checkbox/checkbox.component';
 import {
   Tab as TabComponent,
   Props as TabProps,
@@ -47,26 +63,22 @@ import {
   TabBar as TabBarComponent,
   Props as TabBarProps,
 } from './tab/tabBar.component';
-import {
-  Popover as PopoverComponent,
-  Props as PopoverProps,
-} from './popover/popover.component';
-import {
-  Tooltip as TooltipComponent,
-  Props as TooltipProps,
-} from './tooltip/tooltip.component';
-import {
-  ViewPager,
-  Props as ViewPagerProps,
-} from './viewPager/viewPager.component';
 import {
   TabView,
   Props as TabViewProps,
 } from './tab/tabView.component';
 import {
-  BottomTabNavigator as BottomTabNavigatorComponent,
-  Props as BottomTabNavigatorProps,
-} from './tabNavigator/bottomTabNavigator.component';
+  Text as TextComponent,
+  Props as TextProps,
+} from './text/text.component';
+import {
+  Toggle as ToggleComponent,
+  Props as ToggleProps,
+} from './toggle/toggle.component';
+import {
+  Tooltip as TooltipComponent,
+  Props as TooltipProps,
+} from './tooltip/tooltip.component';
 import {
   TopNavigationBar as TopNavigationBarComponent,
   Props as TopNavigationBarProps,
@@ -76,13 +88,9 @@ import {
   Props as TopNavigationBarActionProps,
 } from './topNavigationBar/topNavigationBarAction.component';
 import {
-  BottomNavigatorTab as BottomNavigatorTabComponent,
-  Props as BottomNavigatorTabProps,
-} from './tabNavigator/bottomNavigatorTab.component';
-import {
-  Modal as ModalComponent,
-  Props as ModalProps,
-} from './modal/modal.component';
+  ViewPager,
+  Props as ViewPagerProps,
+} from './viewPager/viewPager.component';
 import {
   ButtonAlignment,
   ButtonAlignments,
@@ -93,68 +101,80 @@ import {
 } from './popover/type';
 
 const Avatar = styled<AvatarComponent, AvatarProps>(AvatarComponent);
+const BottomNavigatorTab = styled<BottomNavigatorTabComponent, BottomNavigatorTabProps>(BottomNavigatorTabComponent);
+const BottomTabNavigator = styled<BottomTabNavigatorComponent, BottomTabNavigatorProps>(BottomTabNavigatorComponent);
 const Button = styled<ButtonComponent, ButtonProps>(ButtonComponent);
 const ButtonGroup = styled<ButtonGroupComponent, ButtonGroupProps>(ButtonGroupComponent);
+const CheckBox = styled<CheckBoxComponent, CheckBoxProps>(CheckBoxComponent);
 const Input = styled<InputComponent, InputProps>(InputComponent);
-const Text = styled<TextComponent, TextProps>(TextComponent);
+const Layout = styled<LayoutComponent, LayoutProps>(LayoutComponent);
+const List = styled<ListComponent, ListProps>(ListComponent);
+const ListItem = styled<ListItemComponent, ListItemProps>(ListItemComponent);
+const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
+const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
 const Radio = styled<RadioComponent, RadioProps>(RadioComponent);
 const RadioGroup = styled<RadioGroupComponent, RadioGroupProps>(RadioGroupComponent);
-const Layout = styled<LayoutComponent, LayoutProps>(LayoutComponent);
-const Toggle = styled<ToggleComponent, ToggleProps>(ToggleComponent);
-const CheckBox = styled<CheckBoxComponent, CheckBoxProps>(CheckBoxComponent);
 const Tab = styled<TabComponent, TabProps>(TabComponent);
 const TabBar = styled<TabBarComponent, TabBarProps>(TabBarComponent);
-const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
+const Text = styled<TextComponent, TextProps>(TextComponent);
+const Toggle = styled<ToggleComponent, ToggleProps>(ToggleComponent);
 const Tooltip = styled<TooltipComponent, TooltipProps>(TooltipComponent);
-const BottomTabNavigator = styled<BottomTabNavigatorComponent, BottomTabNavigatorProps>(BottomTabNavigatorComponent);
-const BottomNavigatorTab = styled<BottomNavigatorTabComponent, BottomNavigatorTabProps>(BottomNavigatorTabComponent);
 const TopNavigationBar = styled<TopNavigationBarComponent, TopNavigationBarProps>(TopNavigationBarComponent);
 const TopNavigationBarAction =
   styled<TopNavigationBarActionComponent, TopNavigationBarActionProps>(TopNavigationBarActionComponent);
-const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
 
 export {
   Avatar,
+  BottomNavigatorTab,
+  BottomTabNavigator,
   Button,
   ButtonGroup,
+  CheckBox,
   Input,
-  Text,
   Layout,
-  LayoutProps,
+  List,
+  ListItem,
+  Modal,
+  Popover,
   Radio,
-  RadioProps,
   RadioGroup,
-  RadioGroupProps,
-  Toggle,
-  ToggleProps,
-  CheckBox,
   Tab,
   TabBar,
-  Popover,
+  TabView,
+  Text,
+  Toggle,
   Tooltip,
+  TopNavigationBar,
+  TopNavigationBarAction,
   ViewPager,
-  TabView,
+};
+
+export {
   AvatarProps,
+  BottomNavigatorTabProps,
+  BottomTabNavigatorProps,
   ButtonProps,
-  InputProps,
   ButtonGroupProps,
   CheckBoxProps,
+  InputProps,
+  LayoutProps,
+  ListProps,
+  ListItemProps,
+  ModalProps,
+  PopoverProps,
+  RadioProps,
+  RadioGroupProps,
   TabProps,
   TabBarProps,
-  PopoverProps,
-  TooltipProps,
-  ViewPagerProps,
   TabViewProps,
-  BottomTabNavigator,
-  BottomTabNavigatorProps,
-  BottomNavigatorTab,
-  BottomNavigatorTabProps,
-  TopNavigationBar,
+  TooltipProps,
+  ToggleProps,
   TopNavigationBarProps,
-  TopNavigationBarAction,
   TopNavigationBarActionProps,
-  Modal,
-  ModalProps,
+  ViewPagerProps,
+};
+
+export {
   ButtonAlignment,
   ButtonAlignments,
   PopoverPlacement,
diff --git a/src/framework/ui/list/list.component.tsx b/src/framework/ui/list/list.component.tsx
new file mode 100644
index 000000000..7e2a15c8b
--- /dev/null
+++ b/src/framework/ui/list/list.component.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  FlatList,
+  FlatListProps,
+  ListRenderItemInfo,
+  StyleSheet,
+} from 'react-native';
+import {
+  StyledComponentProps,
+  StyleType,
+} from '@kitten/theme';
+import { Props as ListItemProps } from './listItem.component';
+
+// this is basically needed to avoid generics in required props
+type ItemType = any;
+
+interface ListProps<ItemT> {
+  renderItem: (info: ListRenderItemInfo<ItemT>, style: StyleType) => React.ReactElement<any>;
+}
+
+export type Props = ListProps<ItemType> & StyledComponentProps & FlatListProps<ItemType>;
+
+export class List extends React.Component<Props> {
+
+  private listRef: React.RefObject<FlatList<ItemType>> = React.createRef();
+
+  public scrollToEnd = (params?: { animated?: boolean }) => {
+    const { current: list } = this.listRef;
+
+    list.scrollToEnd(params);
+  };
+
+  public scrollToIndex = (params: {
+    animated?: boolean;
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number
+  }) => {
+
+    const { current: list } = this.listRef;
+
+    list.scrollToIndex(params);
+  };
+
+  public scrollToOffset(params: { animated?: boolean; offset: number }) {
+    const { current: list } = this.listRef;
+
+    list.scrollToOffset(params);
+  }
+
+  private getComponentStyle = (source: StyleType): StyleType => {
+    const { item, ...container } = source;
+
+    return {
+      container: container,
+    };
+  };
+
+  private getItemStyle = (source: StyleType, index: number): StyleType => {
+    const { item } = source;
+
+    return item;
+  };
+
+  private extractItemKey = (item: ItemType, index: number): string => {
+    return index.toString();
+  };
+
+  private renderItem = (info: ListRenderItemInfo<ItemType>): React.ReactElement<ListItemProps> => {
+    const { renderItem, themedStyle } = this.props;
+    const { index } = info;
+
+    const itemStyle: StyleType = this.getItemStyle(themedStyle, index);
+    const itemElement: React.ReactElement<ListItemProps> = renderItem(info, itemStyle);
+
+    return React.cloneElement(itemElement, {
+      style: [itemStyle, itemElement.props.style, styles.item],
+      index: index,
+    });
+  };
+
+  public render(): React.ReactElement<FlatListProps<ItemType>> {
+    const { style, themedStyle, ...derivedProps } = this.props;
+    const { container } = this.getComponentStyle(themedStyle);
+
+    return (
+      <FlatList
+        {...derivedProps}
+        ref={this.listRef}
+        style={[container, style, styles.container]}
+        keyExtractor={this.extractItemKey}
+        renderItem={this.renderItem}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  item: {},
+});
diff --git a/src/framework/ui/list/list.spec.config.ts b/src/framework/ui/list/list.spec.config.ts
new file mode 100644
index 000000000..60e15ab45
--- /dev/null
+++ b/src/framework/ui/list/list.spec.config.ts
@@ -0,0 +1,173 @@
+import { ThemeMappingType } from 'eva/packages/types';
+import { ThemeType } from '@kitten/theme';
+
+export const mapping: ThemeMappingType = {
+  'List': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {},
+      'appearances': {
+        'default': {
+          'default': true,
+        },
+      },
+      'variants': {},
+      'states': {},
+    },
+    'appearance': {
+      'default': {
+        'mapping': {
+          'item': {},
+        },
+      },
+    },
+  },
+  'ListItem': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {},
+      'appearances': {
+        'default': {
+          'default': true,
+        },
+      },
+      'variants': {},
+      'states': {
+        'active': {
+          'default': false,
+          'priority': 0,
+          'scope': 'all',
+        },
+      },
+    },
+    'appearance': {
+      'default': {
+        'mapping': {
+          'paddingVertical': 12,
+          'paddingHorizontal': 6,
+          'icon': {
+            'width': 48,
+            'height': 48,
+            'marginHorizontal': 6,
+          },
+          'title': {
+            'color': 'text-primary',
+            'fontSize': 20,
+            'fontWeight': '600',
+            'marginHorizontal': 6,
+            'marginVertical': 4,
+          },
+          'description': {
+            'marginHorizontal': 6,
+            'marginVertical': 4,
+            'color': 'gray-400',
+            'fontSize': 14,
+          },
+          'accessory': {
+            'width': 48,
+            'height': 48,
+            'marginHorizontal': 6,
+          },
+          'state': {
+            'active': {
+              'backgroundColor': 'gray-100',
+            },
+          },
+        },
+      },
+    },
+  },
+  'Text': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {
+        'color': {
+          'type': 'color',
+        },
+        'fontSize': {
+          'type': 'number',
+        },
+      },
+      'appearances': {
+        'primary': {
+          'default': true,
+        },
+      },
+      'variants': {
+        'category': {
+          'h1': {
+            'default': false,
+          },
+          'h2': {
+            'default': false,
+          },
+          'h3': {
+            'default': false,
+          },
+          'h4': {
+            'default': false,
+          },
+          'h5': {
+            'default': false,
+          },
+          'h6': {
+            'default': false,
+          },
+          'body': {
+            'default': true,
+          },
+        },
+      },
+      'states': {},
+    },
+    'appearance': {
+      'primary': {
+        'mapping': {
+          'color': 'text-primary',
+        },
+        'variant': {
+          'category': {
+            'h1': {
+              'fontSize': 64,
+            },
+            'h2': {
+              'fontSize': 40,
+            },
+            'h3': {
+              'fontSize': 32,
+            },
+            'h4': {
+              'fontSize': 24,
+            },
+            'h5': {
+              'fontSize': 16,
+            },
+            'h6': {
+              'fontSize': 14,
+            },
+            'body': {
+              'fontSize': 16,
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const theme: ThemeType = {
+  'blue-primary': '#3366FF',
+  'blue-dark': '#2541CC',
+  'gray-light': '#DDE1EB',
+  'gray-primary': '#A6AEBD',
+  'gray-dark': '#8992A3',
+  'gray-highlight': '#EDF0F5',
+  'pink-primary': '#FF3D71',
+  'text-primary': '#000000',
+  'text-primary-inverse': '#ffffff',
+
+  'gray-100': '#f7f8fa',
+  'gray-200': '#edf0f5',
+  'gray-300': '#c8cedb',
+  'gray-400': '#a6aebd',
+};
diff --git a/src/framework/ui/list/list.spec.tsx b/src/framework/ui/list/list.spec.tsx
new file mode 100644
index 000000000..c2ec94fbb
--- /dev/null
+++ b/src/framework/ui/list/list.spec.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import {
+  Image,
+  ImageProps,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  render,
+  fireEvent,
+  shallow,
+  RenderAPI,
+} from 'react-native-testing-library';
+import { ReactTestInstance } from 'react-test-renderer';
+import {
+  styled,
+  StyleProvider,
+  StyleProviderProps,
+  StyleType,
+} from '@kitten/theme';
+import {
+  List as ListComponent,
+  Props as ListProps,
+} from './list.component';
+import {
+  ListItem as ListItemComponent,
+  Props as ListItemProps,
+} from './listItem.component';
+import * as config from './list.spec.config';
+
+const List = styled<ListComponent, ListProps>(ListComponent);
+const ListItem = styled<ListItemComponent, ListItemProps>(ListItemComponent);
+
+const data: any[] = Array(8);
+
+const Mock = (props?: ListProps): React.ReactElement<StyleProviderProps> => (
+  <StyleProvider mapping={config.mapping} theme={config.theme} styles={{}}>
+    <List {...props} />
+  </StyleProvider>
+);
+
+const ItemMock = (props?: ListItemProps): React.ReactElement<ListItemProps> => (
+  <ListItem {...props} />
+);
+
+describe('@list: component checks', () => {
+
+  it('* renders proper amount of data', () => {
+    const item = () => (
+      <ItemMock title='Title'/>
+    );
+
+    const component: RenderAPI = render(
+      <Mock data={data} renderItem={item}/>,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+
+    expect(items.length).toEqual(8);
+  });
+
+});
+
+describe('@list-item: template matches snapshot', () => {
+
+  it('* title', () => {
+    const item = () => (
+      <ItemMock title='Title'/>
+    );
+
+    const component: RenderAPI = render(
+      <Mock data={data} renderItem={item}/>,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+    const { output } = shallow(items[0]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('* description', () => {
+    const item = () => (
+      <ItemMock title='Title'/>
+    );
+
+    const component: RenderAPI = render(
+      <Mock data={data} renderItem={item}/>,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+    const { output } = shallow(items[0]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('* with icon', () => {
+    const item = () => (
+      <ItemMock
+        title='Title'
+        description='Description'
+        icon={icon}
+      />
+    );
+
+    const icon = (style: StyleType): React.ReactElement<ImageProps> => (
+      <Image style={style} source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}/>
+    );
+
+    const component: RenderAPI = render(
+      <Mock data={data} renderItem={item}/>,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+    const { output } = shallow(items[0]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('* with accessory', () => {
+    const item = () => (
+      <ItemMock
+        title='Title'
+        description='Description'
+        accessory={accessory}
+      />
+    );
+
+    const accessory = (style: StyleType): React.ReactElement<ImageProps> => (
+      <Image style={style} source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}/>
+    );
+
+    const component: RenderAPI = render(
+      <Mock data={data} renderItem={item}/>,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+    const { output } = shallow(items[0]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+});
+
+describe('@list-item: component checks', () => {
+
+  it('* emits onPress with correct args', async () => {
+    const pressIndex: number = 0;
+
+    const onPress = jest.fn((args: any[]) => {
+      expect(args).toEqual(pressIndex);
+    });
+
+    const item = () => (
+      <ItemMock
+        title='Title'
+        onPress={onPress}
+      />
+    );
+
+    const component: RenderAPI = render(
+      <Mock data={data} renderItem={item}/>,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+    const touchable: ReactTestInstance = items[pressIndex].findByType(TouchableOpacity);
+
+    fireEvent.press(touchable);
+  });
+
+});
diff --git a/src/framework/ui/list/list.spec.tsx.snap b/src/framework/ui/list/list.spec.tsx.snap
new file mode 100644
index 000000000..59501be3b
--- /dev/null
+++ b/src/framework/ui/list/list.spec.tsx.snap
@@ -0,0 +1,475 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@list-item: template matches snapshot * description 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  index={0}
+  onLongPress={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 6,
+        "paddingVertical": 12,
+      },
+      Array [
+        Object {},
+        undefined,
+        Object {},
+      ],
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Title"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "accessory": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "description": Object {
+            "color": "#a6aebd",
+            "fontSize": 14,
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          "icon": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "title": Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+        },
+        Object {
+          "flex": 1,
+        },
+      ]
+    }
+  >
+    <ForwardRef(createComponent)
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          Object {},
+        ]
+      }
+    >
+      Title
+    </ForwardRef(createComponent)>
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`@list-item: template matches snapshot * title 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  index={0}
+  onLongPress={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 6,
+        "paddingVertical": 12,
+      },
+      Array [
+        Object {},
+        undefined,
+        Object {},
+      ],
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Title"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "accessory": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "description": Object {
+            "color": "#a6aebd",
+            "fontSize": 14,
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          "icon": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "title": Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+        },
+        Object {
+          "flex": 1,
+        },
+      ]
+    }
+  >
+    <ForwardRef(createComponent)
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          Object {},
+        ]
+      }
+    >
+      Title
+    </ForwardRef(createComponent)>
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`@list-item: template matches snapshot * with accessory 1`] = `
+<TouchableOpacity
+  accessory={[Function]}
+  activeOpacity={1}
+  appearance="default"
+  description="Description"
+  dispatch={[Function]}
+  index={0}
+  onLongPress={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 6,
+        "paddingVertical": 12,
+      },
+      Array [
+        Object {},
+        undefined,
+        Object {},
+      ],
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Title"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "accessory": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "description": Object {
+            "color": "#a6aebd",
+            "fontSize": 14,
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          "icon": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "title": Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+        },
+        Object {
+          "flex": 1,
+        },
+      ]
+    }
+  >
+    <ForwardRef(createComponent)
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          Object {},
+        ]
+      }
+    >
+      Title
+    </ForwardRef(createComponent)>
+    <ForwardRef(createComponent)
+      style={
+        Array [
+          Object {
+            "color": "#a6aebd",
+            "fontSize": 14,
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          Object {},
+        ]
+      }
+    >
+      Description
+    </ForwardRef(createComponent)>
+  </View>
+  <Component
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Array [
+        0,
+        Object {
+          "height": 48,
+          "marginHorizontal": 6,
+          "width": 48,
+        },
+        Object {},
+      ]
+    }
+  />
+</TouchableOpacity>
+`;
+
+exports[`@list-item: template matches snapshot * with icon 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  description="Description"
+  dispatch={[Function]}
+  icon={[Function]}
+  index={0}
+  onLongPress={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 6,
+        "paddingVertical": 12,
+      },
+      Array [
+        Object {},
+        undefined,
+        Object {},
+      ],
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Title"
+>
+  <Component
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 48,
+          "marginHorizontal": 6,
+          "width": 48,
+        },
+        0,
+        Object {},
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "accessory": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "description": Object {
+            "color": "#a6aebd",
+            "fontSize": 14,
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          "icon": Object {
+            "height": 48,
+            "marginHorizontal": 6,
+            "width": 48,
+          },
+          "title": Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+        },
+        Object {
+          "flex": 1,
+        },
+      ]
+    }
+  >
+    <ForwardRef(createComponent)
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+            "fontSize": 20,
+            "fontWeight": "600",
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          Object {},
+        ]
+      }
+    >
+      Title
+    </ForwardRef(createComponent)>
+    <ForwardRef(createComponent)
+      style={
+        Array [
+          Object {
+            "color": "#a6aebd",
+            "fontSize": 14,
+            "marginHorizontal": 6,
+            "marginVertical": 4,
+          },
+          Object {},
+        ]
+      }
+    >
+      Description
+    </ForwardRef(createComponent)>
+  </View>
+</TouchableOpacity>
+`;
diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx
new file mode 100644
index 000000000..325c51724
--- /dev/null
+++ b/src/framework/ui/list/listItem.component.tsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  ViewProps,
+  TouchableOpacityProps,
+  ImageProps,
+  GestureResponderEvent,
+  StyleSheet,
+} from 'react-native';
+import {
+  styled,
+  StyledComponentProps,
+  StyleType,
+  Interaction,
+} from '@kitten/theme';
+import {
+  Text as TextComponent,
+  Props as TextProps,
+} from '../text/text.component';
+
+interface ListDerivedProps {
+  index?: number;
+}
+
+interface TemplateBaseProps {
+  index: number;
+  icon: (index: number, style: StyleType) => React.ReactElement<ImageProps>;
+  accessory: (index: number, style: StyleType) => React.ReactElement<any>;
+}
+
+interface TemplateTitleProps extends Partial<TemplateBaseProps> {
+  title: string;
+  description?: string;
+}
+
+interface TemplateDescriptionProps extends Partial<TemplateBaseProps> {
+  title?: string;
+  description: string;
+}
+
+// @ts-ignore: props override
+interface TouchableOpacityIndexedProps extends TouchableOpacityProps {
+  onPress?: (index: number, event: GestureResponderEvent) => void;
+  onPressIn?: (index: number, event: GestureResponderEvent) => void;
+  onPressOut?: (index: number, event: GestureResponderEvent) => void;
+  onLongPress?: (index: number, event: GestureResponderEvent) => void;
+}
+
+type ListItemProps = (TemplateTitleProps | TemplateDescriptionProps) & ListDerivedProps;
+
+const Text = styled<TextComponent, TextProps>(TextComponent);
+
+export type Props = ListItemProps & StyledComponentProps & TouchableOpacityIndexedProps;
+
+export class ListItem extends React.Component<Props> {
+
+  private onPress = (event: GestureResponderEvent) => {
+    if (this.props.onPress) {
+      this.props.onPress(this.props.index, event);
+    }
+  };
+
+  private onPressIn = (event: GestureResponderEvent) => {
+    this.props.dispatch([Interaction.ACTIVE]);
+
+    if (this.props.onPressIn) {
+      this.props.onPressIn(this.props.index, event);
+    }
+  };
+
+  private onPressOut = (event: GestureResponderEvent) => {
+    this.props.dispatch([]);
+
+    if (this.props.onPressOut) {
+      this.props.onPressOut(this.props.index, event);
+    }
+  };
+
+  private onLongPress = (event: GestureResponderEvent) => {
+    if (this.props.onLongPress) {
+      this.props.onLongPress(this.props.index, event);
+    }
+  };
+
+  private getComponentStyle = (source: StyleType): StyleType => {
+    const { icon, title, description, accessory, ...container } = source;
+
+    return {
+      container: container,
+      icon: icon,
+      title: title,
+      description: description,
+      accessory: accessory,
+    };
+  };
+
+  private renderIconElement = (style: StyleType): React.ReactElement<ImageProps> => {
+    // @ts-ignore: will be not executed if `icon` prop is provided
+    const { index, icon } = this.props;
+
+    const iconElement: React.ReactElement<ImageProps> = icon(index, style);
+
+    return React.cloneElement(iconElement, {
+      key: 0,
+      style: [style, iconElement.props.style, styles.icon],
+    });
+  };
+
+  private renderContentElement = (style: StyleType): React.ReactElement<ViewProps> => {
+    const contentChildren: React.ReactNode = this.renderContentElementChildren(style);
+
+    return (
+      <View
+        key={1}
+        style={[style, styles.contentContainer]}>
+        {contentChildren}
+      </View>
+    );
+  };
+
+  private renderTitleElement = (style: StyleType): React.ReactElement<TextProps> => {
+    // @ts-ignore: will be not executed if `title` property is provided
+    const { title } = this.props;
+
+    return (
+      <Text
+        style={[style, styles.title]}
+        key={2}>
+        {title}
+      </Text>
+    );
+  };
+
+  private renderDescriptionElement = (style: StyleType): React.ReactElement<TextProps> => {
+    // @ts-ignore: will be not executed if `description` property is provided
+    const { description } = this.props;
+
+    return (
+      <Text
+        key={3}
+        style={[style, styles.description]}>
+        {description}
+      </Text>
+    );
+  };
+
+  private renderAccessoryElement = (style: StyleType): React.ReactElement<any> => {
+    // @ts-ignore: will be not executed if `accessory` property is provided
+    const { index, accessory } = this.props;
+
+    const accessoryElement: React.ReactElement<any> = accessory(index, style);
+
+    return React.cloneElement(accessoryElement, {
+      key: 4,
+      style: [accessoryElement.props.style, style, styles.accessory],
+    });
+  };
+
+  private renderContentElementChildren = (style: StyleType): React.ReactNode => {
+    // @ts-ignore: will be not executed if any of properties below is provided
+    const { title, description } = this.props;
+
+    return [
+      title ? this.renderTitleElement(style.title) : undefined,
+      description ? this.renderDescriptionElement(style.description) : undefined,
+    ];
+  };
+
+  private renderTemplateChildren = (style: StyleType): React.ReactNode => {
+    // @ts-ignore: following props could not be provided
+    const { icon, title, description, accessory } = this.props;
+
+    return [
+      icon ? this.renderIconElement(style.icon) : undefined,
+      title || description ? this.renderContentElement(style) : undefined,
+      accessory ? this.renderAccessoryElement(style.accessory) : undefined,
+    ];
+  };
+
+  public render(): React.ReactElement<TouchableOpacityProps> {
+    const { style, themedStyle, ...derivedProps } = this.props;
+    const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.renderTemplateChildren(componentStyles);
+
+    return (
+      <TouchableOpacity
+        {...derivedProps}
+        style={[container, style, styles.container]}
+        activeOpacity={1.0}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onLongPress={this.onLongPress}>
+        {componentChildren}
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  icon: {},
+  title: {},
+  description: {},
+  accessory: {},
+});
diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts
index 518d667c7..cf983d3d8 100644
--- a/src/playground/src/ui/screen/index.ts
+++ b/src/playground/src/ui/screen/index.ts
@@ -1,20 +1,21 @@
-export { HomeScreen } from './home.component';
 export { AvatarScreen } from './avatar.component';
 export { ButtonScreen } from './button.component';
 export { ButtonGroupScreen } from './buttonGroup.component';
+export { CheckBoxScreen } from './checkbox.component';
+export { DialogScreen } from './dialog.component';
+export { HomeScreen } from './home.component';
 export { InputScreen } from './input.component';
-export { TextScreen } from './text.component';
-export { RadioScreen } from './radio.component';
 export { LayoutScreen } from './layout.component';
-export { ToggleScreen } from './toggle.component';
+export { ListScreen } from './list.component';
+export { ModalScreen } from './modal.component';
+export { PopoverScreen } from './popover.component';
+export { RadioScreen } from './radio.component';
 export { RadioGroupScreen } from './radioGroup.component';
-export { DialogScreen } from './dialog.component';
-export { CheckBoxScreen } from './checkbox.component';
 export { TabBarScreen } from './tabBar.component';
-export { ViewPagerScreen } from './viewPager.component';
-export { TabViewScreen } from './tabView.component';
-export { PopoverScreen } from './popover.component';
-export { TooltipScreen } from './tooltip.component';
 export { TabNavigatorScreen } from './tabNavigator.component';
 export { TopNavigationBarScreen } from './topNavigationBar.component';
-export { ModalScreen } from './modal.component';
+export { TabViewScreen } from './tabView.component';
+export { TooltipScreen } from './tooltip.component';
+export { TextScreen } from './text.component';
+export { ToggleScreen } from './toggle.component';
+export { ViewPagerScreen } from './viewPager.component';
diff --git a/src/playground/src/ui/screen/list.component.tsx b/src/playground/src/ui/screen/list.component.tsx
new file mode 100644
index 000000000..06cc33ab5
--- /dev/null
+++ b/src/playground/src/ui/screen/list.component.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Alert,
+  ListRenderItemInfo,
+} from 'react-native';
+import { NavigationScreenProps } from 'react-navigation';
+import { ThemedComponentProps } from '@kitten/theme';
+import {
+  List,
+  // ListItem,
+  ListItemProps,
+} from '@kitten/ui';
+import { ListItemIconAccessoryShowcase as ListItem } from './listItem.showcase.component';
+
+interface ListItemModel {
+  title: string;
+  description: string;
+}
+
+type Props = & ThemedComponentProps & NavigationScreenProps;
+
+export class ListScreen extends React.Component<Props> {
+
+  static navigationOptions = {
+    title: 'List',
+  };
+
+  private items: ListItemModel[] = new Array(42).fill({
+    title: `Item`,
+    description: [
+      'Once upon a time when pigs spoke rhyme',
+      'and monkeys chewed tobacco,',
+      'and hens took snuff to make them tough,',
+      'and ducks went quack, quack, quack, O!',
+    ].join(' '),
+  });
+
+  private onItemPress = (index: number) => {
+    const { title, description } = this.items[index];
+
+    Alert.alert(`${title} ${index + 1} says`, `${description}`);
+  };
+
+  private renderItem = (info: ListRenderItemInfo<ListItemModel>): React.ReactElement<ListItemProps> => {
+    const { item, index } = info;
+
+    return (
+      <ListItem
+        title={`${item.title} ${index + 1}`}
+        description={item.description}
+        onPress={this.onItemPress}>
+      </ListItem>
+    );
+  };
+
+  public render(): React.ReactNode {
+    return (
+      <List
+        data={this.items}
+        renderItem={this.renderItem}
+      />
+    );
+  }
+}
diff --git a/src/playground/src/ui/screen/listItem.showcase.component.tsx b/src/playground/src/ui/screen/listItem.showcase.component.tsx
new file mode 100644
index 000000000..3b2509a44
--- /dev/null
+++ b/src/playground/src/ui/screen/listItem.showcase.component.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+  Image,
+  ImageProps,
+  View,
+} from 'react-native';
+import { StyleType } from '@kitten/theme';
+import {
+  Text,
+  CheckBox,
+  ListItem,
+  ListItemProps,
+  CheckBoxProps,
+  Button,
+} from '@kitten/ui';
+
+export const ListItemIconShowcase = (props?: ListItemProps): React.ReactElement<ListItemProps> => {
+
+  const Icon = (index: number, style: StyleType): React.ReactElement<ImageProps> => (
+    <Image source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}/>
+  );
+
+  return (
+    <ListItem {...props} icon={Icon}/>
+  );
+};
+
+export const ListItemAccessoryShowcase = (props?: ListItemProps): React.ReactElement<ListItemProps> => {
+
+  const Accessory = (index: number, style: StyleType): React.ReactElement<CheckBoxProps> => (
+    <CheckBox checked={index % 2 === 0}/>
+  );
+
+  return (
+    <ListItem {...props} accessory={Accessory}/>
+  );
+};
+
+export const ListItemIconAccessoryShowcase = (props?: ListItemProps): React.ReactElement<ListItemProps> => {
+
+  const Icon = (index: number, style: StyleType): React.ReactElement<ImageProps> => (
+    <Image source={{ uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }}/>
+  );
+
+  const Accessory = (index: number, style: StyleType): React.ReactElement<CheckBoxProps> => (
+    <CheckBox checked={index % 2 === 0}/>
+  );
+
+  return (
+    <ListItem {...props} icon={Icon} accessory={Accessory}/>
+  );
+};
+
+export const ListItemCustomContentShowcase = (props?: ListItemProps): React.ReactElement<ListItemProps> => {
+
+  const styles: StyleType = {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: props.index % 2 === 0 ? '#f7f8fa' : '#c8cedb',
+      padding: 4,
+    },
+    contentContainer: {
+      flex: 1,
+      marginHorizontal: 4,
+    },
+    icon: {
+      width: 42,
+      height: 42,
+      marginHorizontal: 4,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: '500',
+    },
+    description: {
+      fontSize: 12,
+      color: 'gray',
+    },
+    button: {
+      marginHorizontal: 4,
+    },
+  };
+
+  return (
+    <View style={styles.container}>
+      <Image
+        style={styles.icon}
+        source={{ uri: 'https://akveo.github.io/eva-icons/outline/png/128/play-circle-outline.png' }}
+      />
+      <View style={styles.contentContainer}>
+        <Text style={styles.title}>Welcome to the Jungle</Text>
+        <Text style={styles.description}>Guns N'Roses</Text>
+      </View>
+      <Button style={styles.button} status='success'>$2.99</Button>
+    </View>
+  );
+};