AccountsList

src/components/AccountsList.js

+import React, { Component, PropTypes } from 'react'
+import { Text, StyleSheet, ListView } from 'react-native'
+import AccountsListRow from './AccountsListRow'
+
+export default class AccountsList extends Component {
+  static propTypes = {
+    accounts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
+    this.state = {
+      dataSource: ds.cloneWithRows(props.accounts)
+    }
+  }
+
+  render() {
+    return (
+      <ListView
+        style={styles.view}
+        dataSource={this.state.dataSource}
+        renderRow={(rowData) => <AccountsListRow text={rowData}/>}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    marginTop: 60,
+    marginBottom: 50,
+  },
+})
+

src/components/AccountsListRow.js

+import React, { Component, PropTypes } from 'react'
+import { TouchableHighlight, StyleSheet, View, Text } from 'react-native'
+
+export default class AccountsListRow extends Component {
+  static propTypes = {
+    text: PropTypes.string.isRequired
+  }
+
+  render() {
+    return (
+      <TouchableHighlight>
+        <View>
+          <View style={styles.row}>
+            <Text style={styles.text}>{this.props.text}</Text>
+          </View>
+        </View>
+      </TouchableHighlight>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#F6F6F6',
+  },
+  text: {
+    flex: 1,
+  }
+})

src/components/App.js

 import React, { Component } from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 import { Provider, connect } from 'react-redux'
 import { createStore } from 'redux'
 import { Actions, ActionConst, Router, Scene } from 'react-native-router-flux'
 import reducers from '../reducers'
 import TabIcon from './TabIcon'
 import QrScanner from '../containers/QrScanner'
+import Accounts from '../containers/Accounts'
 
 const ConnectedRouter = connect()(Router)
 const store = createStore(reducers)
@@ -15,7 +16,7 @@ const scenes = Actions.create(
     <Scene key='tabs' tabs>
       <Scene key='send' component={View} title='Send TX' icon={TabIcon}/>
       <Scene key='scan' component={QrScanner} title='Scan QR' icon={TabIcon} initial={true}/>
-      <Scene key='accounts' component={View} title='Accounts' icon={TabIcon}/>
+      <Scene key='accounts' component={Accounts} title='Accounts' icon={TabIcon}/>
     </Scene>
   </Scene>
 )

src/components/Scanner.js

@@ -8,9 +8,13 @@ import {
 import Camera from 'react-native-camera';
 
 export default class Scanner extends Component {
+  static propTypes = {
+    onBarCodeRead: PropTypes.func.isRequired,
+  }
+
   render() {
     return (
-      <Camera onBarCodeRead={this.props.onBarCodeRead} style={styles.camera}>
+      <Camera onBarCodeRead={this.props.onBarCodeRead} style={styles.view}>
         <View style={styles.rectangleContainer}>
           <View style={styles.rectangle}/>
         </View>
@@ -19,13 +23,10 @@ export default class Scanner extends Component {
   }
 }
 
-Scanner.propTypes = {
-  onBarCodeRead: PropTypes.func.isRequired,
-}
-
 const styles = StyleSheet.create({
-  camera: {
+  view: {
     flex: 1,
+    marginTop: 60,
     marginBottom: 50,
   },
 

src/components/TabIcon.js

@@ -2,13 +2,13 @@ import React, { Component, PropTypes } from 'react'
 import { Text } from 'react-native'
 
 export default class TabIcon extends Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+  }
+
   render() {
     return (
       <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
     )
   }
 }
-
-TabIcon.propTypes = {
-  title: PropTypes.string.isRequired,
-}

src/containers/Accounts.js

+import React from 'react'
+import { connect } from 'react-redux'
+import AccountsList from '../components/AccountsList'
+
+const Accounts = connect(state => ({
+  accounts: state.accounts
+}))(AccountsList)
+
+export default Accounts

src/reducers/accounts.js

+const initialAccounts = [
+  '0xb794f5ea0ba39494ce839613fffba74279579268',
+  '0xe853c56864a2ebe4576a807d26fdc4a0ada51919',
+  '0x53d284357ec70ce289d6d64134dfac8e511c8a3d',
+  '0xd56d423cdc0e437babbdff79c4fa38904ff8d128'
+]
+
+export default function accounts(state = initialAccounts, action) {
+  return state
+}

src/reducers/index.js

 import { combineReducers } from 'redux'
+import accounts from './accounts'
 import routes from './routes'
 
 export default combineReducers({
+  accounts,
   routes,
 })