2 files changed, 25 insertions, 4 deletions
diff --git a/app/components/Settings.js b/app/components/Settings.js
index a25cb39f19..edd9d37f7a 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -14,13 +14,14 @@ import type { SettingsReduxState } from '../redux/settings/reducers';
 export type SettingsProps = {
   account: AccountReduxState,
   settings: SettingsReduxState,
+  version: string,
   onQuit: () => void,
   onClose: () => void,
   onViewAccount: () => void,
   onViewSupport: () => void,
   onViewPreferences: () => void,
   onViewAdvancedSettings: () => void,
-  onExternalLink: (type: string) => void
+  onExternalLink: (type: string) => void,
 };
 
 export default class Settings extends Component {
@@ -47,6 +48,9 @@ export default class Settings extends Component {
                 <View style={styles.settings__content}>
                   <View>
                     { this._renderTopButtons() }
+                    <View style={styles.settings__cell_spacer}/>
+                    { this._renderMiddleButtons() }
+                    <View style={styles.settings__cell_spacer}/>
                     { this._renderBottomButtons() }
                   </View>
                   { this._renderQuitButton() }
@@ -83,7 +87,7 @@ export default class Settings extends Component {
             {isOutOfTime ? (
               <Text style={styles.settings__account_paid_until_label__error} testName='settings__account_paid_until_label'>OUT OF TIME</Text>
             ) : (
-              <Text style={styles.settings__account_paid_until_label} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
+              <Text style={styles.settings__cell_subtext} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
             )}
             <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
           </View>
@@ -100,10 +104,27 @@ export default class Settings extends Component {
         <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
       </ButtonCell>
 
-      <View style={styles.settings__cell_spacer}></View>
     </View>;
   }
 
+  _renderMiddleButtons() {
+    return <View>
+      <ButtonCell testName='settings__version'>
+        <Text style={styles.settings__cell_label}>App version</Text>
+        <Text style={styles.settings__cell_subtext}>{this._formattedVersion()}</Text>
+      </ButtonCell>
+    </View>;
+  }
+
+  _formattedVersion() {
+    // the version in package.json has to be semver, but we use a YEAR.release-channel
+    // version scheme. in package.json we thus have to write YEAR.release.X-channel and
+    // this function is responsible for removing .X part.
+    return this.props.version
+      .replace('.0-', '-')  // remove the .0 in 2018.1.0-beta9
+      .replace(/\.0$/, ''); // remove the .0 in 2018.1.0
+  }
+
   _renderBottomButtons() {
     return <View>
       <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'>
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 15b55d5009..fb4570feec 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -119,7 +119,7 @@ export default Object.assign(createViewStyles({
     lineHeight: 26,
     color: 'rgba(255,255,255,0.8)'
   },
-  settings__account_paid_until_label:{
+  settings__cell_subtext:{
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '800',