Add description and icons to SpotCard

jadnco · Feb 15, 2016 · 0773b7f · 0773b7f
1 parent b72d054
commit 0773b7f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/app/components/SpotCard.jsx b/app/components/SpotCard.jsx
@@ -13,6 +13,7 @@ import React, {
 } from 'react-native';
 
 import ResponsiveImage from './ResponsiveImage';
+import Icon from 'react-native-vector-icons/EvilIcons';
 
 import Avatar from './Avatar';
 
@@ -46,17 +47,45 @@ class SpotCard extends Component {
 
         <ResponsiveImage source={data.img} style={styles.image} />
 
-        <View style={{ padding: 10, flex: 1, flexDirection: 'row' }}>
-          <TouchableOpacity
-            activeOpacity={0.8}
-            onPress={() => push({ component: ProfileView, ...data.spotter })}
-          >
-
-            <Avatar size={40} />
-          </TouchableOpacity>
-          <View>
-            <Text style={styles.spotterName}>{data.spotter.name}</Text>
-            <Text style={styles.timestamp}>@{data.spotter.handle}</Text>
+        <View style={{ flexDirection: 'column' }}>
+
+          <View style={{ flexDirection: 'column', padding: 14 }}>
+            <View style={{ flexDirection: 'row' }}>
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={() => push({ component: ProfileView, ...data.spotter })}
+              >
+
+                <Avatar size={40} />
+              </TouchableOpacity>
+
+              <View>
+                <Text style={styles.spotterName}>{data.spotter.name}</Text>
+                <Text style={styles.timestamp}>@{data.spotter.handle}</Text>
+              </View>
+            </View>
+
+            <View style={{ paddingTop: 14 }}>
+              <Text>{data.description}</Text>
+            </View>
+          </View>
+
+          <View style={{ padding: 14, borderTopWidth: 1, borderColor: '#EEE', flexDirection: 'row' }}>
+            <View style={{ flexDirection: 'row' }}>
+              <Icon name="star" size={30} color="#AAA" />
+              <Text style={{ marginLeft: 8, marginTop: 4, color: '#AAA' }}>{data.likesCount}</Text>
+            </View>
+            <View style={{ marginLeft: 16, flexDirection: 'row' }}>
+              <Icon name="comment" size={30} color="#AAA" />
+              <Text style={{ marginLeft: 8, marginTop: 4, color: '#AAA' }}>{data.commentsCount}</Text>
+            </View>
+
+            <Icon
+              name="share-apple"
+              size={30}
+              color="#AAA"
+              style={{ textAlign: 'right', flex: 1 }}
+            />
           </View>
         </View>
       </TouchableOpacity>

diff --git a/app/views/Feed.jsx b/app/views/Feed.jsx
@@ -46,6 +46,9 @@ class Feed extends Component {
         img: 'http://grantandgreen.de/wp-content/uploads/2015/04/1-Jaguar-F-type-Coupe-main-image-large.jpg',
         title: '2016 Jaguar F-Type R AWD',
         created: '12h',
+        likesCount: 198,
+        commentsCount: 27,
+        description: 'A very cool shot I got while hiking up some mountains.',
         spotter: {
           name: 'Oscar Isaac',
           handle: 'oscar',

diff --git a/index.ios.js b/index.ios.js
@@ -54,7 +54,7 @@ class locus extends Component {
 
   renderScene(route: {component: ReactElement}, navigator: Navigator): ReactElement {
     let { component, ...props } = route;
-    const isInitialRoute = Object.is(navigator.props.initialRoute.component, route.component);
+    const isInitialRoute = Object.is(navigator.props.initialRoute.component, component);
 
     return (