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