styling stuff is hard!

src/components/ResultItem.tsx

@@ -7,12 +7,28 @@ import {
 } from 'react-native';
 import _ from 'underscore';
 
+const RESULTS_DATA = require('../data/results');
+
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
   } as React.ViewStyle,
+  mainText: {
+    fontSize: 16,
+    marginBottom: 3,
+  } as React.TextStyle,
+  description: {
+    fontSize: 13,
+    color: '#888'
+  } as React.TextStyle,
+  column: {
+  } as React.ViewStyle,
+  rightColumn: {
+    flex: 1,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  } as React.ViewStyle
 });
 
 interface Props {
@@ -20,8 +36,17 @@ interface Props {
 }
 
 
+
 export default function Result(props: Props) {
   return (
-    <Text>{props.data.key}: {JSON.stringify(props.data.value)}</Text>
+    <View style={styles.container}>
+      <View style={[styles.column]}>
+        <Text style={styles.mainText}>{props.data.key}: {}</Text>
+        <Text style={styles.description}>Something else</Text>
+      </View>
+      <View style={[styles.column, styles.rightColumn]}>
+        <Text>foobar</Text>
+      </View>
+    </View>
   );
 }

src/components/Results.tsx

@@ -19,11 +19,11 @@ const styles = StyleSheet.create({
     flex: 1
   } as React.ViewStyle,
   listItem: {
+    flex: 1,
     borderBottomWidth: 1,
     borderBottomColor: '#333',
     paddingTop: 5,
     paddingBottom: 8,
-    paddingHorizontal: 16
   } as React.ViewStyle
 });
 

src/data/results.ts

@@ -0,0 +1 @@
+export default {};

src/views/main.tsx

@@ -11,16 +11,9 @@ import BlankResults from '../components/BlankResults';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'stretch',
     justifyContent: 'center',
     backgroundColor: '#FFF',
   } as React.ViewStyle,
-
-  text: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  } as React.TextStyle
 });