From ca9ee7505e9adaadcc327110e70259f7c58f5a93 Mon Sep 17 00:00:00 2001
From: Monte9 <Monte9@users.noreply.github.com>
Date: Sun, 14 May 2017 21:30:28 -0700
Subject: [PATCH] updated example app; added all views from hackathon-starter

---
 example/main.js                               |   5 +
 example/src/drawer/home.js                    |  25 +-
 example/src/drawer/pricing.js                 |  32 +
 example/src/tabs/forms.js                     |  36 ++
 example/src/tabs/icons.js                     |  35 --
 example/src/tabs/lists.js                     |  35 ++
 example/src/views/buttons_home.js             | 248 +++++++-
 example/src/views/forms_details.js            |  24 +
 example/src/views/forms_home.js               | 183 ++++++
 example/src/views/icons_home.js               | 578 ------------------
 .../{icons_detail.js => lists_detail.js}      |   0
 example/src/views/lists_home.js               | 415 +++++++++++++
 example/src/views/pricing.js                  |  79 +++
 13 files changed, 1073 insertions(+), 622 deletions(-)
 create mode 100644 example/src/drawer/pricing.js
 create mode 100644 example/src/tabs/forms.js
 delete mode 100644 example/src/tabs/icons.js
 create mode 100644 example/src/tabs/lists.js
 create mode 100644 example/src/views/forms_details.js
 create mode 100644 example/src/views/forms_home.js
 delete mode 100644 example/src/views/icons_home.js
 rename example/src/views/{icons_detail.js => lists_detail.js} (100%)
 create mode 100644 example/src/views/lists_home.js
 create mode 100644 example/src/views/pricing.js

diff --git a/example/main.js b/example/main.js
index 6901143f5e..c4dba81b1e 100644
--- a/example/main.js
+++ b/example/main.js
@@ -7,6 +7,7 @@ import { Icon } from 'react-native-elements';
 import Home from './src/drawer/home';
 import SwipeDecker from './src/drawer/swipe_decker';
 import Ratings from './src/drawer/ratings';
+import Pricing from './src/drawer/pricing';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
@@ -39,6 +40,10 @@ const MainRoot = DrawerNavigator(
       path: '/ratings',
       screen: Ratings,
     },
+    Pricing: {
+      path: '/pricing',
+      screen: Pricing,
+    },
   },
   {
     initialRouteName: 'Home',
diff --git a/example/src/drawer/home.js b/example/src/drawer/home.js
index 38a729dc83..9e8336ae3d 100644
--- a/example/src/drawer/home.js
+++ b/example/src/drawer/home.js
@@ -4,7 +4,8 @@ import { TabNavigator } from 'react-navigation';
 import { Icon } from 'react-native-elements';
 
 import ButtonsTab from '../tabs/buttons';
-import IconsTab from '../tabs/icons';
+import ListsTab from '../tabs/lists';
+import FormsTab from '../tabs/forms';
 import FontsTab from '../tabs/fonts';
 
 const Home = TabNavigator(
@@ -24,16 +25,26 @@ const Home = TabNavigator(
         ),
       },
     },
