react-native-parallax-scroll-view
Advanced tools
Comparing version 0.16.13 to 0.16.14
210
index.js
@@ -18,2 +18,4 @@ const React = require('react-native'); | ||
const SCROLLVIEW_REF = 'ScrollView'; | ||
// Properties accepted by `ParallaxScrollView`. | ||
@@ -26,2 +28,3 @@ const IPropTypes = { | ||
renderStickyHeader: func, | ||
renderScrollComponent: func, | ||
renderFixedHeader: func, | ||
@@ -40,2 +43,3 @@ renderBackground: func, | ||
this.state = { scrollY: new Animated.Value(0) }; | ||
this._footerComponent = null; | ||
this._footerHeight = 0; | ||
@@ -46,3 +50,2 @@ this._animatedEvent = Animated.event([{nativeEvent: { contentOffset: { y: this.state.scrollY } } }]); | ||
render() { | ||
const { scrollY } = this.state; | ||
const { | ||
@@ -57,4 +60,4 @@ children, | ||
renderParallaxHeader, | ||
renderScrollComponent, | ||
renderStickyHeader, | ||
onScroll: prevOnScroll = () => {}, | ||
style, | ||
@@ -64,6 +67,61 @@ ...scrollViewProps | ||
const background = this._renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground }); | ||
const parallaxHeader = this._renderParallaxHeader({ parallaxHeaderHeight, stickyHeaderHeight, renderParallaxHeader }); | ||
const bodyComponent = this._wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight }); | ||
const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor }); | ||
const maybeStickyHeader = this._maybeRenderStickyHeader({ stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }); | ||
return ( | ||
<View style={styles.container}> | ||
<Animated.View | ||
style={[styles.backgroundImage, { | ||
{ background } | ||
{ | ||
React.cloneElement(renderScrollComponent(scrollViewProps), { | ||
ref: SCROLLVIEW_REF, | ||
style: [style, styles.scrollView], | ||
scrollEventThrottle: 16, | ||
onScroll: this._onScroll.bind(this), | ||
}, | ||
parallaxHeader, | ||
bodyComponent, | ||
footerSpacer | ||
) | ||
} | ||
{ maybeStickyHeader } | ||
</View> | ||
); | ||
} | ||
/* | ||
* Expose `ScrollView` API so this component is composable with any component that expects a `ScrollView`. | ||
*/ | ||
getScrollResponder() { | ||
return this.refs[SCROLLVIEW_REF].getScrollResponder(); | ||
} | ||
getInnerViewNode() { | ||
return this.getScrollResponder().getInnerViewNode(); | ||
} | ||
scrollTo(destY, destX) { | ||
this.getScrollResponder().scrollTo(destY, destX); | ||
} | ||
scrollWithoutAnimationTo(destY, destX) { | ||
this.getScrollResponder().scrollWithoutAnimationTo(destY, destX); | ||
} | ||
setNativeProps(props) { | ||
this.refs[SCROLLVIEW_REF].setNativeProps(props); | ||
} | ||
/* | ||
* Private helpers | ||
*/ | ||
_onScroll(e) { | ||
const { onScroll: prevOnScroll = () => {} } = this.props; | ||
this._animatedEvent(e); | ||
prevOnScroll(e); | ||
} | ||
_renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground }) { | ||
return ( | ||
<Animated.View | ||
style={[styles.backgroundImage, { | ||
backgroundColor: headerBackgroundColor, | ||
@@ -73,3 +131,3 @@ height: parallaxHeaderHeight, | ||
transform: [{ | ||
translateY: scrollY.interpolate({ | ||
translateY: this.state.scrollY.interpolate({ | ||
inputRange: [0, parallaxHeaderHeight - stickyHeaderHeight], | ||
@@ -81,3 +139,3 @@ outputRange: [0, -parallaxHeaderHeight], | ||
}, { | ||
scale: scrollY.interpolate({ | ||
scale: this.state.scrollY.interpolate({ | ||
inputRange: [-window.height, 0], | ||
@@ -89,18 +147,15 @@ outputRange: [5, 1], | ||
}]}> | ||
<View> | ||
{ renderBackground && renderBackground() } | ||
</View> | ||
</Animated.View> | ||
<ScrollView {...scrollViewProps} | ||
ref="ScrollView" | ||
style={[style, styles.scrollView]} | ||
scrollEventThrottle={16} | ||
onScroll={e => { | ||
this._animatedEvent(e); | ||
prevOnScroll(e); | ||
}}> | ||
<View style={styles.parallaxHeaderContainer}> | ||
<Animated.View | ||
style={[styles.parallaxHeader, { | ||
height: scrollY.interpolate({ | ||
<View> | ||
{ renderBackground && renderBackground() } | ||
</View> | ||
</Animated.View> | ||
); | ||
} | ||
_renderParallaxHeader({ parallaxHeaderHeight, stickyHeaderHeight, renderParallaxHeader }) { | ||
return ( | ||
<View style={styles.parallaxHeaderContainer}> | ||
<Animated.View | ||
style={[styles.parallaxHeader, { | ||
height: this.state.scrollY.interpolate({ | ||
inputRange: [0, parallaxHeaderHeight - stickyHeaderHeight], | ||
@@ -110,3 +165,3 @@ outputRange: [parallaxHeaderHeight, stickyHeaderHeight], | ||
}), | ||
opacity: scrollY.interpolate({ | ||
opacity: this.state.scrollY.interpolate({ | ||
inputRange: [0, (parallaxHeaderHeight - stickyHeaderHeight) / 2 - 20, (parallaxHeaderHeight - stickyHeaderHeight) / 2], | ||
@@ -117,8 +172,13 @@ outputRange: [1, .9, 0], | ||
}]}> | ||
{ renderParallaxHeader && renderParallaxHeader() } | ||
</Animated.View> | ||
</View> | ||
<View | ||
style={{ backgroundColor: contentBackgroundColor }} | ||
onLayout={e => { | ||
{ renderParallaxHeader && renderParallaxHeader() } | ||
</Animated.View> | ||
</View> | ||
); | ||
} | ||
_wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight }) { | ||
return ( | ||
<View | ||
style={{ backgroundColor: contentBackgroundColor }} | ||
onLayout={e => { | ||
// Adjust the bottom height so we can scroll the parallax header all the way up. | ||
@@ -128,41 +188,7 @@ const { nativeEvent: { layout: { height } } } = e; | ||
if (this._footerHeight !== footerHeight) { | ||
this.refs.Footer.setNativeProps({ style: { height: footerHeight }}); | ||
this._footerComponent.setNativeProps({ style: { height: footerHeight }}); | ||
this._footerHeight = footerHeight; | ||
} | ||
}}> | ||
{ children } | ||
</View> | ||
<View ref="Footer" style={{ backgroundColor: contentBackgroundColor }}/> | ||
</ScrollView> | ||
{ renderStickyHeader | ||
? ( | ||
<View style={[styles.stickyHeader, { height: stickyHeaderHeight }]}> | ||
<Animated.View | ||
style={{ | ||
backgroundColor: headerBackgroundColor, | ||
height: stickyHeaderHeight, | ||
opacity: scrollY.interpolate({ | ||
inputRange: [-window.height, 0, stickyHeaderHeight], | ||
outputRange: [0, 0, 1], | ||
extrapolate: 'clamp' | ||
}) | ||
}}> | ||
<Animated.View | ||
style={{ | ||
transform: [{ | ||
translateY: scrollY.interpolate({ | ||
inputRange: [-window.height, 0, stickyHeaderHeight], | ||
outputRange: [stickyHeaderHeight, stickyHeaderHeight, 0], | ||
extrapolate: 'clamp' | ||
}) | ||
}] | ||
}}> | ||
{ renderStickyHeader() } | ||
</Animated.View> | ||
</Animated.View> | ||
{ renderFixedHeader && renderFixedHeader() } | ||
</View> | ||
) | ||
: null | ||
} | ||
{ children } | ||
</View> | ||
@@ -172,21 +198,42 @@ ); | ||
getScrollResponder() { | ||
return this.refs.ScrollView.getScrollResponder(); | ||
_renderFooterSpacer({ contentBackgroundColor }) { | ||
return ( | ||
<View ref={ref => this._footerComponent = ref } style={{ backgroundColor: contentBackgroundColor }}/> | ||
); | ||
} | ||
getInnerViewNode() { | ||
return this.getScrollResponder().getInnerViewNode(); | ||
_maybeRenderStickyHeader({ stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }) { | ||
if (renderStickyHeader) { | ||
return ( | ||
<View style={[styles.stickyHeader, { height: stickyHeaderHeight }]}> | ||
<Animated.View | ||
style={{ | ||
backgroundColor: headerBackgroundColor, | ||
height: stickyHeaderHeight, | ||
opacity: this.state.scrollY.interpolate({ | ||
inputRange: [-window.height, 0, stickyHeaderHeight], | ||
outputRange: [0, 0, 1], | ||
extrapolate: 'clamp' | ||
}) | ||
}}> | ||
<Animated.View | ||
style={{ | ||
transform: [{ | ||
translateY: this.state.scrollY.interpolate({ | ||
inputRange: [-window.height, 0, stickyHeaderHeight], | ||
outputRange: [stickyHeaderHeight, stickyHeaderHeight, 0], | ||
extrapolate: 'clamp' | ||
}) | ||
}] | ||
}}> | ||
{ renderStickyHeader() } | ||
</Animated.View> | ||
</Animated.View> | ||
{ renderFixedHeader && renderFixedHeader() } | ||
</View> | ||
); | ||
} else { | ||
return null; | ||
} | ||
} | ||
scrollTo(destY, destX) { | ||
this.getScrollResponder().scrollTo(destY, destX); | ||
} | ||
scrollWithoutAnimationTo(destY, destX) { | ||
this.getScrollResponder().scrollWithoutAnimationTo(destY, destX); | ||
} | ||
setNativeProps(props) { | ||
this.refs.ScrollView.setNativeProps(props); | ||
} | ||
} | ||
@@ -199,2 +246,3 @@ | ||
contentBackgroundColor: '#fff', | ||
renderScrollComponent: props => <ScrollView {...props}/>, | ||
stickyHeaderHeight: 0, | ||
@@ -201,0 +249,0 @@ style: {} |
{ | ||
"name": "react-native-parallax-scroll-view", | ||
"version": "0.16.13", | ||
"version": "0.16.14", | ||
"description": "A ScrollView-like component with parallax and sticky header support", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -61,11 +61,12 @@ # react-native-parallax-scroll-view | ||
| Property | Type | Required | Default | Description | | ||
| -------- | ---- | -------- | ------- | ----------- | | ||
| `renderParallaxHeader` | `func` | **Yes** | N/A | This renders the parallax header above the background. | | ||
| `parallaxHeaderHeight` | `number` | **Yes** | N/A | This is the height of parallax header. | | ||
| `headerBackgroundColor` | `string` | No | `'#000'` | This is the background color of the sticky header, and also used as parallax header background color if `renderBackground` is not provided. | | ||
| `contentBackgroundColor` | `string` | No | `'#fff'` | This is the background color of the content. | | ||
| `renderBackground` | `func` | No | Opaque background using `headerBackgroundColor`. | This renders the background of the parallax header. Can be used to display cover images for example. | | ||
| `renderStickyHeader` | `func` | No | N/A | 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 | 0 | If `renderStickyHeader` is set, then its height must be specified. | | ||
| `renderFixedHeader` | `func` | No | N/A | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You must set its height and width appropriately. | | ||
| Property | Type | Required | Description | | ||
| -------- | ---- | -------- | ----------- | | ||
| `renderParallaxHeader` | `func` | **Yes** |This renders the parallax header above the background. | | ||
| `parallaxHeaderHeight` | `number` | **Yes** |This is the height of parallax header. | | ||
| `headerBackgroundColor` | `string` | No | This is the background color of the sticky header, and also used as parallax header background color if `renderBackground` is not provided. (Defaults to `'#000'`) | | ||
| `contentBackgroundColor` | `string` | No | This is the background color of the content. (Defaults to `'#fff'`) | | ||
| `renderBackground` | `func` | No | This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using `headerBackgroundColor`) | | ||
| `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. | | ||
| `renderFixedHeader` | `func` | No | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You must set its height and width appropriately. | | ||
| `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) | |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1991908
251
72