diff --git a/docs/input.md b/docs/input.md
index 6c7b8c4663..ddce4b5e36 100644
--- a/docs/input.md
+++ b/docs/input.md
@@ -43,6 +43,7 @@ import { Input } from 'react-native-elements';
 > This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following:
 
 * [`containerStyle`](#containerstyle)
+* [`inputContainerStyle`](#inputcontainerstyle)
 * [`errorMessage`](#errormessage)
 * [`errorStyle`](#errorstyle)
 * [`inputStyle`](#inputstyle)
@@ -60,6 +61,16 @@ import { Input } from 'react-native-elements';
 
 ### `containerStyle`
 
+styling for view containing the label, the input and the error message
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| View style (object) |  none   |
+
+---
+
+### `inputContainerStyle`
+
 styling for Input Component Container (optional)
 
 |        Type         | Default |
@@ -90,7 +101,7 @@ add styling to error message (optional)
 
 ### `inputStyle`
 
-add styling to input component (optional)
+style that will be passed to the `style` props of the React Native `TextInput` (optional)
 
 |  Type  | Default |
 | :----: | :-----: |
@@ -165,3 +176,11 @@ add shaking effect to input component (optional)
 | Type | Default |
 | :--: | :-----: |
 | any  |  none   |
+
+---
+
+#### Styles explanation
+
+| Input with a label and an error message                                 | Styles explanation                                                  |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------- |
+|<img src="/react-native-elements/img/input_without_explanation.png" />   | <img src="/react-native-elements/img/input_with_explanation.png" /> |
diff --git a/docs/listitem.md b/docs/listitem.md
new file mode 100644
index 0000000000..770f4e43ea
--- /dev/null
+++ b/docs/listitem.md
@@ -0,0 +1,590 @@
+---
+
+id: listitem
+title: ListItem
+---
+
+![Lists](/react-native-elements/img/lists.png)
+
+#### Using Map Function. Implemented with avatar.
+
+```js
+import { ListItem } from 'react-native-elements'
+
+const list = [
+  {
+    name: 'Amy Farha',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+    subtitle: 'Vice President'
+  },
+  {
+    name: 'Chris Jackson',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+    subtitle: 'Vice Chairman'
+  },
+  ... // more items
+]
+
+<View>
+  {
+    list.map((l, i) => (
+      <ListItem
+        key={i}
+        avatar={{ source: { uri: l.avatar_url } }}
+        title={l.name}
+        subtitle={l.subtitle}
+      />
+    ))
+  }
+</View>
+```
+
+#### Using Map Function. Implemented with link and icon.
+
+```js
+import { ListItem } from 'react-native-elements'
+
+const list = [
+  {
+    title: 'Appointments',
+    icon: 'av-timer'
+  },
+  {
+    title: 'Trips',
+    icon: 'flight-takeoff'
+  },
+  ... // more items
+]
+
+<View>
+  {
+    list.map((item, i) => (
+      <ListItem
+        key={i}
+        title={item.title}
+        leftIcon={{ name: item.icon }}
+      />
+    ))
+  }
+</View>
+```
+
+#### Using RN FlatList. Implemented with link and avatar.
+
+```js
+import { ListItem } from 'react-native-elements'
+
+const list = [
+  {
+    name: 'Amy Farha',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+    subtitle: 'Vice President'
+  },
+  {
+    name: 'Chris Jackson',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+    subtitle: 'Vice Chairman'
+  },
+  ... // more items
+]
+
+keyExtractor = (item, index) => index
+
+renderItem = ({ item }) => (
+  <ListItem
+    title={item.name}
+    subtitle={item.subtitle}
+    avatar={{ source: { uri: item.avatar_url } }}
+  />
+)
+
+
+render () {
+  return (
+    <FlatList
+      keyExtractor={this.keyExtractor}
+      data={this.state.dataSource}
+      renderItem={this.renderItem}
+    />
+  )
+}
+```
+
+#### Using RN FlatList. Implemented with custom avatar component.
+
+```js
+import { ListItem } from 'react-native-elements'
+
+const list = [
+  {
+    name: 'Amy Farha',
+    subtitle: 'Vice President'
+  },
+  {
+    name: 'Chris Jackson',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+    subtitle: 'Vice Chairman'
+  },
+  ... // more items
+]
+
+keyExtractor = (item, index) => index
+
+renderItem = ({ item }) => (
+  <ListItem
+    title={item.name}
+    subtitle={item.subtitle}
+    avatar={{
+      source: item.avatar_url && { uri: item.avatar_url }
+      title: item.name[0]
+    }}
+  />
+)
+
+render () {
+  return (
+    <FlatList
+      keyExtractor={this.keyExtractor}
+      data={this.state.dataSource}
+      renderItem={this.renderItem}
+    />
+  )
+}
+```
+
+#### ListItem implemented with custom View for Subtitle
+
+```js
+import { ListItem } from 'react-native-elements'
+
+render () {
+  return (
+    <ListItem
+      title='Limited supply! Its like digital gold!'
+      subtitle={
+        <View style={styles.subtitleView}>
+          <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
+          <Text style={styles.ratingText}>5 months ago</Text>
+        </View>
+      }
+      avatar={{ source: require('../images/avatar1.jpg') }}
+    />
+  )
+}
+
+styles = StyleSheet.create({
+  subtitleView: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+    paddingTop: 5
+  },
+  ratingImage: {
+    height: 19.21,
+    width: 100
+  },
+  ratingText: {
+    paddingLeft: 10,
+    color: 'grey'
+  }
+})
+```
+
+#### Badges
+
+![Badges](/react-native-elements/img/list-badges.jpeg)
+
+Example badge usage
+
+```js
+<ListItem
+  ...
+  badge={{ value: 3, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
+/>
+```
+
+#### Linear gradient + Scale feedback
+
+<img src="/react-native-elements/img/listitem_with_gradient_scale.gif" width="500" >
+
+```js
+import LinearGradient from 'react-native-linear-gradient' // Only if no expo
+
+  <ListItem
+    scaleProps={{
+      friction: 90,
+      tension: 100,
+      activeScale: 0.95,
+    }}
+    linearGradientProps={{
+      colors: ['#FF9800', '#F44336'],
+      start: [1, 0],
+      end: [0.2, 0],
+    }}
+    ViewComponent={LinearGradient} // Only if no expo
+    leftAvatar={{ rounded: true, source: { uri: avatar_url } }}
+    title="Chris Jackson"
+    titleStyle={{ color: 'white', fontWeight: 'bold' }}
+    subtitleStyle={{ color: 'white' }}
+    subtitle="Vice Chairman"
+    chevronColor="white"
+    chevron
+  />
+```
+
+---
+
+### Props
+
+* [`component`](#component)
+* [`containerStyle`](#containerstyle)
+* [`contentContainerStyle`](#contentcontainerstyle)
+* [`rightContentContainerStyle`](#rightcontentcontainerstyle)
+* [`chevron`](#chevron)
+* [`chevronColor`](#chevroncolor)
+* [`checkmark`](#checkmark)
+* [`checkmarkColor`](#checkmarkcolor)
+* [`onPress`](#onpress)
+* [`onLongPress`](#onlongpress)
+* [`title`](#title)
+* [`titleStyle`](#titlestyle)
+* [`titleProps`](#titleprops)
+* [`subtitle`](#subtitle)
+* [`subtitleStyle`](#subtitlestyle)
+* [`subtitleProps`](#subtitleprops)
+* [`rightTitle`](#righttitle)
+* [`rightTitleStyle`](#righttitlestyle)
+* [`rightTitleProps`](#righttitleprops)
+* [`rightSubtitle`](#rightsubtitle)
+* [`rightSubtitleStyle`](#rightsubtitlestyle)
+* [`rightSubtitleProps`](#rightsubtitleprops)
+* [`leftIcon`](#lefticon)
+* [`rightIcon`](#righticon)
+* [`leftAvatar`](#leftavatar)
+* [`rightAvatar`](#rightavatar)
+* [`leftElement`](#leftelement)
+* [`rightElement`](#rightelement)
+* [`switch`](#switch)
+* [`input`](#input)
+* [`buttonGroup`](#buttongroup)
+* [`checkbox`](#checkbox)
+* [`badge`](#badge)
+* [`disabled`](#disabled)
+* [`disabledStyle`](#disabledstyle)
+* [`topDivider`](#topdivider)
+* [`bottomDivider`](#bottomdivider)
+* [`scaleProps`](#scaleprops)
+* [`ViewComponent`](#viewcomponent)
+
+---
+
+# Reference
+
+### `component`
+
+|                             Type                              |  Default  |
+| :-----------------------------------------------------------: | :-------: |
+| View or TouchableHighlight if onPress method is added as prop | component |
+
+---
+
+### `containerStyle`
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `contentContainerStyle`
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `rightContentContainerStyle`
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `chevron`
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `chevronColor`
+
+|  Type  | Default |
+| :----: | :-----: |
+| string | #d1d1d6 |
+
+---
+
+### `checkmark`
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `checkmarkColor`
+
+|  Type  | Default |
+| :----: | :-----: |
+| string | #2089dc |
+
+---
+
+### `onPress`
+
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
+
+---
+
+### `onLongPress`
+
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
+
+---
+
+### `title`
+
+|           Type           | Default |
+| :----------------------: | :-----: |
+| string **OR** React node |  none   |
+
+---
+
+### `titleStyle`
+
+|    Type    | Default |
+| :--------: | :-----: |
+| Text style |  none   |
+
+---
+
+### `titleProps`
+
+|                                      Type                                       | Default |
+| :-----------------------------------------------------------------------------: | :-----: |
+| {[...Text props](https://facebook.github.io/react-native/docs/text.html#props)} |  none   |
+
+---
+
+### `subtitle`
+
+|           Type           | Default |
+| :----------------------: | :-----: |
+| string **OR** React node |  none   |
+
+---
+
+### `subtitleStyle`
+
+|    Type    | Default |
+| :--------: | :-----: |
+| Text style |  none   |
+
+---
+
+### `subtitleProps`
+
+|                                      Type                                       | Default |
+| :-----------------------------------------------------------------------------: | :-----: |
+| {[...Text props](https://facebook.github.io/react-native/docs/text.html#props)} |  none   |
+
+---
+
+### `rightTitle`
+
+|           Type           | Default |
+| :----------------------: | :-----: |
+| string **OR** React node |  none   |
+
+---
+
+### `rightTitleStyle`
+
+|    Type    | Default |
+| :--------: | :-----: |
+| Text style |  none   |
+
+---
+
+### `rightTitleProps`
+
+|                                      Type                                       | Default |
+| :-----------------------------------------------------------------------------: | :-----: |
+| {[...Text props](https://facebook.github.io/react-native/docs/text.html#props)} |  none   |
+
+---
+
+### `rightSubtitle`
+
+|           Type           | Default |
+| :----------------------: | :-----: |
+| string **OR** React node |  none   |
+
+---
+
+### `rightSubtitleStyle`
+
+|    Type    | Default |
+| :--------: | :-----: |
+| Text style |  none   |
+
+---
+
+### `rightSubtitleProps`
+
+|                                      Type                                       | Default |
+| :-----------------------------------------------------------------------------: | :-----: |
+| {[...Text props](https://facebook.github.io/react-native/docs/text.html#props)} |  none   |
+
+---
+
+### `leftIcon`
+
+|                                             Type                                              | Default |
+| :-------------------------------------------------------------------------------------------: | :-----: |
+| {[...Icon props](/react-native-elements/docs/icon.html#icon-props)}<br/>**OR**<br/> component |  none   |
+
+---
+
+### `rightIcon`
+
+|                                             Type                                              | Default |
+| :-------------------------------------------------------------------------------------------: | :-----: |
+| {[...Icon props](/react-native-elements/docs/icon.html#icon-props)}<br/>**OR**<br/> component |  none   |
+
+---
+
+### `leftAvatar`
+
+|                                                Type                                                 | Default |
+| :-------------------------------------------------------------------------------------------------: | :-----: |
+| {[...Avatar props](/react-native-elements/docs/avatar.html#avatar-props)}<br/>**OR**<br/> component |  none   |
+
+---
+
+### `rightAvatar`
+
+|                                                          Type                                                          | Default |
+| :--------------------------------------------------------------------------------------------------------------------: | :-----: |
+| View style (object){[...Avatar props](/react-native-elements/docs/avatar.html#avatar-props)}<br/>**OR**<br/> component |  none   |
+
+---
+
+### `leftElement`
+
+|    Type    | Default |
+| :--------: | :-----: |
+| React node |  none   |
+
+---
+
+### `rightElement`
+
+|    Type    | Default |
+| :--------: | :-----: |
+| React node |  none   |
+
+---
+
+### `switch`
+
+|                                        Type                                         | Default |
+| :---------------------------------------------------------------------------------: | :-----: |
+| {[...Switch props](https://facebook.github.io/react-native/docs/switch.html#props)} |  none   |
+
+---
+
+### `input`
+
+|                                  Type                                  | Default |
+| :--------------------------------------------------------------------: | :-----: |
+| {[...Input props](/react-native-elements/docs/input.html#input-props)} |  none   |
+
+---
+
+### `buttonGroup`
+
+|                                           Type                                            | Default |
+| :---------------------------------------------------------------------------------------: | :-----: |
+| {[...ButtonGroup props](/react-native-elements/docs/button_group.html#buttongroup-props)} |  none   |
+
+---
+
+### `checkbox`
+
+|                                      Type                                       | Default |
+| :-----------------------------------------------------------------------------: | :-----: |
+| {[...CheckBox props](/react-native-elements/docs/checkbox.html#checkbox-props)} |  none   |
+
+---
+
+### `badge`
+
+|                                  Type                                  | Default |
+| :--------------------------------------------------------------------: | :-----: |
+| {[...Badge props](/react-native-elements/docs/badge.html#badge-props)} |  none   |
+
+---
+
+### `disabled`
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  none   |
+
+---
+
+### `disabledStyle`
+
+|      Type      | Default |
+| :------------: | :-----: |
+| object (style) |  none   |
+
+---
+
+### `topDivider`
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `bottomDivider`
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `scaleProps`
+
+|                                    Type                                    | Default |
+| :------------------------------------------------------------------------: | :-----: |
+| {[...Scale props](https://github.com/kohver/react-native-touchable-scale)} |  none   |
+
+---
+
+### `ViewComponent`
+
+|   Type    | Default |
+| :-------: | :-----: |
+| component |  View   |
diff --git a/docs/lists.md b/docs/lists.md
deleted file mode 100644
index 8ac2203d69..0000000000
--- a/docs/lists.md
+++ /dev/null
@@ -1,912 +0,0 @@
----
-id: lists
-title: Lists
----
-
-![Lists](/react-native-elements/img/lists.png)
-
-#### Using Map Function. Implemented with avatar.
-
-```js
-import { List, ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-<List containerStyle={{marginBottom: 20}}>
-  {
-    list.map((l, i) => (
-      <ListItem
-        roundAvatar
-        avatar={{uri:l.avatar_url}}
-        key={i}
-        title={l.name}
-      />
-    ))
-  }
-</List>
-```
-
-#### Using Map Function. Implemented with link and icon.
-
-```js
-import { List, ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    title: 'Appointments',
-    icon: 'av-timer'
-  },
-  {
-    title: 'Trips',
-    icon: 'flight-takeoff'
-  },
-  ... // more items
-]
-
-<List>
-  {
-    list.map((item, i) => (
-      <ListItem
-        key={i}
-        title={item.title}
-        leftIcon={{name: item.icon}}
-      />
-    ))
-  }
-</List>
-```
-
-#### Using RN ListView. Implemented with link and avatar.
-
-```js
-import { List, ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-renderRow (rowData, sectionID) {
-  return (
-    <ListItem
-      roundAvatar
-      key={sectionID}
-      title={rowData.name}
-      subtitle={rowData.subtitle}
-      avatar={{uri:rowData.avatar_url}}
-    />
-  )
-}
-
-render () {
-  return (
-    <List>
-      <ListView
-        renderRow={this.renderRow}
-        dataSource={this.state.dataSource}
-      />
-    </List>
-  )
-}
-```
-
-#### Using RN ListView. Implemented with custom avatar component.
-
-```js
-import { List, ListItem } from 'react-native-elements'
-
-const list = [
-  {
-    name: 'Amy Farha',
-    subtitle: 'Vice President'
-  },
-  {
-    name: 'Chris Jackson',
-    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-    subtitle: 'Vice Chairman'
-  },
-  ... // more items
-]
-
-renderRow (rowData, sectionID) {
-  return (
-    <ListItem
-      avatar={<Avatar
-                rounded
-                source={rowData.avatar_url && {uri: rowData.avatar_url}}
-                title={rowData.name[0]}
-              />}
-      key={sectionID}
-      title={rowData.name}
-      subtitle={rowData.subtitle}
-    />
-  )
-}
-
-render () {
-  return (
-    <List>
-      <ListView
-        renderRow={this.renderRow}
-        dataSource={this.state.dataSource}
-      />
-    </List>
-  )
-}
-```
-
-#### ListItem implemented with custom View for Subtitle
-
-```js
-import { List, ListItem } from 'react-native-elements'
-
-render () {
-  return (
-    <List>
-      <ListItem
-        roundAvatar
-        title='Limited supply! Its like digital gold!'
-        subtitle={
-          <View style={styles.subtitleView}>
-            <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
-            <Text style={styles.ratingText}>5 months ago</Text>
-          </View>
-        }
-        avatar={require('../images/avatar1.jpg')}
-      />
-    </List>
-  )
-}
-
-styles = StyleSheet.create({
-  subtitleView: {
-    flexDirection: 'row',
-    paddingLeft: 10,
-    paddingTop: 5
-  },
-  ratingImage: {
-    height: 19.21,
-    width: 100
-  },
-  ratingText: {
-    paddingLeft: 10,
-    color: 'grey'
-  }
-})
-```
-
-### List Props
-
-* [`containerStyle`](#containerstyle)
-
----
-
-### `containerStyle`
-
-style the list container
-
-|      Type      |                                      Default                                       |
-| :------------: | :--------------------------------------------------------------------------------: |
-| object (style) | marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9 |
-
----
-
-### ListItem Props
-
-* [`avatar`](#avatar)
-* [`avatarContainerStyle`](#avatarcontainerstyle)
-* [`avatarOverlayContainerStyle`](#avataroverlaycontainerstyle)
-* [`avatarStyle`](#avatarstyle)
-* [`chevronColor`](#chevroncolor)
-* [`component`](#component)
-* [`containerStyle`](#containerstyle)
-* [`disabled`](#disabled)
-* [`disabledStyle`](#disabledstyle)
-* [`fontFamily`](#fontfamily)
-* [`hideChevron`](#hidechevron)
-* [`label`](#label)
-* [`leftIcon`](#lefticon)
-* [`leftIconOnLongPress`](#lefticononlongpress)
-* [`leftIconOnPress`](#lefticononpress)
-* [`leftIconUnderlayColor`](#lefticonunderlaycolor)
-* [`onLongPress`](#onlongpress)
-* [`onPress`](#onpress)
-* [`onPressRightIcon`](#onpressrighticon)
-* [`onSwitch`](#onswitch)
-* [`rightIcon`](#righticon)
-* [`rightTitle`](#righttitle)
-* [`rightTitleContainerStyle`](#righttitlecontainerstyle)
-* [`rightTitleNumberOfLines`](#righttitlenumberoflines)
-* [`rightTitleStyle`](#righttitlestyle)
-* [`roundAvatar`](#roundavatar)
-* [`subtitle`](#subtitle)
-* [`subtitleContainerStyle`](#subtitlecontainerstyle)
-* [`subtitleNumberOfLines`](#subtitlenumberoflines)
-* [`subtitleStyle`](#subtitlestyle)
-* [`switchButton`](#switchbutton)
-* [`switchDisabled`](#switchdisabled)
-* [`switched`](#switched)
-* [`switchOnTintColor`](#switchontintcolor)
-* [`switchThumbTintColor`](#switchthumbtintcolor)
-* [`switchTintColor`](#switchtintcolor)
-* [`textInput`](#textinput)
-* [`textInputAutoCapitalize`](#textinputautocapitalize)
-* [`textInputAutoCorrect`](#textinputautocorrect)
-* [`textInputAutoFocus`](#textinputautofocus)
-* [`textInputContainerStyle`](#textinputcontainerstyle)
-* [`textInputEditable`](#textinputeditable)
-* [`textInputKeyboardType`](#textinputkeyboardtype)
-* [`textInputMaxLength`](#textinputmaxlength)
-* [`textInputMultiline`](#textinputmultiline)
-* [`textInputOnBlur`](#textinputonblur)
-* [`textInputOnChangeText`](#textinputonchangetext)
-* [`textInputOnFocus`](#textinputonfocus)
-* [`textInputPlaceholder`](#textinputplaceholder)
-* [`textInputReturnKeyType`](#textinputreturnkeytype)
-* [`textInputSecure`](#textinputsecure)
-* [`textInputSelectTextOnFocus`](#textinputselecttextonfocus)
-* [`textInputStyle`](#textinputstyle)
-* [`textInputValue`](#textinputvalue)
-* [`title`](#title)
-* [`titleContainerStyle`](#titlecontainerstyle)
-* [`titleNumberOfLines`](#titlenumberoflines)
-* [`titleStyle`](#titlestyle)
-* [`underlayColor`](#underlaycolor)
-* [`wrapperStyle`](#wrapperstyle)
-
----
-
-# Reference
-
-### `avatar`
-
-left avatar (optional). This is the [React Native Image](https://facebook.github.io/react-native/docs/images.html) `source` prop. Avatar can be used in parallel to leftIcon if needed.
-
-|      Type       | Default |
-| :-------------: | :-----: |
-| object (source) |  none   |
-
----
-
-### `avatarContainerStyle`
-
-Avatar outer container styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `avatarOverlayContainerStyle`
-
-Avatar overlay container styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `avatarStyle`
-
-avatar styling (optional). This is the [React Native Image](https://facebook.github.io/react-native/docs/images.html) `style` prop
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `chevronColor`
-
-set chevron color
-
-|  Type  | Default |
-| :----: | :-----: |
-| string | #bdc6cf |
-
----
-
-### `component`
-
-replace element with custom element (optional)
-
-|         Type         |                            Default                            |
-| :------------------: | :-----------------------------------------------------------: |
-| React Native element | View or TouchableHighlight if onPress method is added as prop |
-
----
-
-### `containerStyle`
-
-additional main container styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `disabled`
-
-If true the user won't be able to perform any action on the list item. Default value is false.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `disabledStyle`
-
-Specific styling to be used when list item is disabled.
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `fontFamily`
-
-specify different font family
-
-|  Type  |                  Default                  |
-| :----: | :---------------------------------------: |
-| string | HelveticaNeue (iOS), Sans Serif (android) |
-
----
-
-### `hideChevron`
-
-set if you do not want a chevron (optional)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `label`
-
-add a label with your own styling by providing a label={<SomeComponent />} prop to ListItem
-
-|          Type          | Default |
-| :--------------------: | :-----: |
-| react native component |  none   |
-
----
-
-### `leftIcon`
-
-icon configuration for left icon (optional), either a name from the icon library (like material) or a React Native element like `Image`. leftIcon can be used in parallel to avatar if needed.
-
-|                                                         Type                                                          | Default |
-| :-------------------------------------------------------------------------------------------------------------------: | :-----: |
-| object {name, color, style, type} (type defaults to material icons) <br/><br/> **OR** <br/><br/> React Native element |  none   |
-
----
-
-### `leftIconOnLongPress`
-
-Attaches an onLongPress on left Icon
-
-| Type | Default  |
-| :--: | :------: |
-| none | function |
-
----
-
-### `leftIconOnPress`
-
-Attaches an onPress on left Icon
-
-| Type | Default  |
-| :--: | :------: |
-| none | function |
-
----
-
-### `leftIconUnderlayColor`
-
-Underlay color for left Icon
-
-| Type  | Default |
-| :---: | :-----: |
-| white | string  |
-
----
-
-### `onLongPress`
-
-onLongPress method for link (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onPress`
-
-onPress method for link (optional)
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `onPressRightIcon`
-
-Attaches an onPress on right Icon
-
-| Type | Default  |
-| :--: | :------: |
-| none | function |
-
----
-
-### `onSwitch`
-
-add a callback function when the switch is toggled
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |  none   |
-
----
-
-### `rightIcon`
-
-icon configuration for right icon (optional), either a name from the icon library (like material) or a React Native element like `Image`. Shows up unless hideChevron is set
-
-|                                                         Type                                                          |         Default         |
-| :-------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| object {name, color, style, type} (type defaults to material icons) <br/><br/> **OR** <br/><br/> React Native element | {name: 'chevron-right'} |
-
----
-
-### `rightTitle`
-
-provide a rightTitle to have a title show up on the right side of the button
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  none   |
-
----
-
-### `rightTitleContainerStyle`
-
-style the outer container of the rightTitle text
-
-|      Type      |                          Default                          |
-| :------------: | :-------------------------------------------------------: |
-| object (style) | flex: 1, alignItems: 'flex-end', justifyContent: 'center' |
-
----
-
-### `rightTitleNumberOfLines`
-
-Number of lines for Right Title
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    1    |
-
----
-
-### `rightTitleStyle`
-
-style the text of the rightTitle text
-
-|      Type      |             Default              |
-| :------------: | :------------------------------: |
-| object (style) | marginRight: 5, color: '#bdc6cf' |
-
----
-
-### `roundAvatar`
-
-make left avatar round
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `subtitle`
-
-subtitle text or custom view (optional)
-
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string, number or object |  none   |
-
----
-
-### `subtitleContainerStyle`
-
-provide styling for subtitle container
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `subtitleNumberOfLines`
-
-Number of lines for Subtitle
-
-| Type | Default |
-| :--: | :-----: |
-|  1   | number  |
-
----
-
-### `subtitleStyle`
-
-additional subtitle styling (optional )
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `switchButton`
-
-add a switch to the right side of your component (Note: in order to display the switchButton you need to add the `hideChevron` prop as well. Snack demo here: https://snack.expo.io/SJPQNScUZ)
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |  false  |
-
----
-
-### `switchDisabled`
-
-If true the user won't be able to toggle the switch. Default value is false.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `switched`
-
-The value of the switch. If true the switch will be turned on. Default value is false.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `switchOnTintColor`
-
-Background color when the switch is turned on.
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `switchThumbTintColor`
-
-Color of the foreground switch grip.
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `switchTintColor`
-
-Border color on iOS and background color on Android when the switch is turned off.
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `textInput`
-
-Whether to have the right title area be an input text component.
-
-|      Type      | Default |
-| :------------: | :-----: |
-| PropTypes.bool |         |
-
----
-
-### `textInputAutoCapitalize`
-
-Can be one of the following: 'none', 'sentences', 'words', 'characters'.
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `textInputAutoCorrect`
-
-Can tell TextInput to automatically capitalize certain characters.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `textInputAutoFocus`
-
-If true, focuses the input on componentDidMount. The default value is false.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `textInputContainerStyle`
-
-Style for the container surrounding the input text
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |         |
-
----
-
-### `textInputEditable`
-
-If false, text is not editable. The default value is true.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `textInputKeyboardType`
-
-Can be one of the following: 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search'
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `textInputMaxLength`
-
-Limits the maximum number of characters that can be entered.
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |         |
-
----
-
-### `textInputMultiline`
-
-If true, the text input can be multiple lines. The default value is false.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `textInputOnBlur`
-
-Callback that is called when the text input is blurred.
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |         |
-
----
-
-### `textInputOnChangeText`
-
-Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |         |
-
----
-
-### `textInputOnFocus`
-
-Callback that is called when the text input is focused.
-
-|   Type   | Default |
-| :------: | :-----: |
-| function |         |
-
----
-
-### `textInputPlaceholder`
-
-Placeholder for the text input
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `textInputReturnKeyType`
-
-Determines how the return key should look. For more info see [the React Native docs](https://facebook.github.io/react-native/docs/textinput.html#returnkeytype)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `textInputSecure`
-
-If true, obscures the text entered so that sensitive text like passwords stay secure.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `textInputSelectTextOnFocus`
-
-If true, all text will automatically be selected on focus.
-
-|  Type   | Default |
-| :-----: | :-----: |
-| boolean |         |
-
----
-
-### `textInputStyle`
-
-Style for the input text
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |         |
-
----
-
-### `textInputValue`
-
-Manually set value of the input
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |         |
-
----
-
-### `title`
-
-main title for list item, can be text or custom view (required)
-
-|           Type           | Default |
-| :----------------------: | :-----: |
-| string, number or object |  none   |
-
----
-
-### `titleContainerStyle`
-
-provide styling for title container
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `titleNumberOfLines`
-
-Number of lines for Title
-
-|  Type  | Default |
-| :----: | :-----: |
-| number |    1    |
-
----
-
-### `titleStyle`
-
-additional title styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-### `underlayColor`
-
-define underlay color for TouchableHighlight (optional)
-
-|  Type  | Default |
-| :----: | :-----: |
-| string |  white  |
-
----
-
-### `wrapperStyle`
-
-additional wrapper styling (optional)
-
-|      Type      | Default |
-| :------------: | :-----: |
-| object (style) |  none   |
-
----
-
-## Badges
-
-![Badges](/react-native-elements/img/list-badges.jpeg)
-
-Example badge usage
-
-```js
-<ListItem
-  ...
-  badge={{ value: 3, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
-/>
-
-<ListItem
-  ...
-  badge={{ element: <MyCustomElement> }}
-/>
-```
-
-### Badge Props
-
-* [`badge`](#badge)
-
----
-
-### `badge`
-
-add a badge to the ListItem by using this prop
-
-|                                                                                                                          Type                                                                                                                           | Default |
-| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
-| object, accepts the following properties: value (string), containerStyle (object), textStyle (object). You can override the default badge by providing your own component with it's own styling by providing badge={{ element: <YourCustomElement /> }} |  none   |
diff --git a/package.json b/package.json
index bf01cda63b..b341304da0 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.times": "^4.3.2",
     "opencollective": "^1.0.3",
+    "react-native-touchable-scale": "2.0.0",
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
@@ -63,6 +64,7 @@
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-native": "0.52.2",
+    "react-native-touchable-scale": "^2.0.0",
     "react-native-vector-icons": "^4.4.2",
     "react-test-renderer": "16.2.0",
     "webpack": "^2.2.1"
diff --git a/src/divider/Divider.js b/src/divider/Divider.js
index bcb0545db1..3509fb27c6 100644
--- a/src/divider/Divider.js
+++ b/src/divider/Divider.js
@@ -1,21 +1,20 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import colors from '../config/colors';
 import ViewPropTypes from '../config/ViewPropTypes';
 
-let styles = {};
+const Divider = ({ style }) => <View style={[styles.container, style]} />;
 
-const Divider = ({ style }) =>
-  <View style={[styles.container, style && style]} />;
+const hairlineWidth = StyleSheet.hairlineWidth;
 
 Divider.propTypes = {
   style: ViewPropTypes.style,
 };
 
-styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
-    height: 1,
-    backgroundColor: colors.grey5,
+    // Darker color if hairlineWidth is not thin enough
+    backgroundColor: hairlineWidth < 1 ? '#BCBBC1' : 'rgba(0, 0, 0, 0.12)',
+    height: hairlineWidth,
   },
 });
 
diff --git a/src/divider/__tests__/__snapshots__/Divider.js.snap b/src/divider/__tests__/__snapshots__/Divider.js.snap
index 5496ef4387..9bfbebd599 100644
--- a/src/divider/__tests__/__snapshots__/Divider.js.snap
+++ b/src/divider/__tests__/__snapshots__/Divider.js.snap
@@ -5,8 +5,8 @@ exports[`Divider Component should render with style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#e1e8ee",
-        "height": 1,
+        "backgroundColor": "#BCBBC1",
+        "height": 0.5,
       },
       Object {
         "backgroundColor": "blue",
@@ -21,8 +21,8 @@ exports[`Divider Component should render without issues 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#e1e8ee",
-        "height": 1,
+        "backgroundColor": "#BCBBC1",
+        "height": 0.5,
       },
       undefined,
     ]
diff --git a/src/index.js b/src/index.js
index d33a5bdf1c..d413f362bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,6 @@ import Button from './buttons/Button';
 import Input from './input/Input';
 
 import Icon from './icons/Icon';
-import List from './list/List';
 import ListItem from './list/ListItem';
 import SocialIcon from './social/SocialIcon';
 import Overlay from './overlay/Overlay';
@@ -41,7 +40,6 @@ export {
   ButtonGroup,
   Card,
   Input,
-  List,
   ListItem,
   PricingCard,
   SocialIcon,
diff --git a/src/input/Input.js b/src/input/Input.js
index b24ad585f4..ba099cc79b 100644
--- a/src/input/Input.js
+++ b/src/input/Input.js
@@ -55,6 +55,7 @@ class Input extends Component {
   render() {
     const {
       containerStyle,
+      inputContainerStyle,
       leftIcon,
       leftIconContainerStyle,
       rightIcon,
@@ -72,7 +73,7 @@ class Input extends Component {
     });
 
     return (
-      <View>
+      <View style={containerStyle}>
         {label && (
           <Text style={[styles.label, labelStyle]}>
             {label}
@@ -80,9 +81,9 @@ class Input extends Component {
         )}
         <Animated.View
           style={[
-            styles.container,
+            styles.inputContainer,
             { width: SCREEN_WIDTH - 100, height: 40 },
-            containerStyle,
+            inputContainerStyle,
             { transform: [{ translateX }] },
           ]}
         >
@@ -101,10 +102,7 @@ class Input extends Component {
             {...attributes}
             ref={this._inputRef}
             underlineColorAndroid="transparent"
-            style={[
-              styles.input,
-              inputStyle,
-            ]}
+            style={[styles.input, inputStyle]}
           />
           {rightIcon && (
             <View style={[styles.iconContainer, rightIconContainerStyle]}>
@@ -124,6 +122,7 @@ class Input extends Component {
 
 Input.propTypes = {
   containerStyle: ViewPropTypes.style,
+  inputContainerStyle: ViewPropTypes.style,
 
   leftIcon: PropTypes.node,
   leftIconContainerStyle: ViewPropTypes.style,
@@ -142,7 +141,7 @@ Input.propTypes = {
 };
 
 const styles = StyleSheet.create({
-  container: {
+  inputContainer: {
     flexDirection: 'row',
     borderBottomWidth: 1,
     borderColor: colors.grey3,
diff --git a/src/list/List.js b/src/list/List.js
deleted file mode 100644
index 9f3b6d27bf..0000000000
--- a/src/list/List.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import colors from '../config/colors';
-import ViewPropTypes from '../config/ViewPropTypes';
-
-const List = props => {
-  const { children, containerStyle, ...attributes } = props;
-  return (
-    <View
-      {...attributes}
-      style={[styles.listContainer, containerStyle && containerStyle]}
-    >
-      {children}
-    </View>
-  );
-};
-
-List.propTypes = {
-  children: PropTypes.any,
-  containerStyle: ViewPropTypes.style,
-};
-
-const styles = StyleSheet.create({
-  listContainer: {
-    marginTop: 20,
-    borderTopWidth: 1,
-    borderColor: colors.greyOutline,
-    backgroundColor: '#fff',
-  },
-});
-
-export default List;
diff --git a/src/list/ListItem.js b/src/list/ListItem.js
index 399258eaaf..3491b9df2a 100644
--- a/src/list/ListItem.js
+++ b/src/list/ListItem.js
@@ -1,453 +1,337 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {
-  View,
-  StyleSheet,
-  TouchableHighlight,
-  TouchableOpacity,
   Platform,
+  StyleSheet,
   Switch,
-  Image,
-  TextInput,
+  TouchableOpacity,
+  View,
 } from 'react-native';
+import TouchableScale from 'react-native-touchable-scale'
 import Avatar from '../avatar/Avatar';
 import Badge from '../badge/badge';
+import CheckBox from '../checkbox/CheckBox';
 import Icon from '../icons/Icon';
 import Text from '../text/Text';
-import colors from '../config/colors';
-import fonts from '../config/fonts';
-import normalize from '../helpers/normalizeText';
+import ButtonGroup from '../buttons/ButtonGroup';
+import Input from '../input/Input';
+import Divider from '../divider/Divider';
 import ViewPropTypes from '../config/ViewPropTypes';
 
+import colors from '../config/colors'
+
+const ANDROID_SECONDARY = 'rgba(0, 0, 0, 0.54)';
+
 const ListItem = props => {
   const {
-    onPress,
     title,
-    leftIcon,
-    rightIcon,
-    leftIconOnPress,
-    leftIconOnLongPress,
-    leftIconUnderlayColor,
-    leftIconContainerStyle,
-    avatarStyle,
-    avatarContainerStyle,
-    avatarOverlayContainerStyle,
-    underlayColor,
+    titleStyle,
+    titleProps,
     subtitle,
     subtitleStyle,
+    subtitleProps,
     containerStyle,
-    wrapperStyle,
-    titleNumberOfLines,
-    titleStyle,
-    titleContainerStyle,
-    hideChevron,
-    chevronColor,
-    roundAvatar,
     component,
-    fontFamily,
+    leftIcon,
+    leftAvatar,
+    leftElement,
+    rightIcon,
+    rightAvatar,
+    rightElement,
     rightTitle,
-    rightTitleContainerStyle,
     rightTitleStyle,
-    rightTitleNumberOfLines,
-    subtitleContainerStyle,
-    subtitleNumberOfLines,
+    rightTitleProps,
+    rightSubtitle,
+    rightSubtitleStyle,
+    rightSubtitleProps,
+    input,
+    buttonGroup,
+    switch: switchProps, // switch is a reserved keyword
+    checkBox,
     badge,
-    label,
-    onLongPress,
-    switchButton,
-    onSwitch,
-    switchDisabled,
-    switchOnTintColor,
-    switchThumbTintColor,
-    switchTintColor,
-    switched,
-    textInput,
-    textInputAutoCapitalize,
-    textInputAutoCorrect,
-    textInputAutoFocus,
-    textInputEditable,
-    textInputKeyboardType,
-    textInputMaxLength,
-    textInputMultiline,
-    textInputOnChangeText,
-    textInputOnFocus,
-    textInputOnBlur,
-    textInputSelectTextOnFocus,
-    textInputReturnKeyType,
-    textInputValue,
-    textInputSecure,
-    textInputStyle,
-    textInputContainerStyle,
-    textInputPlaceholder,
-    onPressRightIcon,
+    chevron,
+    chevronColor,
+    contentContainerStyle,
+    rightContentContainerStyle,
+    checkmark,
+    checkmarkColor,
     disabled,
     disabledStyle,
+    bottomDivider,
+    topDivider,
+    scaleProps,
+    linearGradientProps,
+    ViewComponent = linearGradientProps && global.Expo
+    ? global.Expo.LinearGradient
+    : View,
     ...attributes
   } = props;
 
-  let { avatar } = props;
-
-  let Component = onPress || onLongPress ? TouchableHighlight : View;
-  let LeftIconWrapper =
-    leftIconOnPress || leftIconOnLongPress ? TouchableHighlight : View;
-  if (component) {
-    Component = component;
-  }
-  if (typeof avatar === 'string') {
-    avatar = { uri: avatar };
-  }
+  const { onPress, onLongPress } = props;
+  let Component =
+    component || (scaleProps ? TouchableScale : (onPress || onLongPress ? TouchableOpacity : View));
+  
   return (
-    <Component
-      {...attributes}
-      onLongPress={onLongPress}
-      onPress={onPress}
-      disabled={disabled}
-      underlayColor={underlayColor}
-      style={[
-        styles.container,
-        containerStyle && containerStyle,
-        disabled && styles.disabled,
-        disabled && disabledStyle && disabledStyle,
-      ]}
-    >
-      <View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
-        {React.isValidElement(leftIcon)
-          ? leftIcon
-          : leftIcon &&
-            leftIcon.name && (
-              <LeftIconWrapper
-                onLongPress={leftIconOnLongPress}
-                onPress={leftIconOnPress}
-                disabled={disabled}
-                underlayColor={leftIconUnderlayColor}
-                style={[
-                  styles.iconStyle,
-                  leftIconContainerStyle && leftIconContainerStyle,
-                ]}
-              >
-                <View>
-                  <Icon
-                    type={leftIcon.type}
-                    iconStyle={[styles.icon, leftIcon.style && leftIcon.style]}
-                    name={leftIcon.name}
-                    color={leftIcon.color || colors.grey4}
-                    size={leftIcon.size || 24}
-                  />
-                </View>
-              </LeftIconWrapper>
-            )}
-        {avatar && React.isValidElement(avatar)
-          ? avatar
-          : avatar &&
-            !React.isValidElement(avatar) && (
-              <Avatar
-                avatarStyle={avatarStyle && avatarStyle}
-                containerStyle={avatarContainerStyle && avatarContainerStyle}
-                overlayContainerStyle={
-                  avatarOverlayContainerStyle && avatarOverlayContainerStyle
-                }
-                rounded={roundAvatar}
-                source={avatar}
-              />
-            )}
-        <View style={styles.titleSubtitleContainer}>
-          <View style={titleContainerStyle}>
-            {title !== null &&
-            (typeof title === 'string' || typeof title === 'number') ? (
-              <Text
-                numberOfLines={titleNumberOfLines}
-                style={[
-                  styles.title,
-                  !leftIcon && { marginLeft: 10 },
-                  titleStyle && titleStyle,
-                  fontFamily && { fontFamily },
-                ]}
-              >
-                {title}
-              </Text>
-            ) : (
-              <View>{title}</View>
-            )}
-          </View>
-          <View style={subtitleContainerStyle}>
-            {subtitle !== null &&
-            (typeof subtitle === 'string' || typeof subtitle === 'number') ? (
-              <Text
-                numberOfLines={subtitleNumberOfLines}
-                style={[
-                  styles.subtitle,
-                  !leftIcon && { marginLeft: 10 },
-                  subtitleStyle && subtitleStyle,
-                  fontFamily && { fontFamily },
-                ]}
-              >
-                {subtitle}
-              </Text>
-            ) : (
-              <View>{subtitle}</View>
-            )}
-          </View>
-        </View>
-        {!!rightTitle &&
-          rightTitle !== '' &&
-          !textInput && (
-            <View
-              style={[styles.rightTitleContainer, rightTitleContainerStyle]}
-            >
-              <Text
-                numberOfLines={rightTitleNumberOfLines}
-                style={[styles.rightTitleStyle, rightTitleStyle]}
-              >
-                {rightTitle}
-              </Text>
-            </View>
-          )}
-        {textInput && (
-          <View
-            style={[
-              styles.rightTitleContainer,
-              styles.textInputContainerStyle,
-              textInputContainerStyle,
+    <Component {...attributes} {...scaleProps} disabled={disabled}>
+      {topDivider && <Divider />}
+      <PadView
+        Component={ViewComponent}
+        {...linearGradientProps}
+        style={[
+          styles.container,
+          (buttonGroup || switchProps) && { paddingVertical: 8 },
+          containerStyle,
+          disabled && disabledStyle,
+        ]}
+      >
+        {renderNode(leftElement)}
+        {renderIcon(leftIcon)}
+        {renderAvatar(leftAvatar)}
+        {(title || subtitle) && <View style={[styles.contentContainer, contentContainerStyle]}>
+          {renderNode(title, titleProps, [styles.title, titleStyle])}
+          {renderNode(subtitle, subtitleProps, [styles.subtitle, subtitleStyle])}
+        </View>}
+        {(rightTitle||rightSubtitle) && <View style={[styles.rightContentContainer, rightContentContainerStyle]}>
+          {renderNode(rightTitle, rightTitleProps, [styles.title, styles.rightTitle, rightTitleStyle])}
+          {renderNode(rightSubtitle, rightSubtitleProps, [styles.subtitle, styles.rightSubtitle, rightSubtitleStyle])}
+        </View>}
+        {input && (
+          <Input
+            {...input}
+            inputStyle={[styles.input, input && input.inputStyle]}
+            inputContainerStyle={[
+              styles.inputContentContainer,
+              input && input.inputContainerStyle,
+            ]}
+            containerStyle={[
+              styles.inputContainer,
+              input && input.containerStyle,
+            ]}
+          />
+        )}
+        {switchProps && <Switch {...switchProps} />}
+        {checkBox && (
+          <CheckBox
+            {...checkBox}
+            containerStyle={[
+              styles.checkboxContainer,
+              checkBox && checkBox.containerStyle,
+            ]}
+          />
+        )}
+        {badge && <Badge {...badge} />}
+        {buttonGroup && (
+          <ButtonGroup
+            {...buttonGroup}
+            containerStyle={[
+              styles.buttonGroupContainer,
+              buttonGroup && buttonGroup.containerStyle,
             ]}
-          >
-            <TextInput
-              style={[styles.textInputStyle, textInputStyle]}
-              underlineColorAndroid={'transparent'}
-              defaultValue={rightTitle}
-              value={textInputValue}
-              placeholder={textInputPlaceholder}
-              autoCapitalize={textInputAutoCapitalize}
-              autoCorrect={textInputAutoCorrect}
-              autoFocus={textInputAutoFocus}
-              editable={disabled ? false : textInputEditable}
-              keyboardType={textInputKeyboardType}
-              maxLength={textInputMaxLength}
-              multiline={textInputMultiline}
-              onChangeText={textInputOnChangeText}
-              onFocus={textInputOnFocus}
-              onBlur={textInputOnBlur}
-              secureTextEntry={textInputSecure}
-              selectTextOnFocus={textInputSelectTextOnFocus}
-              returnKeyType={textInputReturnKeyType}
-            />
-          </View>
+          />
         )}
-        {badge && !rightTitle && <Badge {...badge} />}
-        {!hideChevron &&
-          (React.isValidElement(rightIcon) ? (
-            rightIcon
-          ) : (
-            <TouchableOpacity
-              onPress={onPressRightIcon}
-              disabled={disabled ? disabled : !onPressRightIcon}
-              style={styles.chevronContainer}
-            >
-              <Icon
-                type={rightIcon.type}
-                iconStyle={rightIcon.style}
-                size={rightIcon.size || 28}
-                name={rightIcon.name || 'chevron-right'}
-                color={rightIcon.color || chevronColor}
-              />
-            </TouchableOpacity>
-          ))}
-        {switchButton &&
-          hideChevron && (
-            <View style={styles.switchContainer}>
-              <Switch
-                onValueChange={onSwitch}
-                disabled={disabled ? disabled : switchDisabled}
-                onTintColor={switchOnTintColor}
-                thumbTintColor={switchThumbTintColor}
-                tintColor={switchTintColor}
-                value={switched}
-              />
-            </View>
-          )}
-        {label && label}
-      </View>
+        {renderAvatar(rightAvatar)}
+        {renderIcon(rightIcon)}
+        {renderNode(rightElement)}
+        {checkmark && <Checkmark color={checkmarkColor} />}
+        {chevron && <Chevron color={chevronColor} />}
+      </PadView>
+      {bottomDivider && <Divider />}
     </Component>
   );
 };
 
-ListItem.defaultProps = {
-  underlayColor: 'white',
-  leftIconUnderlayColor: 'white',
-  chevronColor: colors.grey4,
-  rightIcon: { name: 'chevron-right' },
-  hideChevron: false,
-  roundAvatar: false,
-  switchButton: false,
-  textInputEditable: true,
-  titleNumberOfLines: 1,
-  subtitleNumberOfLines: 1,
-  rightTitleNumberOfLines: 1,
-  disabled: false,
-};
+const Chevron = ({ color }) => (
+  <Icon
+    type={Platform.OS === 'ios' ? 'ionicon' : 'material'}
+    name={Platform.OS === 'ios' ? 'ios-arrow-forward' : 'keyboard-arrow-right'}
+    size={16}
+    color={color}
+  />
+);
 
-ListItem.propTypes = {
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.object,
-  ]),
-  avatar: PropTypes.any,
-  icon: PropTypes.any,
-  onPress: PropTypes.func,
-  rightIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
-  underlayColor: PropTypes.string,
-  subtitle: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.object,
-  ]),
-  subtitleStyle: PropTypes.any,
-  subtitleNumberOfLines: PropTypes.number,
-  containerStyle: PropTypes.any,
-  wrapperStyle: PropTypes.any,
-  titleStyle: PropTypes.any,
-  titleContainerStyle: PropTypes.any,
-  titleNumberOfLines: PropTypes.number,
-  hideChevron: PropTypes.bool,
-  chevronColor: PropTypes.string,
-  roundAvatar: PropTypes.bool,
-  badge: PropTypes.any,
-  switchButton: PropTypes.bool,
-  onSwitch: PropTypes.func,
-  switchDisabled: PropTypes.bool,
-  switchOnTintColor: PropTypes.string,
-  switchThumbTintColor: PropTypes.string,
-  switchTintColor: PropTypes.string,
-  switched: PropTypes.bool,
-  textInput: PropTypes.bool,
-  textInputAutoCapitalize: PropTypes.oneOf([
-    'none',
-    'sentences',
-    'words',
-    'characters',
-  ]),
-  textInputAutoCorrect: PropTypes.bool,
-  textInputAutoFocus: PropTypes.bool,
-  textInputEditable: PropTypes.bool,
-  textInputKeyboardType: PropTypes.oneOf([
-    'default',
-    'email-address',
-    'numeric',
-    'phone-pad',
-    'ascii-capable',
-    'numbers-and-punctuation',
-    'url',
-    'number-pad',
-    'name-phone-pad',
-    'decimal-pad',
-    'twitter',
-    'web-search',
-  ]),
-  textInputMaxLength: PropTypes.number,
-  textInputMultiline: PropTypes.bool,
-  textInputOnChangeText: PropTypes.func,
-  textInputOnFocus: PropTypes.func,
-  textInputOnBlur: PropTypes.func,
-  textInputSelectTextOnFocus: PropTypes.bool,
-  textInputReturnKeyType: PropTypes.string,
-  textInputValue: PropTypes.string,
-  textInputSecure: PropTypes.bool,
-  textInputStyle: PropTypes.any,
-  textInputContainerStyle: PropTypes.any,
-  textInputPlaceholder: PropTypes.string,
-  component: PropTypes.any,
-  fontFamily: PropTypes.string,
-  rightTitle: PropTypes.string,
-  rightTitleContainerStyle: ViewPropTypes.style,
-  rightTitleStyle: Text.propTypes.style,
-  rightTitleNumberOfLines: PropTypes.number,
-  subtitleContainerStyle: ViewPropTypes.style,
-  label: PropTypes.any,
-  onLongPress: PropTypes.func,
-  leftIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
-  leftIconOnPress: PropTypes.func,
-  leftIconOnLongPress: PropTypes.func,
-  leftIconUnderlayColor: PropTypes.string,
-  leftIconContainerStyle: ViewPropTypes.style,
-  avatarStyle: Image.propTypes.style,
-  avatarContainerStyle: ViewPropTypes.style,
-  avatarOverlayContainerStyle: ViewPropTypes.style,
-  onPressRightIcon: PropTypes.func,
-  disabled: PropTypes.bool,
-  disabledStyle: ViewPropTypes.style,
-};
+const Checkmark = ({ color }) => (
+  <Icon
+    type={Platform.OS === 'ios' ? 'ionicon' : 'material'}
+    name={Platform.OS === 'ios' ? 'ios-checkmark' : 'check'}
+    size={Platform.OS === 'ios' ? 34 : 20}
+    color={color}
+    iconStyle={styles.checkmarkIcon}
+  />
+);
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-    borderBottomColor: colors.greyOutline,
-    borderBottomWidth: 1,
-    backgroundColor: 'transparent',
-  },
-  wrapper: {
+    ...Platform.select({
+      ios: {
+        padding: 14,
+      },
+      android: {
+        padding: 16,
+      },
+    }),
     flexDirection: 'row',
-    marginLeft: 10,
     alignItems: 'center',
-  },
-  iconStyle: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  icon: {
-    marginRight: 8,
+    backgroundColor: 'white',
   },
   title: {
-    fontSize: normalize(14),
-    color: colors.grey1,
+    backgroundColor: 'transparent',
+    ...Platform.select({
+      ios: {
+        fontSize: 17,
+      },
+      android: {
+        fontSize: 16,
+      },
+    }),
   },
   subtitle: {
-    color: colors.grey3,
-    fontSize: normalize(12),
-    marginTop: 1,
+    backgroundColor: 'transparent',
     ...Platform.select({
       ios: {
-        fontWeight: '600',
+        fontSize: 15,
       },
       android: {
-        ...fonts.android.bold,
+        color: ANDROID_SECONDARY,
+        fontSize: 14,
       },
     }),
   },
-  titleSubtitleContainer: {
-    justifyContent: 'center',
+  contentContainer: {
     flex: 1,
-  },
-  chevronContainer: {
-    alignItems: 'flex-end',
     justifyContent: 'center',
   },
-  switchContainer: {
-    alignItems: 'flex-end',
+  rightContentContainer: {
+    flex: 0.5,
     justifyContent: 'center',
-    marginRight: 5,
-  },
-  rightTitleContainer: {
-    flex: 1,
     alignItems: 'flex-end',
-    justifyContent: 'center',
   },
-  rightTitleStyle: {
-    marginRight: 5,
-    color: colors.grey4,
+  inputContainer: {
+    flex: 1,
   },
-  textInputContainerStyle: {
-    alignItems: null,
+  inputContentContainer: {
+    flex: 1,
+    borderBottomWidth: 0,
+    width: null,
+    height: null,
   },
-  textInputStyle: {
-    height: 20,
+  input: {
     flex: 1,
     textAlign: 'right',
+    width: null,
+    height: null,
+    marginLeft: 0,
+  },
+  checkboxContainer: {
+    margin: 0,
+    marginRight: 0,
+    marginLeft: 0,
+    padding: 0,
+  },
+  buttonGroupContainer: {
+    flex: 1,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  rightTitle: {
+    color: ANDROID_SECONDARY,
+  },
+  rightSubtitle: {
+    color: ANDROID_SECONDARY,
   },
-  disabled: {
-    opacity: 0.5,
+  checkmarkIcon: {
+    position: 'absolute',
   },
 });
 
+const nodeOrObject = PropTypes.oneOfType([PropTypes.node, PropTypes.object])
+ListItem.propTypes = {
+  containerStyle: ViewPropTypes.style,
+  contentContainerStyle: ViewPropTypes.style,
+  rightContentContainerStyle: ViewPropTypes.style,
+  component: PropTypes.element,
+  onPress: PropTypes.func,
+  onLongPress: PropTypes.func,
+  title: PropTypes.node,
+  titleStyle: Text.propTypes.style,
+  titleProps: PropTypes.object,
+  subtitle: PropTypes.node,
+  subtitleStyle: Text.propTypes.style,
+  subtitleProps: PropTypes.object,
+  leftIcon: nodeOrObject,
+  leftAvatar: nodeOrObject,
+  leftElement: PropTypes.element,
+  rightIcon: nodeOrObject,
+  rightAvatar: nodeOrObject,
+  rightElement: PropTypes.element,
+  rightTitle: PropTypes.node,
+  rightTitleStyle: Text.propTypes.style,
+  rightTitleProps: PropTypes.object,
+  rightSubtitle: PropTypes.node,
+  rightSubtitleStyle: Text.propTypes.style,
+  rightSubtitleProps: PropTypes.object,
+  input: PropTypes.object,
+  buttonGroup: PropTypes.object,
+  switch: PropTypes.object,
+  checkBox: PropTypes.object,
+  badge: PropTypes.object,
+  chevron: PropTypes.bool,
+  chevronColor: PropTypes.string,
+  checkmark: PropTypes.bool,
+  checkmarkColor: PropTypes.string,
+  disabled: PropTypes.bool,
+  disabledStyle: ViewPropTypes.style,
+  topDivider: PropTypes.bool,
+  bottomDivider: PropTypes.bool,
+};
+
+ListItem.defaultProps = {
+  chevronColor: '#D1D1D6',
+  checkmarkColor: colors.primary,
+};
+
+const PadView = ({ children, pad = 16, Component, ...props }) => {
+  const childrens = React.Children.toArray(children);
+  const length = childrens.length;
+  const Container = Component || View
+  return (
+    <Container {...props}>
+      {React.Children.map(
+        childrens,
+        (child, index) =>
+          child && [child, index !== length - 1 && <View width={pad} />]
+      )}
+    </Container>
+  );
+};
+
+const renderAvatar = content =>
+  content == null ? null : React.isValidElement(content) ? (
+    content
+  ) : (
+    <Avatar width={40} height={40} rounded {...content} />
+  );
+
+const renderIcon = content =>
+  content == null ? null : React.isValidElement(content) ? (
+    content
+  ) : (
+    <Icon
+      color={Platform.OS === 'ios' ? null : ANDROID_SECONDARY}
+      size={24}
+      {...content}
+      containerStyle={content && content.containerStyle}
+    />
+  );
+
+const renderNode = (content, props, style) =>
+  content == null ? null : React.isValidElement(content) ? (
+    content
+  ) : (
+    <Text {...props} style={[style, props && props.style]}>
+      {content}
+    </Text>
+  );
+
 export default ListItem;
diff --git a/src/list/__tests__/List.js b/src/list/__tests__/List.js
deleted file mode 100644
index 5f354e5db6..0000000000
--- a/src/list/__tests__/List.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import List from '../List';
-import ListItem from '../ListItem';
-
-describe('List component', () => {
-  it('should render without issues', () => {
-    const component = shallow(<List />);
-
-    expect(component.length).toBe(1);
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('should render children', () => {
-    const component = shallow(
-      <List containerStyle={{ backgroundColor: 'peru' }}>
-        <ListItem />
-      </List>
-    );
-
-    expect(component.find('ListItem').length).toBe(1);
-  });
-});
diff --git a/src/list/__tests__/ListItem.js b/src/list/__tests__/ListItem.js
index 5e26368671..58b52b8672 100644
--- a/src/list/__tests__/ListItem.js
+++ b/src/list/__tests__/ListItem.js
@@ -15,9 +15,8 @@ describe('ListItem component', () => {
   it('should render with avatar', () => {
     const component = shallow(
       <ListItem
-        avatar="avatar_uri"
+        avatar={{ source: 'avatar_uri' }}
         containerStyle={{ backgroundColor: 'peru' }}
-        wrapperStyle={{ backgroundColor: 'peru' }}
       />
     );
 
@@ -34,7 +33,6 @@ describe('ListItem component', () => {
           color: 'red',
           size: 20,
         }}
-        wrapperStyle={{ backgroundColor: 'peru' }}
       />
     );
 
@@ -44,10 +42,7 @@ describe('ListItem component', () => {
 
   it('should render with left icon component', () => {
     const component = shallow(
-      <ListItem
-        leftIcon={<Text>I'm left icon</Text>}
-        wrapperStyle={{ backgroundColor: 'peru' }}
-      />
+      <ListItem leftIcon={<Text>I'm left icon</Text>} />
     );
 
     expect(component.length).toBe(1);
@@ -56,10 +51,7 @@ describe('ListItem component', () => {
 
   it('should render with right icon component', () => {
     const component = shallow(
-      <ListItem
-        rightIcon={<Text>I'm right icon</Text>}
-        wrapperStyle={{ backgroundColor: 'peru' }}
-      />
+      <ListItem rightIcon={<Text>I'm right icon</Text>} />
     );
 
     expect(component.length).toBe(1);
@@ -72,10 +64,8 @@ describe('ListItem component', () => {
         title="title test"
         subtitle="title test"
         rightTitle="title"
-        wrapperStyle={{ backgroundColor: 'peru' }}
         titleStyle={{ backgroundColor: 'peru' }}
         subtitleStyle={{ backgroundColor: 'peru' }}
-        fontFamily="arial"
       />
     );
 
@@ -83,9 +73,9 @@ describe('ListItem component', () => {
     expect(toJson(component)).toMatchSnapshot();
   });
 
-  it('should render with textInput', () => {
+  it('should render with switch', () => {
     const component = shallow(
-      <ListItem textInput hideChevron switchButton fontFamily="arial" />
+      <ListItem bottomDivider chevron switch={{ value: true }} />
     );
 
     expect(component.length).toBe(1);
diff --git a/src/list/__tests__/__snapshots__/List.js.snap b/src/list/__tests__/__snapshots__/List.js.snap
deleted file mode 100644
index 27e0f835c4..0000000000
--- a/src/list/__tests__/__snapshots__/List.js.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`List component should render without issues 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "backgroundColor": "#fff",
-        "borderColor": "#bbb",
-        "borderTopWidth": 1,
-        "marginTop": 20,
-      },
-      undefined,
-    ]
-  }
-/>
-`;
diff --git a/src/list/__tests__/__snapshots__/ListItem.js.snap b/src/list/__tests__/__snapshots__/ListItem.js.snap
index 07097faf20..26c3299e46 100644
--- a/src/list/__tests__/__snapshots__/ListItem.js.snap
+++ b/src/list/__tests__/__snapshots__/ListItem.js.snap
@@ -2,238 +2,80 @@
 
 exports[`ListItem component should render with avatar 1`] = `
 <View
-  avatar="avatar_uri"
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      Object {
-        "backgroundColor": "peru",
-      },
-      false,
-      false,
-    ]
+  avatar={
+    Object {
+      "source": "avatar_uri",
+    }
   }
-  underlayColor="white"
 >
-  <View
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
+          "padding": 14,
         },
+        undefined,
         Object {
           "backgroundColor": "peru",
         },
+        undefined,
       ]
     }
-  >
-    <Avatar
-      editButton={
-        Object {
-          "iconColor": "#fff",
-          "iconName": "mode-edit",
-          "iconType": "material",
-          "size": null,
-          "style": null,
-          "underlayColor": "#000",
-        }
-      }
-      onEditPress={null}
-      rounded={false}
-      showEditButton={false}
-      source={
-        Object {
-          "uri": "avatar_uri",
-        }
-      }
-    />
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <View>
-        <View />
-      </View>
-      <View>
-        <View />
-      </View>
-    </View>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      disabled={true}
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Icon
-        color="#bdc6cf"
-        name="chevron-right"
-        raised={false}
-        reverse={false}
-        reverseColor="white"
-        size={28}
-        underlayColor="white"
-      />
-    </TouchableOpacity>
-  </View>
+  />
 </View>
 `;
 
 exports[`ListItem component should render with left icon 1`] = `
-<View
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      undefined,
-      false,
-      false,
-    ]
-  }
-  underlayColor="white"
->
-  <View
+<View>
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
-        },
-        Object {
-          "backgroundColor": "peru",
+          "padding": 14,
         },
+        undefined,
+        undefined,
+        undefined,
       ]
     }
   >
-    <View
-      disabled={false}
-      style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          undefined,
-        ]
-      }
+    <Icon
+      color="red"
+      name="wifi"
+      raised={false}
+      reverse={false}
+      reverseColor="white"
+      size={20}
+      type="font-awesome"
       underlayColor="white"
-    >
-      <View>
-        <Icon
-          color="red"
-          iconStyle={
-            Array [
-              Object {
-                "marginRight": 8,
-              },
-              undefined,
-            ]
-          }
-          name="wifi"
-          raised={false}
-          reverse={false}
-          reverseColor="white"
-          size={20}
-          type="font-awesome"
-          underlayColor="white"
-        />
-      </View>
-    </View>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <View>
-        <View />
-      </View>
-      <View>
-        <View />
-      </View>
-    </View>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      disabled={true}
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Icon
-        color="#bdc6cf"
-        name="chevron-right"
-        raised={false}
-        reverse={false}
-        reverseColor="white"
-        size={28}
-        underlayColor="white"
-      />
-    </TouchableOpacity>
-  </View>
+    />
+  </PadView>
 </View>
 `;
 
 exports[`ListItem component should render with left icon component 1`] = `
-<View
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      undefined,
-      false,
-      false,
-    ]
-  }
-  underlayColor="white"
->
-  <View
+<View>
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
-        },
-        Object {
-          "backgroundColor": "peru",
+          "padding": 14,
         },
+        undefined,
+        undefined,
+        undefined,
       ]
     }
   >
@@ -244,94 +86,28 @@ exports[`ListItem component should render with left icon component 1`] = `
     >
       I'm left icon
     </Text>
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <View>
-        <View />
-      </View>
-      <View>
-        <View />
-      </View>
-    </View>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      disabled={true}
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Icon
-        color="#bdc6cf"
-        name="chevron-right"
-        raised={false}
-        reverse={false}
-        reverseColor="white"
-        size={28}
-        underlayColor="white"
-      />
-    </TouchableOpacity>
-  </View>
+  </PadView>
 </View>
 `;
 
 exports[`ListItem component should render with right icon component 1`] = `
-<View
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      undefined,
-      false,
-      false,
-    ]
-  }
-  underlayColor="white"
->
-  <View
+<View>
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
-        },
-        Object {
-          "backgroundColor": "peru",
+          "padding": 14,
         },
+        undefined,
+        undefined,
+        undefined,
       ]
     }
   >
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <View>
-        <View />
-      </View>
-      <View>
-        <View />
-      </View>
-    </View>
     <Text
       accessible={true}
       allowFontScaling={true}
@@ -339,205 +115,114 @@ exports[`ListItem component should render with right icon component 1`] = `
     >
       I'm right icon
     </Text>
-  </View>
+  </PadView>
 </View>
 `;
 
-exports[`ListItem component should render with textInput 1`] = `
-<View
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      undefined,
-      false,
-      false,
-    ]
-  }
-  underlayColor="white"
->
-  <View
+exports[`ListItem component should render with switch 1`] = `
+<View>
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
+          "padding": 14,
         },
+        Object {
+          "paddingVertical": 8,
+        },
+        undefined,
         undefined,
       ]
     }
   >
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <View>
-        <View />
-      </View>
-      <View>
-        <View />
-      </View>
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-end",
-            "flex": 1,
-            "justifyContent": "center",
-          },
-          Object {
-            "alignItems": null,
-          },
-          undefined,
-        ]
-      }
-    >
-      <TextInput
-        allowFontScaling={true}
-        editable={true}
-        style={
-          Array [
-            Object {
-              "flex": 1,
-              "height": 20,
-              "textAlign": "right",
-            },
-            undefined,
-          ]
-        }
-        underlineColorAndroid="transparent"
-      />
-    </View>
-    <View
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "justifyContent": "center",
-          "marginRight": 5,
-        }
-      }
-    >
-      <Switch
-        disabled={false}
-        value={false}
-      />
-    </View>
-  </View>
+    <Switch
+      disabled={false}
+      value={true}
+    />
+    <Chevron
+      color="#D1D1D6"
+    />
+  </PadView>
+  <Divider />
 </View>
 `;
 
 exports[`ListItem component should render with title and subtitle 1`] = `
-<View
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      undefined,
-      false,
-      false,
-    ]
-  }
-  underlayColor="white"
->
-  <View
+<View>
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
-        },
-        Object {
-          "backgroundColor": "peru",
+          "padding": 14,
         },
+        undefined,
+        undefined,
+        undefined,
       ]
     }
   >
     <View
       style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
+        Array [
+          Object {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ]
       }
     >
-      <View>
-        <TextElement
-          numberOfLines={1}
-          style={
+      <TextElement
+        style={
+          Array [
             Array [
               Object {
-                "color": "#43484d",
-                "fontSize": 17.5,
-              },
-              Object {
-                "marginLeft": 10,
+                "backgroundColor": "transparent",
+                "fontSize": 17,
               },
               Object {
                 "backgroundColor": "peru",
               },
-              Object {
-                "fontFamily": "arial",
-              },
-            ]
-          }
-        >
-          title test
-        </TextElement>
-      </View>
-      <View>
-        <TextElement
-          numberOfLines={1}
-          style={
+            ],
+            undefined,
+          ]
+        }
+      >
+        title test
+      </TextElement>
+      <TextElement
+        style={
+          Array [
             Array [
               Object {
-                "color": "#86939e",
+                "backgroundColor": "transparent",
                 "fontSize": 15,
-                "fontWeight": "600",
-                "marginTop": 1,
-              },
-              Object {
-                "marginLeft": 10,
               },
               Object {
                 "backgroundColor": "peru",
               },
-              Object {
-                "fontFamily": "arial",
-              },
-            ]
-          }
-        >
-          title test
-        </TextElement>
-      </View>
+            ],
+            undefined,
+          ]
+        }
+      >
+        title test
+      </TextElement>
     </View>
     <View
       style={
         Array [
           Object {
             "alignItems": "flex-end",
-            "flex": 1,
+            "flex": 0.5,
             "justifyContent": "center",
           },
           undefined,
@@ -545,13 +230,18 @@ exports[`ListItem component should render with title and subtitle 1`] = `
       }
     >
       <TextElement
-        numberOfLines={1}
         style={
           Array [
-            Object {
-              "color": "#bdc6cf",
-              "marginRight": 5,
-            },
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "fontSize": 17,
+              },
+              Object {
+                "color": "rgba(0, 0, 0, 0.54)",
+              },
+              undefined,
+            ],
             undefined,
           ]
         }
@@ -559,97 +249,27 @@ exports[`ListItem component should render with title and subtitle 1`] = `
         title
       </TextElement>
     </View>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      disabled={true}
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Icon
-        color="#bdc6cf"
-        name="chevron-right"
-        raised={false}
-        reverse={false}
-        reverseColor="white"
-        size={28}
-        underlayColor="white"
-      />
-    </TouchableOpacity>
-  </View>
+  </PadView>
 </View>
 `;
 
 exports[`ListItem component should render without issues 1`] = `
-<View
-  disabled={false}
-  style={
-    Array [
-      Object {
-        "backgroundColor": "transparent",
-        "borderBottomColor": "#bbb",
-        "borderBottomWidth": 1,
-        "paddingBottom": 10,
-        "paddingRight": 10,
-        "paddingTop": 10,
-      },
-      undefined,
-      false,
-      false,
-    ]
-  }
-  underlayColor="white"
->
-  <View
+<View>
+  <PadView
+    Component={[Function]}
     style={
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "white",
           "flexDirection": "row",
-          "marginLeft": 10,
+          "padding": 14,
         },
         undefined,
+        undefined,
+        undefined,
       ]
     }
-  >
-    <View
-      style={
-        Object {
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <View>
-        <View />
-      </View>
-      <View>
-        <View />
-      </View>
-    </View>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      disabled={true}
-      style={
-        Object {
-          "alignItems": "flex-end",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Icon
-        color="#bdc6cf"
-        name="chevron-right"
-        raised={false}
-        reverse={false}
-        reverseColor="white"
-        size={28}
-        underlayColor="white"
-      />
-    </TouchableOpacity>
-  </View>
+  />
 </View>
 `;
diff --git a/src/searchbar/SearchBar-android.js b/src/searchbar/SearchBar-android.js
index a3443f6e83..48647b9ef5 100644
--- a/src/searchbar/SearchBar-android.js
+++ b/src/searchbar/SearchBar-android.js
@@ -91,7 +91,7 @@ class SearchBar extends Component {
           onChangeText={this.onChangeText}
           ref={input => (this.input = input)}
           inputStyle={[styles.input, inputStyle]}
-          containerStyle={[styles.inputContainer, inputContainerStyle]}
+          inputContainerStyle={[styles.inputContainer, inputContainerStyle]}
           leftIcon={noIcon ? undefined : leftIcon ? leftIcon : searchIcon}
           leftIconContainerStyle={[
             styles.leftIconContainerStyle,
diff --git a/src/searchbar/SearchBar-ios.js b/src/searchbar/SearchBar-ios.js
index c6e23e8779..c8f17b3790 100644
--- a/src/searchbar/SearchBar-ios.js
+++ b/src/searchbar/SearchBar-ios.js
@@ -93,7 +93,7 @@ class SearchBar extends Component {
           onChangeText={this.onChangeText}
           ref={input => (this.input = input)}
           inputStyle={[styles.input, inputStyle]}
-          containerStyle={[
+          inputContainerStyle={[
             styles.inputContainer,
             !hasFocus && { width: SCREEN_WIDTH - 32, marginRight: 15 },
             inputContainerStyle,
diff --git a/src/searchbar/__tests__/__snapshots__/SearchBar-android.js.snap b/src/searchbar/__tests__/__snapshots__/SearchBar-android.js.snap
index 209c8ba1be..8e36051f25 100644
--- a/src/searchbar/__tests__/__snapshots__/SearchBar-android.js.snap
+++ b/src/searchbar/__tests__/__snapshots__/SearchBar-android.js.snap
@@ -15,7 +15,7 @@ exports[`Android SearchBar component should render with a custom methods 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "borderBottomWidth": 0,
@@ -92,7 +92,7 @@ exports[`Android SearchBar component should render with loading 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "borderBottomWidth": 0,
@@ -184,7 +184,7 @@ exports[`Android SearchBar component should render without clear icon 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "borderBottomWidth": 0,
@@ -261,7 +261,7 @@ exports[`Android SearchBar component should render without issues 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "borderBottomWidth": 0,
@@ -338,7 +338,7 @@ exports[`Android SearchBar component should render without search icon 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "borderBottomWidth": 0,
diff --git a/src/searchbar/__tests__/__snapshots__/SearchBar-ios.js.snap b/src/searchbar/__tests__/__snapshots__/SearchBar-ios.js.snap
index 7f30efd409..4031d26e40 100644
--- a/src/searchbar/__tests__/__snapshots__/SearchBar-ios.js.snap
+++ b/src/searchbar/__tests__/__snapshots__/SearchBar-ios.js.snap
@@ -16,7 +16,7 @@ exports[`iOS SearchBar component should render with a custom Cancel button title
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
@@ -104,7 +104,7 @@ exports[`iOS SearchBar component should render with a custom methods 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
@@ -192,7 +192,7 @@ exports[`iOS SearchBar component should render with a custom search icon 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
@@ -275,7 +275,7 @@ exports[`iOS SearchBar component should render with loading 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
@@ -378,7 +378,7 @@ exports[`iOS SearchBar component should render without clear icon 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
@@ -466,7 +466,7 @@ exports[`iOS SearchBar component should render without issues 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
@@ -554,7 +554,7 @@ exports[`iOS SearchBar component should render without search icon 1`] = `
   }
 >
   <Input
-    containerStyle={
+    inputContainerStyle={
       Array [
         Object {
           "backgroundColor": "#dcdce1",
diff --git a/website/sidebars.json b/website/sidebars.json
index c0c9847c83..7299bb5d39 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -16,7 +16,7 @@
       "header",
       "icon",
       "input",
-      "lists",
+      "listitem",
       "overlay",
       "pricing",
       "rating",
diff --git a/website/static/img/input_with_explanation.png b/website/static/img/input_with_explanation.png
new file mode 100644
index 0000000000..abce94facd
Binary files /dev/null and b/website/static/img/input_with_explanation.png differ
diff --git a/website/static/img/input_without_explanation.png b/website/static/img/input_without_explanation.png
new file mode 100644
index 0000000000..f4ebbd3b16
Binary files /dev/null and b/website/static/img/input_without_explanation.png differ
diff --git a/website/static/img/listitem_with_gradient_scale.gif b/website/static/img/listitem_with_gradient_scale.gif
new file mode 100644
index 0000000000..1ed0156afc
Binary files /dev/null and b/website/static/img/listitem_with_gradient_scale.gif differ
diff --git a/yarn.lock b/yarn.lock
index 902f5d7182..4a7edd9844 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5872,6 +5872,12 @@ react-dom@16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-native-touchable-scale@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-touchable-scale/-/react-native-touchable-scale-2.0.0.tgz#13a83a9423e46049cad3e3cc306eba2130883cb1"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-native-vector-icons@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.4.2.tgz#090f42ee0396c4cc4eae0ddaa518028ba8df40c7"