janicduplessis/react-native-scrollable-header

Status Bar

Closed this issue · 2 comments

brendandestefano commented

Any idea how you could animate the status bar color? Like from 'light-content' to 'dark-content'?

janicduplessis commented

You could add a listener to an animated value and update the color when passing a certain threshold.

animatedValue.addListener(value => {
  const isLight = value > somethreshold;
  if (this.state.isLight !== isLight) this.setState({isLight});
}
...
<StatusBar animated barStyle={this.state.isLight ? ...} />
brendandestefano commented

I found the way you suggested was a bit laggy. This is what I found to work best for any future reference:

<StatusBar animated barStyle={ this.state.isLight ? 'light-content' : 'dark-content' } />
<ScrollView
    scrollEventThrottle={ 16 }
    onScroll={ Animated.event(
        [ { nativeEvent: { contentOffset: { y: this.state.scrollY } } } ],
            { listener: _.debounce(this.checkStatusBarColor, 16) }
        ) }
>
...
  • 👍2