#StackBounty: #reactjs #react-native #animation #react-native-animatable react-native make status bar 'barStyle' animatable

Bounty: 50

I’m trying to make status bar’s barStyle animated so that when I scroll I could change the barStyle type from ‘dark-content’ to ‘light-content’.

First, I made my statusBar animated:

const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar);

Second, set Animated Value:

scroll = new Animated.Value(0);

  tabY = this.nScroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT],
    outputRange: [0, 0, 1]
  });
  headerBg = this.scroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT],
    outputRange: ["black", 'white'],
    extrapolate: "clamp"
  });

Finally, change the barStyle if this.HeaderBg has changed:

<AnimatedStatusBar barStyle={this.headerBg === 'transparent'? 'dark-content' : 'light-content'} translucent={true} /> 

I feel like my code should work but it is not working as I expected.

Any idea how I could change the type of the statusBar’s barStyle when animated has changed?

By the way I am not using hooks. I want to know how to do it with class components.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.