Showing app name on login page

src/components/AppVersion.js

@@ -5,9 +5,17 @@ import codePush from 'react-native-code-push';
 import styled from 'styled-components/native';
 
 import { contentPadding } from '../styles/variables';
-import { getStatusText, isCodePushRunningSomeTask } from '../utils/helpers/code-push';
+import {
+  appDisplayName,
+  appVersionText,
+  getStatusText,
+  isCodePushRunningSomeTask,
+} from '../utils/helpers/code-push';
 
 const Button = styled.TouchableOpacity`
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
   padding-horizontal: ${contentPadding}px;
 `;
 
@@ -20,40 +28,51 @@ export default class extends React.PureComponent {
   static defaultProps = {
     buttonProps: {},
     containerStyle: undefined,
+    showAppName: false,
   };
 
   state = { status: -1 };
   timeout = null;
 
   checkForAppUpdate = () => {
-    codePush.sync({
-      updateDialog: true,
-      installMode: codePush.InstallMode.IMMEDIATE,
-    }, status => {
-      clearTimeout(this.timeout);
+    codePush.sync(
+      {
+        updateDialog: true,
+        installMode: codePush.InstallMode.IMMEDIATE,
+      },
+      status => {
+        clearTimeout(this.timeout);
 
-      this.setState({ status }, () => {
-        if (isCodePushRunningSomeTask(status)) return;
+        this.setState({ status }, () => {
+          if (isCodePushRunningSomeTask(status)) return;
 
-        this.timeout = setTimeout(() => {
-          this.setState({ status: -1 });
-        }, 2000);
-      });
-    });
+          this.timeout = setTimeout(
+            () => {
+              this.setState({ status: -1 });
+            },
+            2000,
+          );
+        });
+      },
+    );
   };
 
   props: {
+    showAppName?: ?boolean,
     containerStyle?: ?Object,
     buttonProps?: Object,
   };
 
   render() {
     const { status } = this.state;
-    const { containerStyle, buttonProps, ...props } = this.props;
+    const { containerStyle, buttonProps, showAppName, ...props } = this.props;
+
+    const statusText = getStatusText(status);
 
     return (
       <Button onPress={this.checkForAppUpdate} style={containerStyle} {...buttonProps}>
-        <Text {...props}>{getStatusText(status)}</Text>
+        {showAppName && statusText === appVersionText && <Text {...props}>{appDisplayName} </Text>}
+        <Text {...props}>{statusText}</Text>
       </Button>
     );
   }

src/containers/screens/LoginScreen.js

@@ -124,7 +124,7 @@ export default class extends React.PureComponent {
         </Main>
 
         <Footer>
-          <AppVersion />
+          <AppVersion showAppName />
         </Footer>
       </Screen>
     );