Improve statusbar color handling

Author: SandroMachado

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);

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);

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,
     }, {