diff --git a/README.md b/README.md index 92f72d3..f684337 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ The `ParallaxScroll` component adds a few additional properties, as described be | `scrollStyle` | `object` | `{}` | These styles will be applied to the scroll view. | | `headerHeight` | `number` | `45` | This is the height of sticky(fixed) header. | | `renderHeader` | `({ width, height, animatedValue }) => {}` | `null` | This renders an optional sticky(fixed) header that will be visible to the top of the view. | +| `headerWrapperStyle` | `object` | `{}` | These styles will be applied to the header wrapper view. | | `onHeaderFixed` | `func` | `null` | A callback function that is invoked when the header will attach to the top. | | `isHeaderFixed` | `bool` | `false` | Is header fixed to top(not sticky)? | | `parallaxHeight` | `number` | `Dimensions.get('window').width * 9 / 16` | This is the height of parallax. | diff --git a/src/index.js b/src/index.js index 79ac5a0..67dbc5b 100644 --- a/src/index.js +++ b/src/index.js @@ -46,6 +46,11 @@ export default class ParallaxScroll extends Component { fadeOutParallaxForeground: PropTypes.bool, fadeOutParallaxBackground: PropTypes.bool, headerFixedBackgroundColor: PropTypes.string, + headerWrapperStyle: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.number, + PropTypes.object + ]), renderBackgroundPlaceholder: PropTypes.func, parallaxBackgroundScrollSpeed: PropTypes.number, parallaxForegroundScrollSpeed: PropTypes.number @@ -83,6 +88,7 @@ export default class ParallaxScroll extends Component { fadeOutParallaxForeground: false, fadeOutParallaxBackground: false, headerFixedBackgroundColor: 'rgba(0, 0, 0, 1)', + headerWrapperStyle: {}, renderBackgroundPlaceholder: null, parallaxBackgroundScrollSpeed: 5, parallaxForegroundScrollSpeed: 5 @@ -328,7 +334,8 @@ export default class ParallaxScroll extends Component { useNativeDriver, headerFixedTransformY, headerBackgroundColor, - headerFixedBackgroundColor + headerFixedBackgroundColor, + headerWrapperStyle } = this.props; const wrapperStyle = { @@ -381,7 +388,7 @@ export default class ParallaxScroll extends Component { } return ( - + {renderHeader({ width, height, animatedValue: this.scrollY })}