Perf example listview

js/Background.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Image, View } from 'react-native'
-import bgImage from './assets/bg_transparent.png'
+import bgImage from './assets/bg_solid.png'
 
 import style from './Style'
 
@@ -13,16 +13,12 @@ export const BaseView = (props) => {
 }
 
 export const BgView = (props) => {
-  const propStyle = {
-    backgroundColor: 'transparent'
-  }
 
   return (
     <Image
       source={bgImage}
       style={style.pageBackground}>
       <BaseView
-        style={propStyle}
         {...props} />
     </Image>
   )

js/HomeScreen.js

@@ -1,42 +1,30 @@
 import React from 'react'
-import { Text, View, Button, Dimensions, Image, ScrollView } from 'react-native'
+import { ListView } from 'react-native'
 
 import { FlickrImages } from './FlickrImages'
-
+import ImageRow from './ImageRow'
 import { BgView } from './Background'
 import style from './Style'
 
 class HomeScreen extends React.Component {
-  renderCells (data) {
-    return data.map((cell, index) => {
-      const {uri} = cell
-      return (
-        <View key={index} style={style.cellContainer}>
-          <Image style={style.imageContainer} source={{uri:uri}}>
-          </Image>
-        </View>
-      )
-    })
-  }
-
-  renderImageCells (cellData) {
-    return (
-      <View style={style.imageCellsContainer}>
-        {this.renderCells(cellData)}
-      </View>
-    )
+  constructor(props) {
+    super(props)
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.uri !== r2.uri})
+    this.state = {
+      dataSource: ds.cloneWithRows(FlickrImages)
+    }
   }
 
   render() {
-    const { height } = Dimensions.get('window')
-    let cells = this.renderImageCells(FlickrImages)
     return (
       <BgView>
-        <ScrollView contentContainerStyle={{justifyContent: 'center'}} style={[{height:height}]}>
-          {cells}
-        </ScrollView>
+        <ListView
+          contentContainerStyle={{justifyContent: 'center'}}
+          dataSource={this.state.dataSource}
+          renderRow={(rowData) => <ImageRow {...rowData} />}
+        />
       </BgView>
-    );
+    )
   }
 }
 

js/ImageRow.js

@@ -0,0 +1,12 @@
+
+import React from 'react'
+import { View, Image } from 'react-native'
+
+import style from './Style'
+
+const ImageRow = (props) => (
+  <View style={style.cellContainer}>
+    <Image style={style.imageContainer} source={{uri:props.uri}}/>
+  </View>
+)
+export default ImageRow

js/Style.js

@@ -5,7 +5,6 @@ export default StyleSheet.create({
     flexDirection: 'column',
     flex:1,
     justifyContent:'center',
-    backgroundColor: 'transparent',
     paddingTop: 20,
     paddingLeft: 24,
     paddingRight: 24,
@@ -15,12 +14,14 @@ export default StyleSheet.create({
   },
   cellContainer: {
     flexDirection: 'row',
-    paddingBottom: 10
+    paddingTop: 10,
+    paddingLeft: 24,
+    paddingRight: 24,
+    elevation: 2
   },
   imageContainer: {
     height: 200,
     flex: 0.8,
-    resizeMode: 'cover',
     justifyContent:'flex-end'
   },
   cellTitle: {
@@ -34,7 +35,6 @@ export default StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'flex-start',
     alignItems: 'stretch',
-    backgroundColor: '#2B2C2C',
     paddingTop: 80,
     paddingRight: 12,
     paddingBottom: 20,
@@ -43,7 +43,6 @@ export default StyleSheet.create({
   pageBackground: {
     flex: 1,
     width: null,
-    height: null,
-    backgroundColor: '#2B2C2C'
+    height: null
   }
 })