Merge pull request #1 from dabit3/0.0.2

upgraded to version 0.0.2
react-native-elements · Sep 10, 2016 · b238e57 · b238e57
2 parents f6a2262 + 56e4e33
commit b238e57
Show file tree

Hide file tree

Showing 20 changed files with 652 additions and 182 deletions.
diff --git a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/Contents.json b/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/Contents.json
diff --git a/...HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-1.png b/...HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-1.png
diff --git a/...HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-2.png b/...HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome-2.png
diff --git a/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome.png b/ios/HackathonStarter/Images.xcassets/placeholderhome.imageset/placeholderhome.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "HackathonStarter",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start"
@@ -9,7 +9,7 @@
     "lodash": "^4.15.0",
     "react": "15.3.1",
     "react-native": "0.32.0",
-    "react-native-elements": "0.0.6",
+    "react-native-elements": "0.3.2",
     "react-native-tab-navigator": "^0.3.3",
     "react-native-vector-icons": "^2.1.0",
     "react-redux": "^4.4.5",

diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons'
 import colors from 'HSColors'
 import fonts from 'HSFonts'
 
-import Home from './home/HomeRootContainer'
+import Home from './home/HomeNav'
 import About from './about/AboutRootContainer'
 import Contact from './contact/ContactRootContainer'
 import Pricing from './pricing/PricingRootContainer'
