Merge pull request #700 from erkarl/sticky-list-headers

Make list headers sticky

Author: tanx

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={[0]}
         renderRow={this.props.renderItem}
         enableEmptySections={true}
       />

src/view/channel.js

@@ -108,7 +108,7 @@ const ChannelList = ({ store, channel }) => {
       <ListContent>
         <List
           data={channels}
-          renderHeader={() => <ChannelListHeader />}
+          renderHeader={ChannelListHeader}
           renderItem={item => (
             <ChannelListItem
               ch={item}
@@ -259,10 +259,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>

src/view/notification.js

@@ -26,7 +26,7 @@ const NotificationView = ({ store, nav }) => {
       <ListContent>
         <List
           data={notifications}
-          renderHeader={() => <NotificationListHeader />}
+          renderHeader={NotificationListHeader}
           renderItem={item => <NotificationListItem item={item} />}
         />
       </ListContent>
@@ -96,10 +96,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>

src/view/transaction.js

@@ -28,7 +28,7 @@ const TransactionView = ({ store, nav, transaction }) => {
       <ListContent>
         <List
           data={transactions}
-          renderHeader={() => <TransactionListHeader />}
+          renderHeader={TransactionListHeader}
           renderItem={item => (
             <TransactionListItem
               tx={item}
@@ -123,10 +123,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>

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>