From 4a646c40b54cb3703259fa450b2a6f7ced376633 Mon Sep 17 00:00:00 2001
From: Harry Gale <harry.n.gale@gmail.com>
Date: Sat, 25 Feb 2017 14:46:59 -0800
Subject: [PATCH 1/2] Reduce overdraw

---
 js/Background.js | 6 +-----
 js/Style.js      | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/js/Background.js b/js/Background.js
index c81f8ef..dc1a358 100644
--- a/js/Background.js
+++ b/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>
   )
diff --git a/js/Style.js b/js/Style.js
index 2e55a83..1bd048f 100644
--- a/js/Style.js
+++ b/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,
@@ -20,7 +19,6 @@ export default StyleSheet.create({
   imageContainer: {
     height: 200,
     flex: 0.8,
-    resizeMode: 'cover',
     justifyContent:'flex-end'
   },
   cellTitle: {
@@ -34,7 +32,6 @@ export default StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'flex-start',
     alignItems: 'stretch',
-    backgroundColor: '#2B2C2C',
     paddingTop: 80,
     paddingRight: 12,
     paddingBottom: 20,
@@ -43,7 +40,6 @@ export default StyleSheet.create({
   pageBackground: {
     flex: 1,
     width: null,
-    height: null,
-    backgroundColor: '#2B2C2C'
+    height: null
   }
 })

From c3c94498a8ef916a4a63226e0a94c86a5d1eb18f Mon Sep 17 00:00:00 2001
From: Harry Gale <harry.n.gale@gmail.com>
Date: Sat, 25 Feb 2017 15:26:52 -0800
Subject: [PATCH 2/2] Rewrite to use a recyclerview

---
 js/HomeScreen.js | 40 ++++++++++++++--------------------------
 js/ImageRow.js   | 12 ++++++++++++
 js/Style.js      |  5 ++++-
 3 files changed, 30 insertions(+), 27 deletions(-)
 create mode 100644 js/ImageRow.js

diff --git a/js/HomeScreen.js b/js/HomeScreen.js
index 74d2e17..b855baf 100644
--- a/js/HomeScreen.js
+++ b/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>
-    );
+    )
   }
 }
 
diff --git a/js/ImageRow.js b/js/ImageRow.js
new file mode 100644
index 0000000..eaa9b35
--- /dev/null
+++ b/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
diff --git a/js/Style.js b/js/Style.js
index 1bd048f..22a2354 100644
--- a/js/Style.js
+++ b/js/Style.js
@@ -14,7 +14,10 @@ export default StyleSheet.create({
   },
   cellContainer: {
     flexDirection: 'row',
-    paddingBottom: 10
+    paddingTop: 10,
+    paddingLeft: 24,
+    paddingRight: 24,
+    elevation: 2
   },
   imageContainer: {
     height: 200,