@@ -27,6 +27,7 @@ class App extends Component {
     })
   }
   render () {
+    const { toggleSideMenu } = this.props
     const { selectedTab } = this.state
     return (
       <TabNavigator>
@@ -38,7 +39,7 @@ class App extends Component {
           renderIcon={() => <Icon color={colors.grey2} name='whatshot' size={26} />}
           renderSelectedIcon={() => <Icon color={colors.primary} name='whatshot' size={26} />}
           onPress={() => this.changeTab('home')}>
-          <Home />
+          <Home toggleSideMenu={toggleSideMenu} />
         </TabNavigator.Item>
         <TabNavigator.Item
           tabStyle={selectedTab !== 'about' && { marginBottom: -6 }}
@@ -52,25 +53,13 @@ class App extends Component {
           <About />
         </TabNavigator.Item>
         <TabNavigator.Item
-          tabStyle={[
-            selectedTab !== 'contact' && { marginBottom: -6 },
-            selectedTab === 'contact' && Platform.OS === 'android' && {marginBottom: -3}
-          ]}
+          tabStyle={selectedTab !== 'contact' && { marginBottom: -6 }}
           titleStyle={[styles.titleStyle, {marginTop: -1}]}
-          selectedTitleStyle={[
-            styles.titleSelected,
-            {marginBottom: 7},
-            Platform.OS === 'android' ? {marginTop: 1 } : {marginTop: -3}
-          ]}
+          selectedTitleStyle={[styles.titleSelected, {marginTop: -3, marginBottom: 7}]}
           selected={selectedTab === 'contact'}
           title={selectedTab === 'contact' ? 'CONTACT' : null}
           renderIcon={() => <Icon style={{paddingBottom: 4}} color={colors.grey2} name='contacts' size={26} />}
-          renderSelectedIcon={() => (
-              <Icon
-                color={colors.primary}
-                name='contacts'
-                size={Platform.OS === 'ios' ? 26 : 22 }  />
-            )}
+          renderSelectedIcon={() => <Icon color={colors.primary} name='contacts' size={26} />}
           onPress={() => this.changeTab('contact')}>
           <Contact />
         </TabNavigator.Item>

diff --git a/src/AppRootContainer.js b/src/AppRootContainer.js
@@ -1,10 +1,78 @@
 import React, { Component } from 'react'
+import { View } from 'react-native'
 import App from './App'
+import {
+  List,
+  ListItem,
+  SideMenu
+} from 'react-native-elements'
 
 class AppRootContainer extends Component {
+  constructor () {
+    super()
+    this.state = {
+      toggled: false
+    }
+    this.toggleSideMenu = this.toggleSideMenu.bind(this)
+  }
+  toggleSideMenu () {
+    this.setState({
+      toggled: !this.state.toggled
+    })
+  }
   render () {
+    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'
+      },
+      {
+        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'
+      }
+    ]
+    const MenuComponent = (
+      <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
+        <List containerStyle={{marginBottom: 20}}>
+        {
+          list.map((l, i) => (
+            <ListItem
+              roundAvatar
+              onPress={() => console.log('something')}
+              avatar={l.avatar_url}
+              key={i}
+              title={l.name}
+              subtitle={l.subtitle}
+            />
+          ))
+        }
+        </List>
+      </View>
+    )
     return (
-      <App />
+      <SideMenu
+        toggledContainerStyle={{borderLeftWidth: 1, borderLeftColor: '#ededed'}}
+        toggled={this.state.toggled}
+        MenuComponent={MenuComponent}>
+        <App toggleSideMenu={this.toggleSideMenu} />
+      </SideMenu>
     )
   }
 }

diff --git a/src/about/About.js b/src/about/About.js
@@ -4,9 +4,9 @@ import colors from 'HSColors'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 
 import {
-  RNEText,
-  RNECard,
-  RNESocialIcon
+  Text,
+  Card,
+  SocialIcon
 } from 'react-native-elements'
 
 let styles = {}
@@ -41,80 +41,143 @@ const users = [
 class About extends Component {
   render () {
     return (
-      <ScrollView>
+      <ScrollView style={{backgroundColor: 'white'}}>
         <View style={styles.headerContainer}>
           <Icon color='white' name='invert-colors' size={62} />
-          <RNEText style={styles.heading}>Components</RNEText>
+          <Text style={styles.heading}>Components</Text>
         </View>
         <View style={styles.container}>
-          <RNECard
+          <Card
             title='CARD WITH DIVIDER'>
             {
               users.map((u, i) => {
                 return (
                   <View key={i} style={styles.user}>
                     <Image
                       style={styles.image}
+                      resizeMode='center'
                       source={{uri: u.avatar}} />
-                    <RNEText style={styles.name}>{u.name}</RNEText>
+                    <Text style={styles.name}>{u.name}</Text>
                   </View>
                 )
               })
             }
-          </RNECard>
-          <RNECard containerStyle={{marginTop: 15}} title='FONTS'>
-            <RNEText style={styles.fonts} h1>h1 Heading</RNEText>
-            <RNEText style={styles.fonts} h2>h2 Heading</RNEText>
-            <RNEText style={styles.fonts} h3>h3 Heading</RNEText>
-            <RNEText style={styles.fonts} h4>h4 Heading</RNEText>
-            <RNEText style={styles.fonts} >Normal Text</RNEText>
-          </RNECard>
-          <RNECard
+          </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='SOCIAL ICONS'
             containerStyle={{marginTop: 15}}>
             <View style={styles.social}>
-              <RNESocialIcon
+              <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}>
+              <SocialIcon
+                raised={false}
                 type='facebook'
+                onPress={() => console.log('hi!')}
               />
-              <RNESocialIcon
+              <SocialIcon
                 type='twitter'
+                onPress={() => console.log('hi2!')}
               />
-              <RNESocialIcon
+              <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}>
+              <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'
               />
-              <RNESocialIcon
-                type='tumblr'
+              <SocialIcon
+                light
+                type='soundcloud'
               />
             </View>
-          </RNECard>
-          <RNECard
-            containerStyle={{marginTop: 15}}
+          </Card>
+          <Card
+            containerStyle={{marginTop: 15, marginBottom: 15}}
             title='SOCIAL BUTTONS'>
             <View style={styles.socialButtons}>
-              <RNESocialIcon
+              <SocialIcon
+                button
+                type='medium'
+              />
+              <SocialIcon
+                button
+                type='twitch'
+              />
+              <SocialIcon
                 title='Sign In With Facebook'
                 button
                 type='facebook'
               />
-              <RNESocialIcon
+              <SocialIcon
                 title='Some Twitter Message'
                 button
                 type='twitter'
               />
-              <RNESocialIcon
+              <SocialIcon
+                light
                 button
+                title='Some Instagram Message'
                 type='instagram'
               />
-              <RNESocialIcon
-                button
-                type='tumblr'
-              />
-              <RNESocialIcon
-                button
-                type='youtube'
-              />
             </View>
-          </RNECard>
+          </Card>
         </View>
       </ScrollView>
     )