Enable to set sticky header slide direction

.gitignore

@@ -1,4 +1,5 @@
 lib/
 node_modules/
 npm-debug.log
-
+.idea/
+.DS_Store

README.md

@@ -37,6 +37,7 @@ render() {
       backgroundColor="blue"
       contentBackgroundColor="pink"
       parallaxHeaderHeight={300}
+      stickyHeaderSlideDirection={'top'}
       renderForeground={() => (
        <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
           <Text>Hello World!</Text>
@@ -80,14 +81,15 @@ The `ParallaxScrollView` component adds a few additional properties, as describe
 | `renderScrollComponent` | `func` | No | A function with input `props` and outputs a `ScrollView`-like component in which the content is rendered. This is useful if you want to provide your own scrollable component. (See: [https://github.com/exponentjs/react-native-scrollable-mixin](https://github.com/exponentjs/react-native-scrollable-mixin)) (By default, returns a `ScrollView` with the given props) |
 | `renderStickyHeader` | `func` | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |
 | `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | If `renderStickyHeader` is set, then its height must be specified. |
+| `stickyHeaderSlideDirection` | `string` | If `renderStickyHeader` is used | Slide direction of sticky header. It should be either 'top' or 'bottom' |
 | `contentContainerStyle` | `object` | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as for [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)) |
 
 ## Latest changes
 
 ### 0.19.0
 
 - Fixes compatibility with React Native 0.27.2
-- Adds `contentContainerStyle` prop to style scroll container (thanks [@alaycock](https://github.com/alaycock))
+- Adds `contentContainerStyle` prop to style scroll container (thanks @alaycock)
 
 ### 0.18.1
 

src/index.js

@@ -42,6 +42,7 @@ const IPropTypes = {
   renderScrollComponent: func,
   renderStickyHeader: func,
   stickyHeaderHeight: number,
+  stickyHeaderSlideDirection: React.PropTypes.oneOf(['top', 'bottom']),
   contentContainerStyle: View.propTypes.style
 };
 
@@ -79,6 +80,7 @@ class ParallaxScrollView extends Component {
       renderScrollComponent,
       renderStickyHeader,
       stickyHeaderHeight,
+      stickyHeaderSlideDirection,
       style,
       contentContainerStyle,
       ...scrollViewProps
@@ -88,7 +90,7 @@ class ParallaxScrollView extends Component {
     const foreground = this._renderForeground({ fadeOutForeground, parallaxHeaderHeight, stickyHeaderHeight, renderForeground: renderForeground || renderParallaxHeader });
     const bodyComponent = this._wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight, contentContainerStyle });
     const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor });
-    const maybeStickyHeader = this._maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader });
+    const maybeStickyHeader = this._maybeRenderStickyHeader({ stickyHeaderSlideDirection, parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader });
     const scrollElement = renderScrollComponent(scrollViewProps);
 
     return (
@@ -272,18 +274,24 @@ class ParallaxScrollView extends Component {
     );
   }
 
-  _maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }) {
+  _maybeRenderStickyHeader({ stickyHeaderSlideDirection, parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }) {
     const { viewWidth, scrollY } = this.state;
     if (renderStickyHeader || renderFixedHeader) {
       const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight);
+      const outputValue = (stickyHeaderSlideDirection === 'top') ? -1 * stickyHeaderHeight : stickyHeaderHeight;
+      let height = interpolate(scrollY, {
+        inputRange: [0, stickyHeaderHeight],
+        outputRange: [0, stickyHeaderHeight],
+        extrapolate: 'clamp'
+      });
       return (
-        <View style={[styles.stickyHeader, { width: viewWidth, ...(stickyHeaderHeight ? { height: stickyHeaderHeight } : null ) }]}>
+        <View style={[styles.stickyHeader, { width: viewWidth }]}>
           {
             renderStickyHeader
               ? (
                 <Animated.View
                   style={{
-                  backgroundColor: backgroundColor,
+                  backgroundColor: 'transparent',
                   height: stickyHeaderHeight,
                   opacity: interpolate(scrollY, {
                     inputRange: [0, p],
@@ -296,7 +304,7 @@ class ParallaxScrollView extends Component {
                     transform: [{
                       translateY: interpolate(scrollY, {
                         inputRange: [0, p],
-                        outputRange: [stickyHeaderHeight, 0],
+                        outputRange: [outputValue, 0],
                         extrapolate: 'clamp'
                       })
                     }]
@@ -329,6 +337,7 @@ ParallaxScrollView.defaultProps = {
   renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
   renderForeground: null,
   stickyHeaderHeight: 0,
+  stickyHeaderSlideDirection: 'top',
   contentContainerStyle: null
 };