Merge pull request #67 from charpeni/status-bar

Status barNice one.
I also like the use of has. 👍

Author: davidLeonardi

README.md

@@ -122,6 +122,7 @@ The **`<Router />`** object used to initialize the navigation can take the follo
 - `customAction`: A special callback prop for your action buttons (this can be handy for triggering a side menu for example). The action gets triggered from your custom `leftCorner` or `rightCorner` components by calling `this.props.customAction("someActionName")` from them. It is then picked up like this: `<Router customAction={this.doSomething} />`.
 - `hideNavigationBar`: Hide the navigation bar, always
 - `handleBackAndroid` (Boolean value): Apply a listener to the native back button on Android. On click, it will go to the previous route until it reach the first scene, then it will exit the app.
+- `statusBarProps`: Default StatusBar props, please refer to [StatusBar Docs](https://facebook.github.io/react-native/docs/statusbar.html#content). (Android) If `backgroundColor` isn't provided, it will take the same color as defined in `headerStyle`.
 
 
 The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript object) which can have the following keys:
@@ -148,6 +149,7 @@ The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript o
   - Navigator.SceneConfigs.PushFromRight
   - Navigator.SceneConfigs.VerticalDownSwipeJump
   - Navigator.SceneConfigs.VerticalUpSwipeJump
+- `statusBarProps`: Route specific StatusBar props, it will override `statusBarProps` defined in Router, please refer to [StatusBar Docs](https://facebook.github.io/react-native/docs/statusbar.html#content).
 
 The **`this.props.replaceRoute`** function takes in an object that can contain the same keys as `toRoute()`. The difference is that instead of adding a route to your stack, it replaces the route
 that you're on with the new route that you pass it.

index.js

@@ -1,18 +1,19 @@
 import React, {
   StyleSheet,
   Navigator,
-  StatusBarIOS,
   View,
   Platform,
   PropTypes,
   Text,
+  StatusBar,
 } from 'react-native';
 
 import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 import NavBarContainer from './components/NavBarContainer';
 import * as Styles from './styles';
 import aspect from 'aspect-js';
+import _ from 'underscore';
 
 const propTypes = {
   backButtonComponent: PropTypes.func,
@@ -27,6 +28,7 @@ const propTypes = {
   noStatusBar: PropTypes.bool,
   rightCorner: PropTypes.func,
   statusBarColor: PropTypes.string,
+  statusBarProps: PropTypes.object,
   titleStyle: Text.propTypes.style,
 };
 
@@ -287,16 +289,8 @@ class Router extends React.Component {
 
   render() {
     let navigationBar;
-    // Status bar color
-    if (Platform.OS === 'ios') {
-      if (this.props.statusBarColor === 'black') {
-        StatusBarIOS.setStyle(0); // "Default" style according to StatusBarIOS.js
-      } else {
-        StatusBarIOS.setStyle(1); // "light-content" style according to StatusBarIOS.js
-      }
-    } else if (Platform.OS === 'android') {
-      // no android version yet
-    }
+    let statusBar;
+    let statusBarProps = {};
 
     if (!this.props.hideNavigationBar) {
       navigationBar = (
@@ -320,14 +314,73 @@ class Router extends React.Component {
       );
     }
 
+    // Check if StatusBar is available (React-Native >= 0.20)
+    if (StatusBar) {
+      // Check for default values provided to Router
+      if (this.props.statusBarProps) {
+        // statusBarProps = _.defaults(this.props.statusBarProps, statusBarProps);
+        statusBarProps = this.props.statusBarProps;
+      }
+
+      // Check for values provided to current route
+      if (this.state.route.statusBarProps) {
+        statusBarProps = _.defaults(this.state.route.statusBarProps, statusBarProps);
+      }
+
+      // Android specific code
+      if (Platform.OS === 'android') {
+        if (!_.has(statusBarProps, 'backgroundColor') && !_.has(statusBarProps, 'translucent')) {
+          let backgroundColor;
+
+          if (this.state.route.headerStyle && this.state.router.headerStyle.backgroundColor) {
+            // If current route has specific header style
+            const stateHeaderStyle = StyleSheet.flatten(this.props.headerStyle);
+
+            if (stateHeaderStyle && stateHeaderStyle.backgroundColor) {
+              backgroundColor = stateHeaderStyle.backgroundColor;
+            }
+          } else if (this.props.headerStyle) {
+            // Otherwise, get backgroundColor as specified to Router
+            const propsHeaderStyle = StyleSheet.flatten(this.props.headerStyle);
+
+            if (propsHeaderStyle && propsHeaderStyle.backgroundColor) {
+              backgroundColor = propsHeaderStyle.backgroundColor;
+            }
+          }
+
+          if (backgroundColor) {
+            statusBarProps.backgroundColor = backgroundColor;
+          }
+        }
+      } else if (Platform.OS === 'ios') {
+        if (!_.has(statusBarProps, 'barStyle')) {
+          // NOTE Deprecated prop, shouldn't be used.
+          if (this.props.statusBarColor === 'black') {
+            statusBarProps.barStyle = 'default';
+          } else {
+            statusBarProps.barStyle = 'light-content';
+          }
+        }
+      }
+
+      statusBar = (
+        <StatusBar
+          {...statusBarProps}
+        />
+      );
+    }
+
     return (
-      <Navigator
-        ref="navigator"
-        initialRoute={this.props.firstRoute}
-        navigationBar={navigationBar}
-        renderScene={this.renderScene}
-        configureScene={this.configureScene}
-      />
+      <View style={{ flex: 1 }}>
+        {statusBar}
+        <Navigator
+          ref="navigator"
+          initialRoute={this.props.firstRoute}
+          navigationBar={navigationBar}
+          renderScene={this.renderScene}
+          configureScene={this.configureScene}
+        />
+      </View>
     );
   }
 }

package.json

@@ -33,7 +33,8 @@
   },
   "homepage": "https://github.com/react-native-simple-router-community/react-native-simple-router",
   "dependencies": {
-    "aspect-js": "^1.0.3"
+    "aspect-js": "^1.0.3",
+    "underscore": "^1.8.3"
   },
   "peerDependencies": {
     "react-native": ">=0.12.0 || 0.5.0-rc1 || 0.6.0-rc || 0.7.0-rc || 0.7.0-rc.2 || 0.8.0-rc || 0.8.0-rc.2 || 0.9.0-rc || 0.10.0-rc || 0.11.0-rc || 0.12.0-rc || 0.13.0-rc || 0.14.0-rc || 0.15.0-rc || 0.16.0-rc || 0.17.0-rc || 0.18.0-rc || 0.19.0-rc || 0.20.0-rc || 0.20.0-rc1"

twitter-example/index.js

@@ -19,6 +19,10 @@ const styles = StyleSheet.create({
   },
 });
 
+const statusBarProps = {
+  backgroundColor: '#1b6298',
+};
+
 export default class TwitterApp extends React.Component {
   render() {
     return (
@@ -27,6 +31,7 @@ export default class TwitterApp extends React.Component {
         headerStyle={styles.header}
         backButtonComponent={BackButton}
         rightCorner={SearchAndCompose}
+        statusBarProps={statusBarProps}
       />
     );
   }