list items with picture thumbnail

components/ListItem.js

@@ -0,0 +1,55 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ * @flow
+ */
+
+ import React, { Component } from 'react';
+ import {
+   StyleSheet,
+   Text,
+   TouchableOpacity,
+   Image,
+   View
+ } from 'react-native';
+
+import colors from '../utils/colors';
+
+const placeholder = require('../assets/default.png');
+
+const ListItem = ({ text, imageUrl }) => {
+   const image = (
+      imageUrl ? {uri: imageUrl} : placeholder
+   );
+
+   return (
+      <TouchableOpacity
+         underlayColor={ colors.grey }>
+
+         <View style={ styles.mediaObject}>
+            <Image source={ image } style={ styles.image }/>
+            <Text style={ styles.text }> { text }</Text>
+         </View>
+
+      </TouchableOpacity>
+   );
+};
+
+export default ListItem;
+
+const styles = StyleSheet.create({
+   mediaObject: {
+      flex: 1,
+      alignItems: 'center',
+      flexDirection: 'row',
+      marginBottom: 10,
+   },
+   text: {flex: 1},
+   image: {
+      backgroundColor: colors.grey,
+      width: 40,
+      height: 40,
+      marginRight: 16,
+      marginLeft: 16,
+   }
+});

components/Main.js

@@ -6,47 +6,72 @@
 
  import React, { Component } from 'react';
  import {
-   AppRegistry,
    StyleSheet,
    Text,
+   TextInput,
+   ListView,
+   StatusBar,
    View
  } from 'react-native';
 
+import ListItem from './ListItem';
+import colors from '../utils/colors';
+
 export default class Main extends Component {
+   constructor(props){
+      super(props);
+
+      const dataSource = new ListView.DataSource({
+         rowHasChanged: (r1, r2) => r1 !== r2
+      });
+
+      const data = ['Spectacles', 'Giraffe', 'Turtle', 'Shark', 'Lamp',
+      'Beef', 'Drawer', 'Brocoli', 'Raspberries', 'Plate', 'Zebra'];
+
+      this.state = { artists: dataSource.cloneWithRows(data) }
+   }
+
+   renderRow = (text, sId, rId) => {
+      return (
+         <ListItem index={ rId }
+            text={ text }
+            image={ null } />
+      );
+   };
    render() {
-     return (
-       <View style={styles.container}>
-         <Text style={styles.welcome}>
-           Welcome to React Native modified from Main !
-         </Text>
-         <Text style={styles.instructions}>
-           To get started, edit index.ios.js
-         </Text>
-         <Text style={styles.instructions}>
-           Press Cmd+R to reload,{'\n'}
-           Cmd+D or shake for dev menu
-         </Text>
-       </View>
-     );
+      const { artists } = this.state;
+      return (
+         <View style={styles.container}>
+
+            <StatusBar barStyle="default" />
+
+            <TextInput style={ styles.searchBox } />
+
+            <ListView dataSource={ artists }
+               style={{flex:1, alignSelf: 'stretch'}}
+               renderRow={ this.renderRow } />
+         </View>
+      );
    }
  }
 
  const styles = StyleSheet.create({
    container: {
- flex: 1,/*import colors from './utils/colors';*/
-
-     justifyContent: 'center',
-     alignItems: 'center',
-     backgroundColor: '#F5FCFF',
+      paddingTop: 64,
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.white
    },
-   welcome: {
-     fontSize: 20,
-     textAlign: 'center',
-     margin: 10,
+   searchBox: {
+     height: 40,
+     borderColor: colors.black,
+     borderWidth: 2,
+     margin: 16,
+     paddingLeft: 10,
+     fontWeight: '800'
    },
-   instructions: {
-     textAlign: 'center',
+   row: {
      color: '#333333',
-     marginBottom: 5,
    },
  });

components/sample.js

@@ -0,0 +1,52 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ * @flow
+ */
+
+ import React, { Component } from 'react';
+ import {
+   AppRegistry,
+   StyleSheet,
+   Text,
+   View
+ } from 'react-native';
+
+export default class Main extends Component {
+   render() {
+     return (
+       <View style={styles.container}>
+         <Text style={styles.welcome}>
+           Welcome to React Native modified from Main !
+         </Text>
+         <Text style={styles.instructions}>
+           To get started, edit index.ios.js
+         </Text>
+         <Text style={styles.instructions}>
+           Press Cmd+R to reload,{'\n'}
+           Cmd+D or shake for dev menu
+         </Text>
+       </View>
+     );
+   }
+ }
+
+ const styles = StyleSheet.create({
+   container: {
+ flex: 1,/*import colors from './utils/colors';*/
+
+     justifyContent: 'center',
+     alignItems: 'center',
+     backgroundColor: '#F5FCFF',
+   },
+   welcome: {
+     fontSize: 20,
+     textAlign: 'center',
+     margin: 10,
+   },
+   instructions: {
+     textAlign: 'center',
+     color: '#333333',
+     marginBottom: 5,
+   },
+ });

utils/colors.js

@@ -1,5 +1,6 @@
 export default {
   black: '#444',
   white: '#fff',
-  blue: '#3456DA'
+  blue: '#3456DA',
+  grey: '#C0C0C0'
 }