From a53eda7961c8559df653aa6d1a2754dcc7cb2d6a Mon Sep 17 00:00:00 2001
From: Karl Ranna <karl@karlranna.com>
Date: Thu, 20 Sep 2018 17:34:40 +0300
Subject: [PATCH 1/6] Add stickyHeaderIndices prop to List component

---
 src/component/list.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/component/list.js b/src/component/list.js
index c3ebd078e..a26b4b9cb 100644
--- a/src/component/list.js
+++ b/src/component/list.js
@@ -50,6 +50,7 @@ export class List extends Component {
         ref={component => (this.list = component)}
         dataSource={this.dataSource}
         renderHeader={this.props.renderHeader}
+        stickyHeaderIndices={this.props.stickyHeaderIndices}
         renderRow={this.props.renderItem}
         enableEmptySections={true}
       />
@@ -61,6 +62,7 @@ List.propTypes = {
   data: PropTypes.array.isRequired,
   renderHeader: PropTypes.func,
   renderItem: PropTypes.func.isRequired,
+  stickyHeaderIndices: PropTypes.array,
 };
 
 //

From c88a5253297610421b1a1454395576c1c892c1d9 Mon Sep 17 00:00:00 2001
From: Karl Ranna <karl@karlranna.com>
Date: Thu, 20 Sep 2018 17:35:08 +0300
Subject: [PATCH 2/6] Make channel list header sticky

---
 src/view/channel.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/view/channel.js b/src/view/channel.js
index 5ceba9e61..7346e552e 100644
--- a/src/view/channel.js
+++ b/src/view/channel.js
@@ -107,8 +107,9 @@ const ChannelList = ({ store, channel }) => {
       />
       <ListContent>
         <List
+          stickyHeaderIndices={[0]}
           data={channels}
-          renderHeader={() => <ChannelListHeader />}
+          renderHeader={ChannelListHeader}
           renderItem={item => (
             <ChannelListItem
               ch={item}
@@ -259,10 +260,13 @@ const hStyles = StyleSheet.create({
     color: color.greyListHeader,
     fontSize: font.sizeXS,
   },
+  header: {
+    backgroundColor: color.blackDark,
+  },
 });
 
 const ChannelListHeader = () => (
-  <ListHeader>
+  <ListHeader style={hStyles.header}>
     <Text style={[iStyles.m, hStyles.txt]}>STATUS</Text>
     <Text style={[iStyles.m, hStyles.txt]}>CAPACITY</Text>
     <Text style={[iStyles.l, hStyles.txt]}>FUNDING TRANSACTION ID</Text>

From c76a759947204df6a9e2ada154ec93129433c9f2 Mon Sep 17 00:00:00 2001
From: Karl Ranna <karl@karlranna.com>
Date: Thu, 20 Sep 2018 17:41:30 +0300
Subject: [PATCH 3/6] Make notification list header sticky

---
 src/view/notification.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/view/notification.js b/src/view/notification.js
index 9229ffd76..c72ebe0d0 100644
--- a/src/view/notification.js
+++ b/src/view/notification.js
@@ -26,8 +26,9 @@ const NotificationView = ({ store, nav }) => {
       <ListContent>
         <List
           data={notifications}
-          renderHeader={() => <NotificationListHeader />}
+          renderHeader={NotificationListHeader}
           renderItem={item => <NotificationListItem item={item} />}
+          stickyHeaderIndices={[0]}
         />
       </ListContent>
     </Background>
@@ -96,10 +97,13 @@ const hStyles = StyleSheet.create({
     color: color.greyListHeader,
     fontSize: font.sizeXS,
   },
+  header: {
+    backgroundColor: color.blackDark,
+  },
 });
 
 const NotificationListHeader = () => (
-  <ListHeader>
+  <ListHeader style={hStyles.header}>
     <Text style={[iStyles.s, hStyles.txt]}>TYPE</Text>
     <Text style={[iStyles.m, hStyles.txt]}>TIME</Text>
     <Text style={[iStyles.l, hStyles.txt]}>DESCRIPTION</Text>

From 38bc300066a09b99175b050a7ca7425bf7082fae Mon Sep 17 00:00:00 2001
From: Karl Ranna <karl@karlranna.com>
Date: Thu, 20 Sep 2018 17:47:03 +0300
Subject: [PATCH 4/6] Make transactions list header sticky

---
 src/view/transaction.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/view/transaction.js b/src/view/transaction.js
index acb00e6de..3efdd8372 100644
--- a/src/view/transaction.js
+++ b/src/view/transaction.js
@@ -28,13 +28,14 @@ const TransactionView = ({ store, nav, transaction }) => {
       <ListContent>
         <List
           data={transactions}
-          renderHeader={() => <TransactionListHeader />}
+          renderHeader={TransactionListHeader}
           renderItem={item => (
             <TransactionListItem
               tx={item}
               onSelect={() => transaction.select({ item })}
             />
           )}
+          stickyHeaderIndices={[0]}
         />
       </ListContent>
     </Background>
@@ -123,10 +124,13 @@ const hStyles = StyleSheet.create({
     color: color.greyListHeader,
     fontSize: font.sizeXS,
   },
+  header: {
+    backgroundColor: color.blackDark,
+  },
 });
 
 const TransactionListHeader = () => (
-  <ListHeader style={iStyles.item}>
+  <ListHeader style={[iStyles.item, hStyles.header]}>
     <View style={iStyles.i} />
     <Text style={[iStyles.m, hStyles.txt]}>STATUS</Text>
     <Text style={[iStyles.m, hStyles.txt]}>DATE</Text>

From faaf3b07aca179803eb6421ce12ce56977753525 Mon Sep 17 00:00:00 2001
From: Karl Ranna <karl@karlranna.com>
Date: Wed, 3 Oct 2018 16:35:27 +0300
Subject: [PATCH 5/6] Force sticky headers for all list components

---
 src/component/list.js    | 3 +--
 src/view/channel.js      | 1 -
 src/view/notification.js | 1 -
 src/view/transaction.js  | 1 -
 4 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/component/list.js b/src/component/list.js
index a26b4b9cb..59df69051 100644
--- a/src/component/list.js
+++ b/src/component/list.js
@@ -50,7 +50,7 @@ export class List extends Component {
         ref={component => (this.list = component)}
         dataSource={this.dataSource}
         renderHeader={this.props.renderHeader}
-        stickyHeaderIndices={this.props.stickyHeaderIndices}
+        stickyHeaderIndices={[0]}
         renderRow={this.props.renderItem}
         enableEmptySections={true}
       />
@@ -62,7 +62,6 @@ List.propTypes = {
   data: PropTypes.array.isRequired,
   renderHeader: PropTypes.func,
   renderItem: PropTypes.func.isRequired,
-  stickyHeaderIndices: PropTypes.array,
 };
 
 //
diff --git a/src/view/channel.js b/src/view/channel.js
index 7346e552e..2ee1b3095 100644
--- a/src/view/channel.js
+++ b/src/view/channel.js
@@ -107,7 +107,6 @@ const ChannelList = ({ store, channel }) => {
       />
       <ListContent>
         <List
-          stickyHeaderIndices={[0]}
           data={channels}
           renderHeader={ChannelListHeader}
           renderItem={item => (
diff --git a/src/view/notification.js b/src/view/notification.js
index c72ebe0d0..ad78af718 100644
--- a/src/view/notification.js
+++ b/src/view/notification.js
@@ -28,7 +28,6 @@ const NotificationView = ({ store, nav }) => {
           data={notifications}
           renderHeader={NotificationListHeader}
           renderItem={item => <NotificationListItem item={item} />}
-          stickyHeaderIndices={[0]}
         />
       </ListContent>
     </Background>
diff --git a/src/view/transaction.js b/src/view/transaction.js
index 3efdd8372..3c5845b50 100644
--- a/src/view/transaction.js
+++ b/src/view/transaction.js
@@ -35,7 +35,6 @@ const TransactionView = ({ store, nav, transaction }) => {
               onSelect={() => transaction.select({ item })}
             />
           )}
-          stickyHeaderIndices={[0]}
         />
       </ListContent>
     </Background>

From 6f266695193fed24af6a957244c032ffeb648f44 Mon Sep 17 00:00:00 2001
From: Karl Ranna <karl@karlranna.com>
Date: Thu, 4 Oct 2018 18:56:00 +0300
Subject: [PATCH 6/6] Add background color to list header in List story

---
 stories/component/list-story.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/component/list-story.js b/stories/component/list-story.js
index 2dcd5ba0d..8b6839212 100644
--- a/stories/component/list-story.js
+++ b/stories/component/list-story.js
@@ -16,7 +16,7 @@ storiesOf('List', module).add('List Content', () => (
     <List
       data={[...Array(1000)].map((x, i) => ({ id: String(i), data: 'foo' }))}
       renderHeader={() => (
-        <ListHeader>
+        <ListHeader style={{ backgroundColor: color.white }}>
           <Text style={{ flex: 1, color: color.greyText }}>ID</Text>
           <Text style={{ flex: 1, color: color.greyText }}>Data</Text>
         </ListHeader>