From 0492021ff18c911438f7096847545bb006568f49 Mon Sep 17 00:00:00 2001
From: Sandro Machado <sandro@uphold.com>
Date: Fri, 23 Dec 2016 23:41:16 +0000
Subject: [PATCH] Improve statusbar color handling

---
 AppIntro.js         | 15 +++++++++++----
 Example/AppIntro.js | 15 +++++++++++----
 README.md           |  1 +
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/AppIntro.js b/AppIntro.js
index 52b42d9..14f3978 100644
--- a/AppIntro.js
+++ b/AppIntro.js
@@ -5,7 +5,6 @@ import {
   StyleSheet,
   Text,
   View,
-  TouchableOpacity,
   Animated,
   Dimensions,
   Image,
@@ -102,7 +101,7 @@ const defaulStyles = {
     justifyContent: 'center',
     alignItems: 'center',
   },
-}
+};
 
 export default class AppIntro extends Component {
   constructor(props) {
@@ -333,7 +332,11 @@ export default class AppIntro extends Component {
     }
 
     if (this.isToTintStatusBar()) {
-      StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[0].backgroundColor, -0.3), false);
+      const statusBarColor = this.props.pageArray[0].statusBarColor || this.props.pageArray[0].backgroundColor || undefined;
+
+      if (statusBarColor) {
+        StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false);
+      }
     }
 
     return (
@@ -345,7 +348,11 @@ export default class AppIntro extends Component {
           renderPagination={this.renderPagination}
           onMomentumScrollEnd={(e, state) => {
             if (this.isToTintStatusBar()) {
-              StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[state.index].backgroundColor, -0.3), false);
+              const statusBarColor = this.props.pageArray[state.index].statusBarColor || this.props.pageArray[state.index].backgroundColor || undefined;
+
+              if (statusBarColor) {
+                StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false);
+              }
             }
 
             this.props.onSlideChange(state.index, state.total);
diff --git a/Example/AppIntro.js b/Example/AppIntro.js
index 52b42d9..14f3978 100644
--- a/Example/AppIntro.js
+++ b/Example/AppIntro.js
@@ -5,7 +5,6 @@ import {
   StyleSheet,
   Text,
   View,
-  TouchableOpacity,
   Animated,
   Dimensions,
   Image,
@@ -102,7 +101,7 @@ const defaulStyles = {
     justifyContent: 'center',
     alignItems: 'center',
   },
-}
+};
 
 export default class AppIntro extends Component {
   constructor(props) {
@@ -333,7 +332,11 @@ export default class AppIntro extends Component {
     }
 
     if (this.isToTintStatusBar()) {
-      StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[0].backgroundColor, -0.3), false);
+      const statusBarColor = this.props.pageArray[0].statusBarColor || this.props.pageArray[0].backgroundColor || undefined;
+
+      if (statusBarColor) {
+        StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false);
+      }
     }
 
     return (
@@ -345,7 +348,11 @@ export default class AppIntro extends Component {
           renderPagination={this.renderPagination}
           onMomentumScrollEnd={(e, state) => {
             if (this.isToTintStatusBar()) {
-              StatusBar.setBackgroundColor(this.shadeStatusBarColor(this.props.pageArray[state.index].backgroundColor, -0.3), false);
+              const statusBarColor = this.props.pageArray[state.index].statusBarColor || this.props.pageArray[state.index].backgroundColor || undefined;
+
+              if (statusBarColor) {
+                StatusBar.setBackgroundColor(this.shadeStatusBarColor(statusBarColor, -0.3), false);
+              }
             }
 
             this.props.onSlideChange(state.index, state.total);
diff --git a/README.md b/README.md
index d0829de..1d1ad7a 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ class Example extends Component {
         width: 109 * 2.5,
       },
       backgroundColor: '#fa931d',
+      statusBarColor: '#fa931d', // Specify if you don't want to be inferred. If you don't specify a 30% darker color will be inferred from your background color.
       fontColor: '#fff',
       level: 10,
     }, {