updated image, added lists

Author: dabit3

README.md

@@ -1,6 +1,6 @@
-# 🔥🔥🔥 React Native Hackathon Starter Project & UI Toolkit 🔥🔥🔥
+React Native Hackathon Starter Project & UI Toolkit
 
-![React Native UI Toolkit](http://i.imgur.com/80RWAyT.png)
+![React Native UI Toolkit](http://i.imgur.com/QsxIkuW.png)
 
 ### Included
 - [x] [Buttons](https://github.com/dabit3/react-native-hackathon-starter#buttons)

src/App.js

@@ -9,6 +9,7 @@ import Home from './home/HomeRootContainer'
 import About from './about/AboutRootContainer'
 import Contact from './contact/ContactRootContainer'
 import Pricing from './pricing/PricingRootContainer'
+import More from './more/MoreRootContainer'
 
 let styles = {}
 
@@ -72,6 +73,17 @@ class App extends Component {
           onPress={() => this.changeTab('pricing')}>
           <Pricing />
         </TabNavigator.Item>
+        <TabNavigator.Item
+          tabStyle={selectedTab !== 'more' && { marginBottom: -6 }}
+          titleStyle={[styles.titleStyle, {marginTop: -1}]}
+          selectedTitleStyle={[styles.titleSelected, {marginTop: -3, marginBottom: 8}]}
+          selected={selectedTab === 'more'}
+          title={selectedTab === 'more' ? 'MORE' : null}
+          renderIcon={() => <Icon style={{paddingBottom: 4}} color={colors.grey2} name='list' size={26} />}
+          renderSelectedIcon={() => <Icon color={colors.primary} name='list' size={26} />}
+          onPress={() => this.changeTab('more')}>
+          <More />
+        </TabNavigator.Item>
       </TabNavigator>
 
     )

src/components/form/FormLabel.js

@@ -10,9 +10,9 @@ import Text from 'HSText'
 
 let styles = {}
 
-const FormLabel = ({containerStyle, inputStyle, children}) => (
+const FormLabel = ({containerStyle, labelStyle, children}) => (
   <View style={[styles.container, containerStyle && containerStyle]}>
-    <Text style={styles.label}>{children.toUpperCase()}</Text>
+    <Text style={[styles.label, labelStyle && labelStyle]}>{children.toUpperCase()}</Text>
   </View>
 )
 

src/components/linkList/LinkItem.js

@@ -0,0 +1,27 @@
+/**
+ * @providesModule HSList
+ */
+
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import colors from 'HSColors'
+let styles
+
+const Component = ({children, containerStyle}) => (
+  <View style={[styles.listContainer, containerStyle && containerStyle]}>
+    {children}
+  </View>
+)
+
+Component.propTypes = {}
+
+styles = StyleSheet.create({
+  listContainer: {
+    marginTop: 20,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: colors.greyOutline
+  }
+})
+
+export default Component

src/components/linkList/LinkList.js

@@ -0,0 +1,162 @@
+/**
+ * @providesModule HSListItem
+ */
+
+import React, { PropTypes } from 'react'
+import { View, StyleSheet, TouchableHighlight, Image, Platform } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import Text from 'HSText'
+import colors from 'HSColors'
+import fonts from 'HSFonts'
+let styles
+
+const ListItem = ({
+  onPress,
+  title,
+  icon,
+  rightIcon,
+  avatar,
+  avatarStyle,
+  underlayColor,
+  subtitle,
+  subtitleStyle,
+  containerStyle,
+  wrapperStyle,
+  titleStyle,
+  hideChevron,
+  chevronColor,
+  roundAvatar
+}) => {
+  const Component = onPress ? TouchableHighlight : View
+  return (
+    <Component
+      onPress={onPress}
+      underlayColor={underlayColor}
+      style={[styles.container, containerStyle && containerStyle]}>
+      <View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
+        {
+          icon && icon.name && (
+            <Icon
+              size={28}
+              style={styles.icon}
+              name={icon.name}
+              color={icon.color || colors.grey4}
+            />
+          )
+        }
+        {
+          avatar && (
+            <Image
+              style={[
+                styles.avatar,
+                roundAvatar && {borderRadius: 15},
+                avatarStyle && avatarStyle]}
+              source={{uri: avatar}}
+              />
+          )
+        }
+        <View style={styles.titleContainer}>
+          <Text
+            style={[
+              styles.title,
+              titleStyle && titleStyle,
+              !icon && {marginLeft: 10}
+            ]}>{title}</Text>
+          {subtitle && (
+            <Text
+              style={[
+                styles.subtitle,
+                !icon && {marginLeft: 10},
+                subtitleStyle && subtitleStyle
+              ]}>{subtitle}</Text>
+          )}
+        </View>
+        {
+          onPress && !hideChevron && (
+            <View style={styles.chevronContainer}>
+              <Icon
+                style={styles.chevron}
+                size={28}
+                name={rightIcon}
+                color={chevronColor} />
+            </View>
+          )
+        }
+      </View>
+    </Component>
+  )
+}
+
+ListItem.defaultProps = {
+  underlayColor: 'white',
+  chevronColor: colors.grey4,
+  rightIcon: 'chevron-right',
+  hideChevron: false,
+  roundAvatar: false
+}
+
+ListItem.propTypes = {
+  title: PropTypes.string,
+  avatar: PropTypes.any,
+  icon: PropTypes.any,
+  onPress: PropTypes.func,
+  rightIcon: PropTypes.string,
+  underlayColor: PropTypes.string,
+  subtitle: PropTypes.string,
+  subtitleStyle: PropTypes.any,
+  containerStyle: PropTypes.any,
+  wrapperStyle: PropTypes.any,
+  titleStyle: PropTypes.any,
+  hideChevron: PropTypes.bool,
+  chevronColor: PropTypes.string,
+  roundAvatar: PropTypes.bool
+}
+
+styles = StyleSheet.create({
+  avatar: {
+    width: 34,
+    height: 34
+  },
+  container: {
+    padding: 10,
+    borderBottomColor: '#ededed',
+    borderBottomWidth: 1,
+    backgroundColor: 'white'
+  },
+  wrapper: {
+    flexDirection: 'row'
+  },
+  icon: {
+    marginRight: 10
+  },
+  title: {
+    fontSize: 16,
+    color: colors.grey1,
+    marginTop: -2
+  },
+  subtitle: {
+    color: colors.grey3,
+    fontSize: 12,
+    marginTop: 1,
+    ...Platform.select({
+      ios: {
+        fontFamily: fonts.ios.bold
+      },
+      android: {
+        fontFamily: fonts.android.bold
+      }
+    })
+  },
+  titleContainer: {
+    justifyContent: 'center'
+  },
+  chevronContainer: {
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  },
+  chevron: {
+  }
+})
+
+export default ListItem