-    IconsTab: {
-      screen: IconsTab,
-      path: '/icons',
+    ListsTab: {
+      screen: ListsTab,
+      path: '/lists',
       navigationOptions: {
-        tabBarLabel: 'Icons',
+        tabBarLabel: 'Lists',
+        tabBarIcon: ({ tintColor, focused }) => (
+          <Icon name="list" size={30} type="entypo" color={tintColor} />
+        ),
+      },
+    },
+    FormsTab: {
+      screen: FormsTab,
+      path: '/forms',
+      navigationOptions: {
+        tabBarLabel: 'Forms',
         tabBarIcon: ({ tintColor, focused }) => (
           <Icon
-            name={focused ? 'emoticon-cool' : 'emoticon-sad'}
+            name="wpforms"
             size={30}
-            type="material-community"
+            type="font-awesome"
             color={tintColor}
           />
         ),
diff --git a/example/src/drawer/pricing.js b/example/src/drawer/pricing.js
new file mode 100644
index 0000000000..7f44258f26
--- /dev/null
+++ b/example/src/drawer/pricing.js
@@ -0,0 +1,32 @@
+import Expo from 'expo';
+import React from 'react';
+import { StackNavigator } from 'react-navigation';
+import { Icon } from 'react-native-elements';
+
+import Pricing from '../views/pricing';
+
+const PricingDrawerItem = StackNavigator({
+  Pricing: {
+    screen: Pricing,
+  },
+});
+
+PricingDrawerItem.navigationOptions = {
+  drawerLabel: 'Pricing',
+  drawerIcon: ({ tintColor }) => (
+    <Icon
+      name="attach-money"
+      size={30}
+      style={{
+        width: 50,
+        height: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      type="material"
+      color={tintColor}
+    />
+  ),
+};
+
+export default PricingDrawerItem;
diff --git a/example/src/tabs/forms.js b/example/src/tabs/forms.js
new file mode 100644
index 0000000000..9f778bcf42
--- /dev/null
+++ b/example/src/tabs/forms.js
@@ -0,0 +1,36 @@
+import Expo from 'expo';
+import React, { Component } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { StackNavigator } from 'react-navigation';
+
+import FormsHome from '../views/forms_home';
+import FormsDetails from '../views/forms_details';
+
+const FormsTabView = ({ navigation }) => <FormsHome navigation={navigation} />;
+
+const FormsDetailTabView = ({ navigation }) => (
+  <FormsDetails
+    banner={`${navigation.state.params.name}s Profile`}
+    navigation={navigation}
+  />
+);
+
+const FormsTab = StackNavigator({
+  Forms: {
+    screen: FormsTabView,
+    path: '/',
+    navigationOptions: {
+      title: 'Forms',
+    },
+  },
+  Forms_Detail: {
+    screen: FormsDetailTabView,
+    path: '/forms_detail',
+    navigationOptions: {
+      title: 'Forms Detail',
+    },
+  },
+});
+
+export default FormsTab;
diff --git a/example/src/tabs/icons.js b/example/src/tabs/icons.js
deleted file mode 100644
index 1ed47487ba..0000000000
--- a/example/src/tabs/icons.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import Expo from 'expo';
-import React, { Component } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-import { StackNavigator } from 'react-navigation';
-
-import IconsHome from '../views/icons_home';
-import IconsDetails from '../views/icons_detail';
-
-const IconsTabView = ({ navigation }) => (
-  <IconsHome banner="Icons" navigation={navigation} />
-);
-
-const IconsDetailTabView = ({ navigation }) => (
-  <IconsDetails banner="Icons Detail" navigation={navigation} />
-);
-
-const IconsTab = StackNavigator({
-  Home: {
-    screen: IconsTabView,
-    path: '/',
-    navigationOptions: () => ({
-      title: 'Icons',
-    }),
-  },
-  Icons_Detail: {
-    screen: IconsDetailTabView,
-    path: 'icons_detail',
-    navigationOptions: {
-      title: 'Icons Detail',
-    },
-  },
-});
-
-export default IconsTab;
diff --git a/example/src/tabs/lists.js b/example/src/tabs/lists.js
new file mode 100644
index 0000000000..98afcac0fb
--- /dev/null
+++ b/example/src/tabs/lists.js
@@ -0,0 +1,35 @@
+import Expo from 'expo';
+import React, { Component } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { StackNavigator } from 'react-navigation';
+
+import ListsHome from '../views/lists_home';
+import ListsDetails from '../views/lists_detail';
+
+const ListsTabView = ({ navigation }) => (
+  <ListsHome banner="Lists" navigation={navigation} />
+);
+
+const ListsDetailTabView = ({ navigation }) => (
+  <ListsDetails banner="Lists Detail" navigation={navigation} />
+);
+
+const ListsTab = StackNavigator({
+  Home: {
+    screen: ListsTabView,
+    path: '/',
+    navigationOptions: () => ({
+      title: 'Lists',
+    }),
+  },
+  Lists_Detail: {
+    screen: ListsDetailTabView,
+    path: 'lists_detail',
+    navigationOptions: {
+      title: 'Lists Detail',
+    },
+  },
+});
+
+export default ListsTab;
diff --git a/example/src/views/buttons_home.js b/example/src/views/buttons_home.js
index 0cc141c5eb..69257b7b64 100644
--- a/example/src/views/buttons_home.js
+++ b/example/src/views/buttons_home.js
@@ -2,7 +2,7 @@ import Expo from 'expo';
 import React, { Component } from 'react';
 import { View, ScrollView, StyleSheet, Platform } from 'react-native';
 
-import { Text, Button, Icon } from 'react-native-elements';
+import { Text, Button, Icon, SocialIcon, Card } from 'react-native-elements';
 
 import colors from 'HSColors';
 import socialColors from 'HSSocialColors';
@@ -20,7 +20,7 @@ class Buttons extends Component {
       <ScrollView>
         <View style={styles.hero}>
           <Icon color="white" name="whatshot" size={62} type="material" />
-          <Text style={styles.heading}>Buttons</Text>
+          <Text style={styles.heading}>Buttons & Icons</Text>
         </View>
         <Button
           buttonStyle={styles.button}
@@ -153,6 +153,246 @@ class Buttons extends Component {
           backgroundColor={socialColors.twitter}
           title="LARGE ANOTHER BUTTON"
         />
+        <Card title="ICONS" containerStyle={{ marginTop: 15 }}>
+          <View style={[styles.socialRow, { marginVertical: 10 }]}>
+            <Icon
+              onPress={() => navigation.navigate('Icons_Detail')}
+              type="font-awesome"
+              color="#e14329"
+              name="hashtag"
+            />
+            <Icon
+              onPress={() => console.log('hello')}
+              type="font-awesome"
+              color="#02b875"
+              name="rocket"
+            />
+            <Icon
+              onPress={() => console.log('hello')}
+              color="#000000"
+              name="snapchat-ghost"
+              type="font-awesome"
+            />
+            <Icon
+              color="#6441A5"
+              name="btc"
+              type="font-awesome"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              color="#f50"
+              name="heartbeat"
+              type="font-awesome"
+              onPress={() => console.log('hello')}
+            />
+          </View>
+          <View style={[styles.socialRow, { marginVertical: 10 }]}>
+            <Icon
+              name="rowing"
+              color="#673AB7"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              name="g-translate"
+              color="#03A9F4"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              color="#009688"
+              name="sc-telegram"
+              type="evilicon"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              color="#8BC34A"
+              name="social-apple"
+              type="foundation"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              color="#FFC107"
+              name="ios-american-football"
+              type="ionicon"
+              onPress={() => console.log('hello')}
+            />
+          </View>
+          <View style={styles.socialRow}>
+            <Icon
+              raised
+              name="vpn-key"
+              color="#E91E63"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              raised
+              name="ring-volume"
+              color="#3F51B5"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              raised
+              color="#00BCD4"
+              name="weekend"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              raised
+              color="#CDDC39"
+              name="bubble-chart"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              raised
+              color="#FF5722"
+              name="burst-mode"
+              onPress={() => console.log('hello')}
+            />
+          </View>
+          <View style={styles.socialRow}>
+            <Icon
+              reverse
+              raised
+              name="account-balance"
+              color="#673AB7"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              raised
+              name="android"
+              color="#03A9F4"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              raised
+              color="#009688"
+              name="code"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              raised
+              color="#8BC34A"
+              name="card-travel"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              raised
+              color="#FF9800"
+              name="extension"
+              onPress={() => console.log('hello')}
+            />
+          </View>
+          <View style={styles.socialRow}>
+            <Icon
+              reverse
+              name="group-work"
+              color="#E91E63"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              name="lightbulb-outline"
+              color="#3F51B5"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              color="#00BCD4"
+              name="pets"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              color="#CDDC39"
+              name="polymer"
+              onPress={() => console.log('hello')}
+            />
+            <Icon
+              reverse
+              color="#FF5722"
+              name="touch-app"
+              onPress={() => console.log('hello')}
+            />
+          </View>
+        </Card>
+        <Card
+          title="SOCIAL ICONS"
+          containerStyle={[
+            styles.socialRow,
+            { marginTop: 15, marginBottom: 15 },
+          ]}
+        >
+          <View style={styles.socialRow}>
+            <SocialIcon
+              raised={false}
+              type="gitlab"
+              onPress={() => console.log('hi!')}
+            />
+            <SocialIcon type="medium" onPress={() => console.log('hi2!')} />
+            <SocialIcon type="github-alt" onPress={() => console.log('hi3!')} />
+            <SocialIcon type="twitch" />
+            <SocialIcon type="soundcloud" />
+          </View>
+          <View style={styles.socialRow}>
+            <SocialIcon
+              raised={false}
+              type="facebook"
+              onPress={() => console.log('hi!')}
+            />
+            <SocialIcon type="twitter" onPress={() => console.log('hi2!')} />
+            <SocialIcon type="instagram" onPress={() => console.log('hi3!')} />
+            <SocialIcon raised={false} type="codepen" />
+            <SocialIcon raised={false} type="youtube" />
+          </View>
+        </Card>
+        <Card
+          title="LIGHT SOCIAL ICONS"
+          containerStyle={{ marginTop: 15, marginBottom: 15 }}
+        >
+          <View style={styles.socialRow}>
+            <SocialIcon
+              light
+              raised={false}
+              type="gitlab"
+              onPress={() => console.log('hi!')}
+            />
+            <SocialIcon
+              light
+              type="medium"
+              onPress={() => console.log('hi2!')}
+            />
+            <SocialIcon
+              light
+              type="github-alt"
+              onPress={() => console.log('hi3!')}
+            />
+            <SocialIcon light type="twitch" />
+            <SocialIcon light type="soundcloud" />
+          </View>
+        </Card>
+        <Card
+          containerStyle={{ marginTop: 15, marginBottom: 15 }}
+          title="SOCIAL BUTTONS"
+        >
+          <SocialIcon button type="medium" />
+          <SocialIcon button type="twitch" />
+          <SocialIcon
+            title="Sign In With Facebook"
+            button
+            fontWeight="400"
+            type="facebook"
+          />
+          <SocialIcon title="Some Twitter Message" button type="twitter" />
+          <SocialIcon
+            light
+            button
+            title="Some Instagram Message"
+            type="instagram"
+          />
+        </Card>
       </ScrollView>
     );
   }
@@ -183,6 +423,10 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  socialRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
 });
 
 export default Buttons;
diff --git a/example/src/views/forms_details.js b/example/src/views/forms_details.js
new file mode 100644
index 0000000000..7f1673707d
--- /dev/null
+++ b/example/src/views/forms_details.js
@@ -0,0 +1,24 @@
+import Expo from 'expo';
+import React, { Component } from 'react';
+import { View, ScrollView, StyleSheet, Platform } from 'react-native';
+
+import { Text, Button, Icon, Card } from 'react-native-elements';
+
+import colors from 'HSColors';
+import socialColors from 'HSSocialColors';
+import fonts from 'HSFonts';
+
+class FormsDetail extends Component {
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <Card
+        title="MORE FORMS"
+        containerStyle={{ marginTop: 15, marginBottom: 15 }}
+      />
+    );
+  }
+}
+
+export default FormsDetail;
diff --git a/example/src/views/forms_home.js b/example/src/views/forms_home.js
new file mode 100644
index 0000000000..6e52f3e8f9
--- /dev/null
+++ b/example/src/views/forms_home.js
@@ -0,0 +1,183 @@
+import React, { Component } from 'react';
+import { ScrollView, View, StyleSheet } from 'react-native';
+import colors from 'HSColors';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import {
+  Button,
+  Text,
+  FormInput,
+  FormLabel,
+  CheckBox,
+  SearchBar,
+} from 'react-native-elements';
+
+class Forms extends Component {
+  render() {
+    return (
+      <ScrollView
+        style={{ backgroundColor: 'white' }}
+        keyboardShouldPersistTaps="always"
+      >
+        <View style={styles.headingContainer}>
+          <Icon color="white" name="pets" size={62} />
+          <Text style={styles.heading}>Forms</Text>
+        </View>
+        <FormLabel containerStyle={styles.labelContainerStyle}>Name</FormLabel>
+        <FormInput
+          ref="form2"
+          containerRef="containerRefYOYO"
+          textInputRef="textInputRef"
+          placeholder="Please enter your name..."
+        />
+        <FormLabel
+          textInputRef="textInputRef"
+          containerStyle={styles.labelContainerStyle}
+        >
+          Address
+        </FormLabel>
+        <FormInput
+          textInputRef="textInputRef"
+          ref="form1"
+          placeholder="Please enter your address..."
+        />
+        <FormLabel
+          textInputRef="textInputRef"
+          containerStyle={styles.labelContainerStyle}
+        >
+          Phone
+        </FormLabel>
+        <FormInput
+          textInputRef="textInputRef"
+          placeholder="Please enter your phone number..."
+        />
+        <Button
+          onPress={() => console.log('yo')}
+          icon={{ name: 'done' }}
+          buttonStyle={{ marginTop: 15 }}
+          title="SUBMIT"
+        />
+        <View style={{ marginTop: 10, marginBottom: 0 }}>
+          <SearchBar
+            lightTheme
+            clearIcon
+            textInputRef="textInputRef"
+            placeholder="Type Here..."
+          />
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 0 }}>
+          <SearchBar
+            noIcon
+            lightTheme
+            textInputRef="textInputRef"
+            placeholder="Type Here..."
+          />
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 0 }}>
+          <SearchBar
+            round
+            lightTheme
+            clearIcon
+            textInputRef="searchBar3"
+            placeholder="Type Here..."
+          />
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 0 }}>
+          <SearchBar textInputRef="textInputRef" placeholder="Type Here..." />
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 0 }}>
+          <SearchBar
+            noIcon
+            clearIcon
+            textInputRef="textInputRef"
+            placeholder="Type Here..."
+          />
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 0 }}>
+          <SearchBar
+            round
+            textInputRef="textInputRef"
+            placeholder="Type Here..."
+          />
+        </View>
+        <View style={{ marginTop: 20 }}>
+          <CheckBox title="Click Here" checked />
+          <CheckBox center title="Click Here" checked />
+          <CheckBox title="Click Here" checked right />
+          <CheckBox
+            right
+            title="Click Here"
+            checkedIcon="dot-circle-o"
+            uncheckedIcon="circle-o"
+          />
+          <CheckBox
+            center
+            checkedIcon="dot-circle-o"
+            uncheckedIcon="circle-o"
+            title="Click Here"
+            checked
+            checkedColor="#4a6da7"
+          />
+          <CheckBox center iconRight title="Click Here" />
+          <CheckBox
+            center
+            iconRight
+            uncheckedIcon="add"
+            checkedIcon="clear"
+            iconType="material"
+            title="Click Here to Add This Item"
+          />
+          <CheckBox
+            center
+            checked
+            iconType="material"
+            checkedIcon="clear"
+            uncheckedIcon="add"
+            iconRight
+            title="Click Here to Remove This Item"
+            checkedColor="red"
+          />
+          <CheckBox center title="Add Phone" uncheckedIcon="plus" />
+          <CheckBox
+            checked
+            center
+            checkedTitle="You Clicked!"
+            title="Click Here"
+            iconType="material"
+            checkedIcon="done"
+            checkedColor="blue"
+            uncheckedColor="red"
+          />
+          <CheckBox
+            center
+            iconType="material"
+            title="Click Here"
+            checkedIcon="accessibility"
+            uncheckedIcon="check-box-outline-blank"
+            checkedColor="blue"
+            uncheckedColor="black"
+          />
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+styles = StyleSheet.create({
+  headingContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+    backgroundColor: colors.secondary2,
+  },
+  heading: {
+    color: 'white',
+    marginTop: 10,
+    fontSize: 22,
+  },
+  labelContainerStyle: {
+    marginTop: 8,
+  },
+});
+
+export default Forms;
diff --git a/example/src/views/icons_home.js b/example/src/views/icons_home.js
deleted file mode 100644
index c14296598b..0000000000
--- a/example/src/views/icons_home.js
+++ /dev/null
@@ -1,578 +0,0 @@
-import Expo from 'expo';
-import React, { Component } from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  Platform,
-  Image,
-  TouchableHighlight,
-} from 'react-native';
-
-import {
-  Text,
-  Card,
-  SocialIcon,
-  Divider,
-  ButtonGroup,
-  Slider,
-  Tile,
-  Grid,
-  Col,
-  Row,
-  Avatar,
-  Icon,
-} from 'react-native-elements';
-
-import colors from 'HSColors';
-
-const users = [
-  {
-    name: 'brynn',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
-  },
-  {
-    name: 'thot leader',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg',
-  },
-  {
-    name: 'jsa',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg',
-  },
-  {
-    name: 'talhaconcepts',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg',
-  },
-  {
-    name: 'andy vitale',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg',
-  },
-  {
-    name: 'katy friedson',
-    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
-  },
-];
-
-class Icons extends Component {
-  constructor() {
-    super();
-    this.state = {
-      selectedIndex: 0,
-      value: 0.5,
-    };
-    this.updateIndex = this.updateIndex.bind(this);
-  }
-
-  updateIndex(selectedIndex) {
-    this.setState({ selectedIndex });
-  }
-
-  render() {
-    const { navigation } = this.props;
-    const buttons = ['Button1', 'Button2'];
-    const { selectedIndex } = this.state;
-
-    return (
-      <ScrollView>
-        <View style={styles.headerContainer}>
-          <Icon color="white" name="invert-colors" size={62} />
-          <Text style={styles.heading}>Components</Text>
-        </View>
-        <View style={{ marginTop: 20 }}>
-          <ButtonGroup
-            textStyle={{ fontSize: 13 }}
-            onPress={this.updateIndex}
-            selectedIndex={selectedIndex}
-            buttons={buttons}
-          />
-        </View>
-        <View style={styles.container}>
-          <Card title="CARD WITH DIVIDER">
-            {users.map((u, i) => {
-              return (
-                <View key={i} style={styles.user}>
-                  <Image
-                    style={styles.image}
-                    resizeMode="cover"
-                    source={{ uri: u.avatar }}
-                  />
-                  <Text style={styles.name}>{u.name}</Text>
-                </View>
-              );
-            })}
-          </Card>
-          <Card containerStyle={{ marginTop: 15 }} title="FONTS">
-            <Text style={styles.fonts} h1>h1 Heading</Text>
-            <Text style={styles.fonts} h2>h2 Heading</Text>
-            <Text style={styles.fonts} h3>h3 Heading</Text>
-            <Text style={styles.fonts} h4>h4 Heading</Text>
-            <Text style={styles.fonts}>Normal Text</Text>
-          </Card>
-          <Card title="ICONS" containerStyle={{ marginTop: 15 }}>
-            <View
-              style={[
-                styles.social,
-                {
-                  marginTop: 15,
-                  marginBottom: 15,
-                  justifyContent: 'space-around',
-                },
-              ]}
-            >
-              <Icon
-                onPress={() => navigation.navigate('Icons_Detail')}
-                type="font-awesome"
-                color="#e14329"
-                name="hashtag"
-              />
-              <Icon
-                onPress={() => console.log('hello')}
-                type="font-awesome"
-                color="#02b875"
-                name="rocket"
-              />
-              <Icon
-                onPress={() => console.log('hello')}
-                color="#000000"
-                name="snapchat-ghost"
-                type="font-awesome"
-              />
-              <Icon
-                color="#6441A5"
-                name="btc"
-                type="font-awesome"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                color="#f50"
-                name="heartbeat"
-                type="font-awesome"
-                onPress={() => console.log('hello')}
-              />
-            </View>
-            <View
-              style={[
-                styles.social,
-                {
-                  marginTop: 15,
-                  marginBottom: 15,
-                  justifyContent: 'space-around',
-                },
-              ]}
-            >
-              <Icon
-                name="rowing"
-                color="#673AB7"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                name="g-translate"
-                color="#03A9F4"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                color="#009688"
-                name="sc-telegram"
-                type="evilicon"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                color="#8BC34A"
-                name="social-apple"
-                type="foundation"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                color="#FFC107"
-                name="ios-american-football"
-                type="ionicon"
-                onPress={() => console.log('hello')}
-              />
-            </View>
-            <View>
-              <View style={[styles.social, { justifyContent: 'space-around' }]}>
-                <Icon
-                  raised
-                  name="vpn-key"
-                  color="#E91E63"
-                  onPress={() => console.log('hello')}
-                />
-                <Icon
-                  raised
-                  name="ring-volume"
-                  color="#3F51B5"
-                  onPress={() => console.log('hello')}
-                />
-                <Icon
-                  raised
-                  color="#00BCD4"
-                  name="weekend"
-                  onPress={() => console.log('hello')}
-                />
-                <Icon
-                  raised
-                  color="#CDDC39"
-                  name="bubble-chart"
-                  onPress={() => console.log('hello')}
-                />
-                <Icon
-                  raised
-                  color="#FF5722"
-                  name="burst-mode"
-                  onPress={() => console.log('hello')}
-                />
-              </View>
-            </View>
-            <View style={[styles.social, { justifyContent: 'space-around' }]}>
-              <Icon
-                reverse
-                raised
-                name="account-balance"
-                color="#673AB7"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                raised
-                name="android"
-                color="#03A9F4"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                raised
-                color="#009688"
-                name="code"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                raised
-                color="#8BC34A"
-                name="card-travel"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                raised
-                color="#FF9800"
-                name="extension"
-                onPress={() => console.log('hello')}
-              />
-            </View>
-            <View style={[styles.social, { justifyContent: 'space-around' }]}>
-              <Icon
-                reverse
-                name="group-work"
-                color="#E91E63"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                name="lightbulb-outline"
-                color="#3F51B5"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                color="#00BCD4"
-                name="pets"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                color="#CDDC39"
-                name="polymer"
-                onPress={() => console.log('hello')}
-              />
-              <Icon
-                reverse
-                color="#FF5722"
-                name="touch-app"
-                onPress={() => console.log('hello')}
-              />
-            </View>
-          </Card>
-          <Card title="SOCIAL ICONS" containerStyle={{ marginTop: 15 }}>
-            <View
-              style={[
-                styles.social,
-                { marginTop: 13, justifyContent: 'space-around' },
-              ]}
-            >
-              <SocialIcon
-                raised={false}
-                type="gitlab"
-                onPress={() => console.log('hi!')}
-              />
-              <SocialIcon type="medium" onPress={() => console.log('hi2!')} />
-              <SocialIcon
-                type="github-alt"
-                onPress={() => console.log('hi3!')}
-              />
-              <SocialIcon type="twitch" />
-              <SocialIcon type="soundcloud" />
-            </View>
-            <View
-              style={[
-                styles.social,
-                { marginTop: 13, justifyContent: 'space-around' },
-              ]}
-            >
-              <SocialIcon
-                raised={false}
-                type="facebook"
-                onPress={() => console.log('hi!')}
-              />
-              <SocialIcon type="twitter" onPress={() => console.log('hi2!')} />
-              <SocialIcon
-                type="instagram"
-                onPress={() => console.log('hi3!')}
-              />
-              <SocialIcon raised={false} type="codepen" />
-              <SocialIcon raised={false} type="youtube" />
-            </View>
-          </Card>
-          <Card title="LIGHT SOCIAL ICONS" containerStyle={{ marginTop: 15 }}>
-            <View style={[styles.social, { justifyContent: 'space-around' }]}>
-              <SocialIcon
-                light
-                raised={false}
-                type="gitlab"
-                onPress={() => console.log('hi!')}
-              />
-              <SocialIcon
-                light
-                type="medium"
-                onPress={() => console.log('hi2!')}
-              />
-              <SocialIcon
-                light
-                type="github-alt"
-                onPress={() => console.log('hi3!')}
-              />
-              <SocialIcon light type="twitch" />
-              <SocialIcon light type="soundcloud" />
-            </View>
-          </Card>
-          <Card
-            containerStyle={{ marginTop: 15, marginBottom: 15 }}
-            title="SOCIAL BUTTONS"
-          >
-            <View style={styles.socialButtons}>
-              <SocialIcon button type="medium" />
-              <SocialIcon button type="twitch" />
-              <SocialIcon
-                title="Sign In With Facebook"
-                button
-                fontWeight="400"
-                type="facebook"
-              />
-              <SocialIcon title="Some Twitter Message" button type="twitter" />
-              <SocialIcon
-                light
-                button
-                title="Some Instagram Message"
-                type="instagram"
-              />
-            </View>
-          </Card>
-          <Card
-            containerStyle={{ marginTop: 15, marginBottom: 15 }}
-            title="GRID LAYOUT"
-          >
-            <Grid
-              containerStyle={{
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center',
-                alignSelf: 'center',
-                padding: 10,
-              }}
-            >
-              <Col size={0.25}>
-                <TouchableHighlight onPress={() => console.log('hello')}>
-                  <Image
-                    source={require('../images/avatar1.jpg')}
-                    style={{ height: 50, width: 50, borderRadius: 25 }}
-                  />
-                </TouchableHighlight>
-              </Col>
-              <Col>
-                <Row size={0.75}>
-                  <Text style={{ fontSize: 22 }}>Adam McArther</Text>
-                </Row>
-                <Row>
-                  <Text style={{ color: 'grey' }}>Freelance developer</Text>
-                </Row>
-              </Col>
-            </Grid>
-          </Card>
-          <Card
-            containerStyle={{ marginTop: 15, marginBottom: 15 }}
-            title="SLIDERS"
-          >
-            <View>
-              <Slider
-                value={this.state.value}
-                onValueChange={value => this.setState({ value })}
-              />
-              <Text>Value: {this.state.value}</Text>
-            </View>
-          </Card>
-          <Card
-            containerStyle={{ marginTop: 15, marginBottom: 15 }}
-            title="TILES"
-          >
-            <View>
-              <Tile
-                imageSrc={{
-                  uri: 'https://static1.squarespace.com/static/5477887ae4b07c97883111ab/5478c08fe4b0fa4e5a552532/57e101f3579fb32aef30d4af/1491426124625/Porthmeor+Sunset+21.jpg',
-                }}
-                title="When I admire the wonders of a sunset or the beauty of the moon, my soul expands in the worship of the creator."
-                titleStyle={{ fontSize: 20 }}
-                featured
-                caption="Mahatma Gandhi"
-                activeOpacity={1}
-                width={310}
-              />
-            </View>
-            <View style={{ paddingTop: 20 }}>
-              <Tile
-                imageSrc={{
-                  uri: 'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
-                }}
-                icon={{
-                  name: 'heart',
-                  type: 'font-awesome',
-                  size: 60,
-                  color: 'red',
-                }}
-                featured
-                activeOpacity={0.8}
-                onPress={() => {
-                  'Tile pressed';
-                }}
-                width={310}
-              />
-            </View>
-            <View style={{ paddingTop: 20 }}>
-              <Tile
-                imageSrc={{
-                  uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg/320px-Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg',
-                }}
-                title="Half Dome, Yosemite"
-                titleStyle={{ fontSize: 20 }}
-                activeOpacity={1}
-                width={310}
-                contentContainerStyle={{ height: 70 }}
-              >
-                <View
-                  style={{
-                    flex: 1,
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Text style={{ color: 'green' }}>Visit</Text>
-                  <Text style={{ color: 'blue' }}>Find out More</Text>
-                </View>
-              </Tile>
-            </View>
-          </Card>
-          <Card
-            containerStyle={{
-              marginTop: 15,
-              marginBottom: 15,
-              height: 230,
-              paddingLeft: 10,
-            }}
-            title="AVATARS"
-          >
-            <Grid>
-              <Row>
-                <View style={{ marginBottom: 30, marginRight: 28 }}>
-                  <Avatar
-                    small
-                    rounded
-                    source={{
-                      uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
-                    }}
-                    onPress={() => console.log('Works!')}
-                    activeOpacity={0.7}
-                  />
-                </View>
-                <View style={{ marginBottom: 50, marginRight: 45 }}>
-                  <Avatar
-                    medium
-                    title="BP"
-                    onPress={() => console.log('Works!')}
-                    activeOpacity={0.7}
-                  />
-                </View>
-                <View style={{ marginBottom: 70, marginRight: 80 }}>
-                  <Avatar
-                    large
-                    icon={{ name: 'home' }}
-                    onPress={() => console.log('Works!')}
-                    activeOpacity={0.7}
-                  />
-                </View>
-                <View style={{ marginBottom: 50 }}>
-                  <Avatar
-                    xlarge
-                    rounded
-                    source={{
-                      uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
-                    }}
-                    onPress={() => console.log('Works!')}
-                    activeOpacity={0.7}
-                  />
-                </View>
-              </Row>
-            </Grid>
-          </Card>
-        </View>
-      </ScrollView>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  headerContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 40,
-    backgroundColor: colors.secondary,
-  },
-  heading: {
-    color: 'white',
-    marginTop: 10,
-    fontSize: 22,
-  },
-  fonts: {
-    marginBottom: 8,
-  },
-  user: {
-    flexDirection: 'row',
-    marginBottom: 6,
-  },
-  image: {
-    width: 30,
-    height: 30,
-    marginRight: 10,
-  },
-  name: {
-    fontSize: 16,
-    marginTop: 5,
-  },
-  social: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-});
-
-export default Icons;
diff --git a/example/src/views/icons_detail.js b/example/src/views/lists_detail.js
similarity index 100%
rename from example/src/views/icons_detail.js
rename to example/src/views/lists_detail.js
diff --git a/example/src/views/lists_home.js b/example/src/views/lists_home.js
new file mode 100644
index 0000000000..8efc3101cf
--- /dev/null
+++ b/example/src/views/lists_home.js
@@ -0,0 +1,415 @@
+import Expo from 'expo';
+import React, { Component } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  Image,
+  TouchableHighlight,
+  ListView,
+} from 'react-native';
+
+import {
+  Text,
+  Card,
+  ButtonGroup,
+  Slider,
+  Tile,
+  Grid,
+  Col,
+  Row,
+  Avatar,
+  Icon,
+  List,
+  ListItem,
+} from 'react-native-elements';
+
+import colors from 'HSColors';
+
+const users = [
+  {
+    name: 'brynn',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
+  },
+  {
+    name: 'thot leader',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg',
+  },
+  {
+    name: 'jsa',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg',
+  },
+  {
+    name: 'talhaconcepts',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg',
+  },
+  {
+    name: 'andy vitale',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg',
+  },
+  {
+    name: 'katy friedson',
+    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
+  },
+];
+
+const log = () => console.log('this is an example method');
+
+const list1 = [
+  {
+    title: 'Appointments',
+    icon: 'av-timer',
+  },
+  {
+    title: 'Trips',
+    icon: 'flight-takeoff',
+  },
+  {
+    title: 'Passwords',
+    icon: 'fingerprint',
+  },
+  {
+    title: 'Pitches',
+    icon: 'lightbulb-outline',
+  },
+  {
+    title: 'Updates',
+    icon: 'track-changes',
+  },
+];
+
+const list2 = [
+  {
+    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',
+  },
+  {
+    name: 'Amanda Martin',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
+    subtitle: 'CEO',
+  },
+  {
+    name: 'Christy Thomas',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
+    subtitle: 'Lead Developer',
+  },
+  {
+    name: 'Melissa Jones',
+    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
+    subtitle: 'CTO',
+  },
+];
+
+class Icons extends Component {
+  constructor() {
+    super();
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !== r2,
+    });
+
+    this.state = {
+      selectedIndex: 0,
+      value: 0.5,
+      dataSource: ds.cloneWithRows(list1),
+    };
+
+    this.updateIndex = this.updateIndex.bind(this);
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  updateIndex(selectedIndex) {
+    this.setState({ selectedIndex });
+  }
+
+  renderRow(rowData, sectionID) {
+    return (
+      <ListItem
+        key={sectionID}
+        onPress={log}
+        title={rowData.title}
+        icon={{ name: rowData.icon }}
+      />
+    );
+  }
+
+  render() {
+    const { navigation } = this.props;
+    const buttons = ['Button1', 'Button2'];
+    const { selectedIndex } = this.state;
+
+    return (
+      <ScrollView>
+        <View style={styles.headerContainer}>
+          <Icon color="white" name="invert-colors" size={62} />
+          <Text style={styles.heading}>Lists & More</Text>
+        </View>
+        <List>
+          {list2.map((l, i) => (
+            <ListItem
+              roundAvatar
+              avatar={{ uri: l.avatar_url }}
+              key={i}
+              onPress={log}
+              title={l.name}
+              subtitle={l.subtitle}
+            />
+          ))}
+        </List>
+        <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>
+        <List>
+          <ListView
+            renderRow={this.renderRow}
+            dataSource={this.state.dataSource}
+          />
+        </List>
+        <View style={{ marginTop: 20 }}>
+          <ButtonGroup
+            textStyle={{ fontSize: 13 }}
+            onPress={this.updateIndex}
+            selectedIndex={selectedIndex}
+            buttons={buttons}
+          />
+        </View>
+        <View style={styles.container}>
+          <Card title="CARD WITH DIVIDER">
+            {users.map((u, i) => {
+              return (
+                <View key={i} style={styles.user}>
+                  <Image
+                    style={styles.image}
+                    resizeMode="cover"
+                    source={{ uri: u.avatar }}
+                  />
+                  <Text style={styles.name}>{u.name}</Text>
+                </View>
+              );
+            })}
+          </Card>
+          <Card containerStyle={{ marginTop: 15 }} title="FONTS">
+            <Text style={styles.fonts} h1>h1 Heading</Text>
+            <Text style={styles.fonts} h2>h2 Heading</Text>
+            <Text style={styles.fonts} h3>h3 Heading</Text>
+            <Text style={styles.fonts} h4>h4 Heading</Text>
+            <Text style={styles.fonts}>Normal Text</Text>
+          </Card>
+          <Card
+            containerStyle={{ marginTop: 15, marginBottom: 15 }}
+            title="GRID LAYOUT"
+          >
+            <Grid
+              containerStyle={{
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                alignSelf: 'center',
+                padding: 10,
+              }}
+            >
+              <Col size={0.25}>
+                <TouchableHighlight onPress={() => console.log('hello')}>
+                  <Image
+                    source={require('../images/avatar1.jpg')}
+                    style={{ height: 50, width: 50, borderRadius: 25 }}
+                  />
+                </TouchableHighlight>
+              </Col>
+              <Col>
+                <Row size={0.75}>
+                  <Text style={{ fontSize: 22 }}>Adam McArther</Text>
+                </Row>
+                <Row>
+                  <Text style={{ color: 'grey' }}>Freelance developer</Text>
+                </Row>
+              </Col>
+            </Grid>
+          </Card>
+          <Card
+            containerStyle={{ marginTop: 15, marginBottom: 15 }}
+            title="TILES"
+          >
+            <View>
+              <Tile
+                imageSrc={{
+                  uri: 'https://static1.squarespace.com/static/5477887ae4b07c97883111ab/5478c08fe4b0fa4e5a552532/57e101f3579fb32aef30d4af/1491426124625/Porthmeor+Sunset+21.jpg',
+                }}
+                title="When I admire the wonders of a sunset or the beauty of the moon, my soul expands in the worship of the creator."
+                titleStyle={{ fontSize: 20 }}
+                featured
+                caption="Mahatma Gandhi"
+                activeOpacity={1}
+                width={310}
+              />
+            </View>
+            <View style={{ paddingTop: 20 }}>
+              <Tile
+                imageSrc={{
+                  uri: 'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
+                }}
+                icon={{
+                  name: 'heart',
+                  type: 'font-awesome',
+                  size: 60,
+                  color: 'red',
+                }}
+                featured
+                activeOpacity={0.8}
+                onPress={() => {
+                  'Tile pressed';
+                }}
+                width={310}
+              />
+            </View>
+            <View style={{ paddingTop: 20 }}>
+              <Tile
+                imageSrc={{
+                  uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg/320px-Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg',
+                }}
+                title="Half Dome, Yosemite"
+                titleStyle={{ fontSize: 20 }}
+                activeOpacity={1}
+                width={310}
+                contentContainerStyle={{ height: 70 }}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Text style={{ color: 'green' }}>Visit</Text>
+                  <Text style={{ color: 'blue' }}>Find out More</Text>
+                </View>
+              </Tile>
+            </View>
+          </Card>
+          <Card
+            containerStyle={{
+              marginTop: 15,
+              marginBottom: 15,
+              height: 230,
+              paddingLeft: 10,
+            }}
+            title="AVATARS"
+          >
+            <Grid>
+              <Row>
+                <View style={{ marginBottom: 30, marginRight: 28 }}>
+                  <Avatar
+                    small
+                    rounded
+                    source={{
+                      uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
+                    }}
+                    onPress={() => console.log('Works!')}
+                    activeOpacity={0.7}
+                  />
+                </View>
+                <View style={{ marginBottom: 50, marginRight: 45 }}>
+                  <Avatar
+                    medium
+                    title="BP"
+                    onPress={() => console.log('Works!')}
+                    activeOpacity={0.7}
+                  />
+                </View>
+                <View style={{ marginBottom: 70, marginRight: 80 }}>
+                  <Avatar
+                    large
+                    icon={{ name: 'home' }}
+                    onPress={() => console.log('Works!')}
+                    activeOpacity={0.7}
+                  />
+                </View>
+                <View style={{ marginBottom: 50 }}>
+                  <Avatar
+                    xlarge
+                    rounded
+                    source={{
+                      uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
+                    }}
+                    onPress={() => console.log('Works!')}
+                    activeOpacity={0.7}
+                  />
+                </View>
+              </Row>
+            </Grid>
+          </Card>
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  headerContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+    backgroundColor: colors.secondary,
+  },
+  heading: {
+    color: 'white',
+    marginTop: 10,
+    fontSize: 22,
+  },
+  fonts: {
+    marginBottom: 8,
+  },
+  user: {
+    flexDirection: 'row',
+    marginBottom: 6,
+  },
+  image: {
+    width: 30,
+    height: 30,
+    marginRight: 10,
+  },
+  name: {
+    fontSize: 16,
+    marginTop: 5,
+  },
+  social: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  subtitleView: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+    paddingTop: 5,
+  },
+  ratingImage: {
+    height: 19.21,
+    width: 100,
+  },
+  ratingText: {
+    paddingLeft: 10,
+    color: 'grey',
+  },
+});
+
+export default Icons;
diff --git a/example/src/views/pricing.js b/example/src/views/pricing.js
new file mode 100644
index 0000000000..58ca9c1ecd
--- /dev/null
+++ b/example/src/views/pricing.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { ScrollView, View, StyleSheet } from 'react-native';
+import colors from 'HSColors';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import { PricingCard, Text } from 'react-native-elements';
+
+class Pricing extends Component {
+  render() {
+    return (
+      <ScrollView style={{ backgroundColor: 'white' }}>
+        <View style={styles.hero}>
+          <Icon color="white" name="games" size={62} />
+          <Text style={styles.heading}>Pricing</Text>
+        </View>
+        <PricingCard
+          color={colors.primary}
+          title="Free"
+          price="$0"
+          info={['1 User', 'Basic Support', 'All Core Features']}
+          button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
+        />
+        <PricingCard
+          color={colors.secondary}
+          title="Starter"
+          price="$19"
+          info={['10 Users', 'Basic Support', 'All Core Features']}
+          button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
+        />
+        <PricingCard
+          color={colors.secondary2}
+          title="Enterprise"
+          price="$49"
+          info={['100 Users', 'One on One Support', 'All Core Features']}
+          button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+Pricing.navigationOptions = {
+  title: 'Pricing',
+};
+
+const styles = StyleSheet.create({
+  hero: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+    backgroundColor: colors.primary2,
+  },
+  heading: {
+    color: 'white',
+    marginTop: 10,
+    fontSize: 22,
+  },
+  titleText: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    paddingVertical: 5,
+    fontFamily: 'Menlo-Bold',
+    color: '#27ae60',
+  },
+  subtitleText: {
+    fontSize: 18,
+    fontWeight: '400',
+    textAlign: 'center',
+    fontFamily: 'Trebuchet MS',
+    color: '#34495e',
+  },
+  viewContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default Pricing;