title: react-native making status bar animated
body: <p>Initially, I have a black background with <code>light-content</code> barStyle but as I scroll up, the background color changes to white and I want to change the statusBar barStyle to 'dark-content'.</p>
  
  <p>This is why I am trying to make my statusBar animated. </p>
  
  <p>So far I have tried like this:</p>
  
  <ol>
  <li><p>I made statusBar animated component</p>
  
  <p><code>const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar)</code></p></li>
  <li><p>set Animated input/output range</p>
  
  <p><code>scroll = new Animated.Value(0)</code></p>
  
  <p><code>statusBarColor = this.scroll.interpolate({
          inputRange: [0, SCROLL_HEIGHT],
          outputRange: ['white', 'black'],
          extrapolate: "clamp"
      })</code></p></li>
  <li><p>conditionally change barstyle.</p>
  
  <p><code>&lt;AnimatedStatusBar backgroundColor='white' barStyle={this.statusBarColor ==='white'? 'light-content':'dark-content'}  /&gt;</code></p></li>
  </ol>
  
  <p>However, this is not working. How could I make the statusBar animated so that I could change the <code>barStyle</code> when I scroll to the top.</p>