merge some things, i think

app/api/token.js

@@ -10,4 +10,4 @@ async function set(token) {
   return await AsyncStorage.setItem(STORAGE_KEY, token);
 }
 
-export default { get, set };
+export default { get, set};

app/components/app.js

@@ -3,6 +3,7 @@ import React from 'react-native';
 import RouteMaster from './routes/RouteMaster';
 import RouteMapper from './navigation/RouteMapper';
 import GlobalStyles from '../settings/styles';
+import BusyIndicator from 'react-native-busy-indicator';
 
 const {
   Navigator,
@@ -33,6 +34,7 @@ export default class extends React.Component {
           nav={nav}
           currentRoute={props.route}
           {...props} />
+        <BusyIndicator />
       </View>
     );
   }

app/components/projects/ProjectItem.js

@@ -0,0 +1,15 @@
+import React from 'react-native';
+
+var {
+  View,
+  Text,
+  StyleSheet,
+} = React;
+
+export default class ProjectItem extends React.Component {
+  render() {
+    return (
+      <Text>{this.props.project.reponame}</Text>
+    );
+  }
+};

app/components/projects/ProjectList.js

@@ -0,0 +1,49 @@
+import React from 'react-native';
+
+import ProjectItem from './ProjectItem';
+
+var {
+  ListView,
+  StyleSheet,
+  Text,
+  ScrollView
+} = React;
+
+var styles = StyleSheet.create({
+  composerListView: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    padding: 15
+  },
+});
+
+export default class ProjectList extends React.Component {
+  constructor(props) {
+    super(props);
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    console.log(JSON.stringify(this.props.data));
+    this.state = {
+      dataSource: ds.cloneWithRows(this.props.data)
+    };
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  renderRow(project) {
+    return (
+      <ProjectItem project={project} />
+    );
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <ListView
+          contentContainerStyle={styles.composerListView}
+          dataSource={this.state.dataSource}
+          renderRow={this.renderRow} />
+      </ScrollView>
+    );
+  }
+};

app/components/routes/home.js

@@ -1,27 +1,21 @@
 import React from 'react-native';
 import { getProjects } from '../../api/CircleCI';
+import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
+import ProjectList from '../projects/ProjectList';
+import GlobalStyles from '../../settings/styles';
 
 const {
   StyleSheet,
   Text,
   View,
-  ScrollView,
   BackAndroid,
 } = React;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#333',
+    backgroundColor: GlobalStyles.get('CIRCLE_BG'),
   },
-  contentWrapper: {
-    flex: 0.85,
-    justifyContent: 'flex-start',
-    alignItems: 'center'
-  },
-  text: {
-    color: 'white'
-  }
 });
 
 export default class Home extends React.Component {
@@ -39,20 +33,30 @@ export default class Home extends React.Component {
 
   componentWillMount() {
     BackAndroid.addEventListener('hardwareBackPress', () => true);
+    loaderHandler.showLoader('Fetching Data');
   }
 
   componentDidMount() {
+    getProjects().then(function (data) {
+      this.setState({
+        projects: data
+      });
+    }.bind(this));
   }
 
   render() {
-    const data = JSON.stringify(this.state.projects) || 'No Data';
+    let list;
+    if (this.state.projects) {
+      list = (
+        <ProjectList data={this.state.projects} />
+      );
+      loaderHandler.hideLoader();
+    } else {
+      list = ( <View /> );
+    }
     return (
       <View style={styles.container}>
-        <ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
+        { list }
-            <View style={styles.contentWrapper}>
-              <Text style={styles.text}>{data}</Text>
-            </View>
-        </ScrollView>
       </View>
     );
   }

app/components/routes/info.js

@@ -16,7 +16,8 @@ const styles = StyleSheet.create({
   },
   contentWrapper: {
     justifyContent: 'flex-start',
-    alignItems: 'center'
+    alignItems: 'center',
+    padding: 10
   },
   text: {
     color: GlobalStyles.get('CIRCLE_TEXT')

app/components/routes/login.js

@@ -5,7 +5,6 @@ import RouteMaster from './RouteMaster';
 import { checkToken } from '../../api/CircleCI';
 import token from '../../api/token';
 import loaderHandler from 'react-native-busy-indicator/LoaderHandler';
-import BusyIndicator from 'react-native-busy-indicator';
 
 const dismissKeyboard = require('dismissKeyboard');
 
@@ -212,7 +211,6 @@ export default class Login extends React.Component {
           </TouchableHighlight>
         </View>
         <TokenHelp open={this.state.showTokenHelp} onClose={this.hideTokenHelp} />
-        <BusyIndicator />
       </View>
     );
   }