Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Header wrapper style #39

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Header wrapper style #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13500d3
Add headerWrapperStyle
robwalkerco Apr 5, 2019
ac99bfa
Update README.md
robwalkerco Apr 5, 2019
1cbbd20
Correct comma
robwalkerco Apr 5, 2019
73a61c0
Correct variable name
robwalkerco Apr 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
11 changes: 9 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -328,7 +334,8 @@ export default class ParallaxScroll extends Component {
useNativeDriver,
headerFixedTransformY,
headerBackgroundColor,
headerFixedBackgroundColor
headerFixedBackgroundColor,
headerWrapperStyle
} = this.props;

const wrapperStyle = {
Expand Down Expand Up @@ -381,7 +388,7 @@ export default class ParallaxScroll extends Component {
}

return (
<View style={wrapperStyle} pointerEvents="box-none">
<View style={[wrapperStyle, headerWrapperStyle || {}]} pointerEvents="box-none">
<Animated.View style={style} pointerEvents="box-none">
{renderHeader({ width, height, animatedValue: this.scrollY })}
</Animated.View>
Expand Down