optimise space usage by the page navigation buttons on the channel page

app/src/component/fileList/view.js

@@ -2,8 +2,8 @@
 import * as React from 'react';
 import { buildURI } from 'lbry-redux';
 import { FlatList } from 'react-native';
-import FileItem from '../fileItem';
-import discoverStyle from '../../styles/discover';
+import FileItem from 'component/fileItem';
+import discoverStyle from 'styles/discover';
 
 // In the future, all Flow types need to be specified in a common source (lbry-redux, perhaps?)
 type FileInfo = {
@@ -145,7 +145,15 @@ class FileList extends React.PureComponent<Props, State> {
   sortFunctions: {};
 
   render() {
-    const { fileInfos, hideFilter, checkPending, navigation, style } = this.props;
+    const {
+      contentContainerStyle,
+      fileInfos,
+      hideFilter,
+      checkPending,
+      navigation,
+      onEndReached,
+      style
+    } = this.props;
     const { sortBy } = this.state;
     const items = [];
 
@@ -170,7 +178,9 @@ class FileList extends React.PureComponent<Props, State> {
     return (
       <FlatList
         style={style}
+        contentContainerStyle={contentContainerStyle}
         data={items}
+        onEndReached={onEndReached}
         keyExtractor={(item, index) => item}
         renderItem={({item}) => (
           <FileItem style={discoverStyle.fileItem}

app/src/page/channel/view.js

@@ -11,7 +11,8 @@ import channelPageStyle from 'styles/channelPage';
 
 class ChannelPage extends React.PureComponent {
   state = {
-    page: 1
+    page: 1,
+    showPageButtons: false
   };
 
   componentDidMount() {
@@ -26,7 +27,7 @@ class ChannelPage extends React.PureComponent {
   handlePreviousPage = () => {
     const { uri, fetchClaims } = this.props;
     if (this.state.page > 1) {
-      this.setState({ page: this.state.page - 1 }, () => {
+      this.setState({ page: this.state.page - 1, showPageButtons: false }, () => {
         fetchClaims(uri, this.state.page);
       });
     }
@@ -35,7 +36,7 @@ class ChannelPage extends React.PureComponent {
   handleNextPage = () => {
     const { uri, fetchClaims, totalPages } = this.props;
     if (this.state.page < totalPages) {
-      this.setState({ page: this.state.page + 1 }, () => {
+      this.setState({ page: this.state.page + 1, showPageButtons: false }, () => {
         fetchClaims(uri, this.state.page);
       });
     }
@@ -69,7 +70,9 @@ class ChannelPage extends React.PureComponent {
                     hideFilter
                     fileInfos={claimsInChannel}
                     navigation={navigation}
-                    style={channelPageStyle.fileList} />
+                    style={channelPageStyle.fileList}
+                    contentContainerStyle={channelPageStyle.fileListContent}
+                    onEndReached={() => this.setState({ showPageButtons: true })} />
         ) : (
           <View style={channelPageStyle.busyContainer}>
             <Text style={channelPageStyle.infoText}>No content found.</Text>
@@ -81,7 +84,7 @@ class ChannelPage extends React.PureComponent {
       <View style={channelPageStyle.container}>
         <PageHeader title={name} onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} />
         {contentList}
-        {(totalPages > 1) &&
+        {(totalPages > 1) && this.state.showPageButtons &&
         <View style={channelPageStyle.pageButtons}>
           <View>
             {(this.state.page > 1) && <Button

app/src/styles/channelPage.js

@@ -10,9 +10,12 @@ const channelPageStyle = StyleSheet.create({
     flex: 1
   },
   fileList: {
-    paddingTop: 30,
     flex: 1,
-    marginBottom: 16
+    paddingTop: 30,
+    marginBottom: 60,
+  },
+  fileListContent: {
+    paddingBottom: 16
   },
   title: {
     color: Colors.LbryGreen,
@@ -33,11 +36,13 @@ const channelPageStyle = StyleSheet.create({
     marginLeft: 10
   },
   pageButtons: {
+    width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    position: 'absolute',
+    bottom: 76,
     paddingLeft: 16,
-    paddingRight: 16,
-    marginBottom: 76
+    paddingRight: 16
   },
   button: {
     backgroundColor: Colors.LbryGreen,