display publish date on file page

app/src/component/dateTime/view.js

@@ -32,12 +32,15 @@ class DateTime extends React.PureComponent<Props> {
       return date ? <View style={style}><Text style={textStyle}>{moment(date).from(moment())}</Text></View> : null;
     }
 
+    // TODO: formatOptions not working as expected in RN
+    // date.toLocaleDateString([locale, 'en-US'], formatOptions)}
+
     return (
       <View style={style}>
         <Text style={textStyle}>
           {date &&
             (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
-            date.toLocaleDateString([locale, 'en-US'], formatOptions)}
+            moment(date).format('MMMM D, YYYY')}
           {show === DateTime.SHOW_BOTH && ' '}
           {date &&
             (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&

app/src/page/file/view.js

@@ -20,6 +20,7 @@ import ImageViewer from 'react-native-image-zoom-viewer';
 import Button from 'component/button';
 import Colors from 'styles/colors';
 import ChannelPage from 'page/channel';
+import DateTime from 'component/dateTime';
 import FileDownloadButton from 'component/fileDownloadButton';
 import FileItemMedia from 'component/fileItemMedia';
 import FilePrice from 'component/filePrice';
@@ -567,6 +568,7 @@ class FilePage extends React.PureComponent {
                   <Text style={filePageStyle.title} selectable={true}>{title}</Text>
                   {channelName &&
                     <View style={filePageStyle.channelRow}>
+                      <View style={filePageStyle.publishInfo}>
                         <Link style={filePageStyle.channelName}
                               selectable={true}
                               text={channelName}
@@ -576,6 +578,13 @@ class FilePage extends React.PureComponent {
                                 const channelUri = normalizeURI(channelName);
                                 navigateToUri(navigation, channelUri);
                               }} />
+                        <DateTime
+                          style={filePageStyle.publishDate}
+                          textStyle={filePageStyle.publishDateText}
+                          block={height}
+                          formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
+                          show={DateTime.SHOW_DATE} />
+                      </View>
                       <View style={filePageStyle.subscriptionRow}>
                         <SubscribeButton
                           style={filePageStyle.actionButton}

app/src/styles/filePage.js

@@ -68,15 +68,25 @@ const filePageStyle = StyleSheet.create({
   },
   subscriptionRow: {
     flexDirection: 'row',
-    alignSelf: 'flex-end'
+    marginTop: 8
+  },
+  publishInfo: {
+    width: '50%',
+    marginTop: 6,
   },
   channelName: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 20,
-    marginTop: 6,
-    width: '49%',
     color: Colors.LbryGreen
   },
+  publishDateText: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 12,
+    color: Colors.DescriptionGrey
+  },
+  publishDate: {
+    marginTop: 4
+  },
   description: {
     color: Colors.DescriptionGrey,
     fontFamily: 'Inter-UI-Regular',