Pull Request or Fork

[sambwest]

Hi,

I was trying to get this working well with ListView, I couldn't get it working properly. The ScrollableComponent feature you added was assuming that the Scrollable element had a child property which you could apply the marginTop to. A ListView doesn't have any child elements.

I have forked and updated your code changing it so that you nest the scrollable element as a child of headroom e.g the example would be like this:

...
        <Headroom
          style={[styles.container]}
          headerComponent={ header }
          headerHeight={ 80 }
          scrollEventThrottle={ 80 }
        >
          <ScrollView>
            <View style={[styles.container, styles.content]}>
              <Text style={[styles.loremIpsum]}>
              Lorem ipsum ...
              </Text>
            </View>
          </ScrollView>
        </Headroom>
...

And you can also use a ListView,FlatView etc like this:

...
        <Headroom
          style={[styles.container]}
          headerComponent={ header }
          headerHeight={ 80 }
          scrollEventThrottle={ 80 }
        >
          <ListView dataSource=.. />
        </Headroom>
...

The main change is to the render function which takes the child element and injects in the onScroll, like this (Headroom.js):

...
render() {

    return (
      <View style={styles.container}>
         <Animated.View style={{ height: this.state.height }}>
           {this.props.headerComponent}
         </Animated.View>
        {React.cloneElement(this.props.children, {onScroll: this._onScroll.bind(this)})}
      </View>
    )
  }
...

Plus it changes the header from a absolute element so that the margin of the child element is all of the space that the header isn't using. So the stylesheet becomes(Headroom.js):

var styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

Plus the styles.content would have to have a background color for the View

Anyway... I know this is quite different to the way that you have it now. Let me know if you'd be interested in a pull request or if I should just continue on my fork. (https://github.com/sambwest/react-native-headroom)