Animated Pull Down Header

AnimatedPullDownHeader.js

/**
 * 
 * My Attempt at the Twitter Mobile scroll and grow header interaction in
 * React Native. The problem I am running into problems with the rendering
 * at the top. I have tried animating translateY, top and margin top. All
 * do the exact same thing. The only thing I can think to do to get around 
 * this is position the element at a negative margin to compensate for the 
 * jumping around.
 * 
 **/
 
'use strict';

import React, {
  AppRegistry,
  ScrollView,
  Animated,
  Component
} from 'react-native';

class ReactNativePullDownGrowHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollY: new Animated.Value(0),
    };
  }

  render() {
    return (
      <ScrollView
        scrollEventThrottle={ 16 }
        onScroll={ Animated.event(
          [{ nativeEvent: { contentOffset: { y: this.state.scrollY }}}]
        )}
      >
        <Animated.View
          style={[
            { transform: [{ translateY: this.state.scrollY }] },
            { backgroundColor: 'red' },
            { height: this.state.scrollY.interpolate({
              inputRange: [ -500, 0 ],
              outputRange: [ 600, 100 ]
            })}
          ]}
        >
        </Animated.View>
      </ScrollView>
    );
  }
};

AppRegistry.registerComponent('ReactNativePullDownGrowHeader', () => ReactNativePullDownGrowHeader);