Merge pull request #48 from testshallpass/status-bar-style-29-fix

Status bar style 29 fix

Author: testshallpass

.npmignore

@@ -10,3 +10,4 @@ ISSUE_TEMPLATE.md
 .babelrc
 babelrc
 test/
+__tests__/

DropdownAlert.js

@@ -1,16 +1,9 @@
-
 import React, { Component, PropTypes } from 'react'
-import {
-  View, Text, StyleSheet,
-  TouchableHighlight, Animated, StatusBar,
-  Platform, Dimensions, Image, PanResponder
-} from "react-native"
-
-// Constants
-// Sizes
+import {StyleSheet, View, Text, TouchableHighlight, Animated, StatusBar, Platform, Dimensions, Image, PanResponder} from "react-native"
+const StatusBarDefaultBarStyle = StatusBar._defaultProps.barStyle.value
+const StatusBarDefaultBackgroundColor = StatusBar._defaultProps.backgroundColor.value
 const DEFAULT_IMAGE_DIMENSIONS = 36
 const WINDOW = Dimensions.get('window')
-
 var closeTimeoutId = null
 var panResponder
 
@@ -44,7 +37,11 @@ export default class DropdownAlert extends Component {
     tapToCloseEnabled: PropTypes.bool,
     panResponderEnabled: PropTypes.bool,
     replaceEnabled: PropTypes.bool,
-    translucent: PropTypes.bool
+    translucent: PropTypes.bool,
+    activeStatusBarStyle: PropTypes.string,
+    activeStatusBarBackgroundColor: PropTypes.string,
+    inactiveStatusBarStyle: PropTypes.string,
+    inactiveStatusBarBackgroundColor: PropTypes.string
   }
   static defaultProps =  {
     onClose: null,
@@ -94,7 +91,11 @@ export default class DropdownAlert extends Component {
       height: DEFAULT_IMAGE_DIMENSIONS,
       alignSelf: 'center'
     },
-    translucent: false
+    translucent: false,
+    activeStatusBarStyle: 'light-content',
+    activeStatusBarBackgroundColor: StatusBarDefaultBackgroundColor,
+    inactiveStatusBarStyle: StatusBarDefaultBarStyle,
+    inactiveStatusBarBackgroundColor: StatusBarDefaultBackgroundColor
   }
   constructor(props) {
     super(props)
@@ -107,7 +108,7 @@ export default class DropdownAlert extends Component {
       isOpen: false,
       startDelta: props.startDelta,
       endDelta: props.endDelta,
-      topValue: 0
+      topValue: 0,
     }
     // Render
     this.renderButton = this.renderButton.bind(this)
@@ -212,6 +213,11 @@ export default class DropdownAlert extends Component {
           this.setState({
             isOpen: false
           })
+          if (Platform.OS == 'android') {
+            StatusBar.setBackgroundColor(this.props.inactiveStatusBarBackgroundColor, true)
+          } else {
+            StatusBar.setBarStyle(this.props.inactiveStatusBarStyle, true)
+          }
           if (onDismiss) {
             var data = {
               type: this.state.type,
@@ -332,17 +338,13 @@ export default class DropdownAlert extends Component {
     }
     return null
   }
-  renderStatusBar(type, backgroundColor) {
+  renderStatusBar(backgroundColor, barStyle, translucent) {
     if (Platform.OS === 'android') {
-      return (
-        <StatusBar backgroundColor={backgroundColor} />
-      )
-    } else if (type != 'custom') {
-      return (
-        <StatusBar barStyle="light-content" />
-      )
+      StatusBar.setBackgroundColor(backgroundColor, true)
+      StatusBar.setTranslucent(translucent)
+    } else if (Platform.OS === 'ios') {
+      StatusBar.setBarStyle(barStyle, true)
     }
-    return null
   }
   renderButton(source, style, onPress, underlayColor, isRendered) {
     if (source != null && isRendered) {
@@ -381,11 +383,16 @@ export default class DropdownAlert extends Component {
           backgroundColor = this.props.successColor
           break;
       }
-
-      if (Platform.OS === 'android' && this.props.translucent) {
-        style = [style, { paddingTop: StatusBar.currentHeight }]
+      var activeStatusBarBackgroundColor = this.props.activeStatusBarBackgroundColor
+      if (Platform.OS === 'android') {
+        if (this.props.translucent) {
+          style = [style, {paddingTop: StatusBar.currentHeight}]
+        }
+        if (this.state.type !== 'custom') {
+          activeStatusBarBackgroundColor = backgroundColor
+        }
       }
-
+      this.renderStatusBar(activeStatusBarBackgroundColor, this.props.activeStatusBarStyle, this.props.translucent)
       return (
           <Animated.View
            ref={(ref) => this.mainView = ref}
@@ -402,7 +409,6 @@ export default class DropdownAlert extends Component {
               left: 0,
               right: 0
             }}>
-            {this.renderStatusBar(this.state.type, backgroundColor)}
             <TouchableHighlight
                 onPress={(this.props.showCancel) ? null : () => this.onClose('tap')}
                 underlayColor={backgroundColor}