Merge pull request #487 from lbryio/channel-page-header

add channel name to channel page

app/src/page/channel/view.js

@@ -6,6 +6,7 @@ import Colors from 'styles/colors';
 import Button from 'component/button';
 import FileList from 'component/fileList';
 import PageHeader from 'component/pageHeader';
+import SubscribeButton from 'component/subscribeButton';
 import UriBar from 'component/uriBar';
 import channelPageStyle from 'styles/channelPage';
 
@@ -82,7 +83,11 @@ class ChannelPage extends React.PureComponent {
 
     return (
       <View style={channelPageStyle.container}>
-        <PageHeader title={name} onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} />
+        <UriBar value={uri} navigation={navigation} />
+        <View style={channelPageStyle.channelHeader}>
+          <Text style={channelPageStyle.channelName}>{name}</Text>
+          <SubscribeButton style={channelPageStyle.subscribeButton} uri={uri} name={name} />
+        </View>
         {contentList}
         {(totalPages > 1) && this.state.showPageButtons &&
         <View style={channelPageStyle.pageButtons}>
@@ -99,7 +104,6 @@ class ChannelPage extends React.PureComponent {
                                                disabled={!!fetching}
                                                onPress={this.handleNextPage} />}
         </View>}
-        <UriBar value={uri} navigation={navigation} />
       </View>
     )
   }

app/src/styles/channelPage.js

@@ -39,7 +39,7 @@ const channelPageStyle = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     position: 'absolute',
-    bottom: 76,
+    bottom: 16,
     paddingLeft: 16,
     paddingRight: 16
   },
@@ -50,6 +50,23 @@ const channelPageStyle = StyleSheet.create({
   },
   nextButton: {
     alignSelf: 'flex-end'
+  },
+  channelHeader: {
+    marginTop: 60,
+    marginLeft: 16,
+    marginRight: 16
+  },
+  channelName: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 24,
+    marginTop: 16,
+    marginBottom: 8
+  },
+  subscribeButton: {
+    alignSelf: 'flex-start',
+    backgroundColor: Colors.White,
+    paddingLeft: 16,
+    paddingRight: 16
   }
 });