fix: Dynamic status bar (#641)

Closes #4

App.js

@@ -1,14 +1,19 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import styled from 'styled-components/native';
-import { AppRegistry, AsyncStorage, LayoutAnimation } from 'react-native';
+import {
+  AppRegistry,
+  AsyncStorage,
+  LayoutAnimation,
+  StatusBar,
+} from 'react-native';
 import { persistStore } from 'redux-persist';
 import createEncryptor from 'redux-persist-transform-encrypt';
 import DeviceInfo from 'react-native-device-info';
 import md5 from 'md5';
 import codePush from 'react-native-code-push';
 
-import { colors } from 'config';
+import { colors, getStatusBarConfig } from 'config';
 import { getCurrentLocale, configureLocale } from 'utils';
 import { GitPoint } from './routes';
 import { configureStore } from './root.store';
@@ -42,6 +47,7 @@ class App extends Component {
     this.state = {
       rehydrated: false,
     };
+    this.statusBarHandler = this.statusBarHandler.bind(this);
   }
 
   componentWillMount() {
@@ -77,6 +83,31 @@ class App extends Component {
     LayoutAnimation.spring();
   }
 
+  getCurrentRouteName(navigationState) {
+    if (!navigationState) {
+      return null;
+    }
+    const route = navigationState.routes[navigationState.index];
+
+    if (route.routes) {
+      return this.getCurrentRouteName(route);
+    }
+
+    return route.routeName;
+  }
+
+  statusBarHandler(prev, next) {
+    const routeName = this.getCurrentRouteName(next);
+
+    const { translucent, backgroundColor, barStyle } = getStatusBarConfig(
+      routeName
+    );
+
+    StatusBar.setTranslucent(translucent);
+    StatusBar.setBackgroundColor(backgroundColor);
+    StatusBar.setBarStyle(barStyle);
+  }
+
   render() {
     if (!this.state.rehydrated) {
       return (
@@ -88,7 +119,9 @@ class App extends Component {
 
     return (
       <Provider store={configureStore}>
-        <GitPoint onNavigationStateChange={null} />
+        <GitPoint onNavigationStateChange={this.statusBarHandler}>
+          <StatusBar />
+        </GitPoint>
       </Provider>
     );
   }

src/auth/screens/login.screen.js

@@ -262,7 +262,7 @@ class Login extends Component {
     const { locale, isLoggingIn, hasInitialUser } = this.props;
 
     return (
-      <ViewContainer barColor="light">
+      <ViewContainer>
         {this.shouldDisplayIntro() && (
           <Swiper
             loop={false}
@@ -353,7 +353,11 @@ class Login extends Component {
               <View style={styles.browserSection}>
                 <WebView
                   source={{
-                    uri: `https://github.com/login/oauth/authorize?response_type=token&client_id=${CLIENT_ID}&redirect_uri=gitpoint://welcome&scope=user%20repo&state=${stateRandom}`,
+                    uri: `https://github.com/login/oauth/authorize?response_type=token&client_id=${
+                      CLIENT_ID
+                    }&redirect_uri=gitpoint://welcome&scope=user%20repo&state=${
+                      stateRandom
+                    }`,
                   }}
                   onLoadStart={e => this.toggleCancelButton(e, true)}
                   onLoadEnd={e => this.toggleCancelButton(e, false)}

src/components/view-container.component.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import { StatusBar } from 'react-native';
 import styled from 'styled-components/native';
 
 import { colors } from 'config';
 
 type Props = {
-  barColor: string,
   children?: React.Element<*>,
 };
 
@@ -17,13 +15,8 @@ const Container = styled.View`
   background-color: ${colors.white};
 `;
 
-export const ViewContainer = ({ barColor, children }: Props) => (
-  <Container>
-    <StatusBar
-      barStyle={barColor === 'light' ? 'light-content' : 'dark-content'}
-    />
-    {children}
-  </Container>
+export const ViewContainer = ({ children }: Props) => (
+  <Container>{children}</Container>
 );
 
 ViewContainer.defaultProps = {

src/config/index.js

@@ -4,3 +4,4 @@ export * from './fonts';
 export * from './normalize-text';
 export * from './common';
 export * from './styled-fonts';
+export * from './status-bar';

src/config/status-bar.js

@@ -0,0 +1,26 @@
+import { colors } from 'config';
+
+const darkStatusBar = {
+  translucent: false,
+  backgroundColor: colors.grey,
+  barStyle: 'dark-content',
+};
+
+const getLightStatusBar = routeName => ({
+  translucent: true,
+  backgroundColor: routeName === 'Login' ? colors.transparent : colors.black,
+  barStyle: 'light-content',
+});
+
+const lightScreens = [
+  'MyProfile',
+  'Profile',
+  'Organization',
+  'Repository',
+  'Login',
+];
+
+export const getStatusBarConfig = routeName =>
+  lightScreens.includes(routeName)
+    ? getLightStatusBar(routeName)
+    : darkStatusBar;