Skip to content

Commit 0c41ce9

Browse files
jaysoojaysoo
committed
adjusts content dimenions when they change
1 parent 14b3344 commit 0c41ce9

File tree

3 files changed

+77
-61
lines changed

3 files changed

+77
-61
lines changed

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "react-native-parallax-scroll-view",
3-
"version": "0.16.17",
3+
"version": "0.16.18",
44
"description": "A ScrollView-like component with parallax and sticky header support",
5-
"main": "index.js",
5+
"main": "src/index.js",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/jaysoo/react-native-parallax-listview"
99
},
1010
"files": [
11-
"index",
11+
"src",
1212
"parallax-ios.gif",
1313
"parallax-android.gif",
1414
"README.md",

‎index.js renamed to ‎src/index.js

+41-58
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,14 @@ const {
44
Component,
55
Dimensions,
66
ScrollView,
7-
StyleSheet,
87
View
98
} = React;
109

11-
const {
12-
any,
13-
func,
14-
number,
15-
string
16-
} = React.PropTypes;
10+
const styles = require('./styles');
11+
12+
const { any, func, number, string } = React.PropTypes;
13+
14+
const window = Dimensions.get('window');
1715

1816
const SCROLLVIEW_REF = 'ScrollView';
1917

@@ -28,8 +26,7 @@ const IPropTypes = {
2826
renderScrollComponent: func,
2927
renderFixedHeader: func,
3028
renderBackground: func,
31-
stickyHeaderHeight: number,
32-
style: any
29+
stickyHeaderHeight: number
3330
};
3431

3532
class ParallaxScrollView extends Component {
@@ -38,7 +35,11 @@ class ParallaxScrollView extends Component {
3835
if (props.renderStickyHeader && !props.stickyHeaderHeight) {
3936
console.error('Property `stickyHeaderHeight` must be set if `renderStickyHeader` is used')
4037
}
41-
this.state = { scrollY: new Animated.Value(0) };
38+
this.state = {
39+
scrollY: new Animated.Value(0),
40+
viewHeight: window.height,
41+
viewWidth: window.width
42+
};
4243
this._footerComponent = { setNativeProps() {} }; // Initial stub
4344
this._footerHeight = 0;
4445
this._animatedEvent = Animated.event([{nativeEvent: { contentOffset: { y: this.state.scrollY } } }]);
@@ -65,14 +66,16 @@ class ParallaxScrollView extends Component {
6566
const bodyComponent = this._wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight });
6667
const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor });
6768
const maybeStickyHeader = this._maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader });
69+
const scrollElement = renderScrollComponent(scrollViewProps);
6870

6971
return (
70-
<View style={styles.container}>
72+
<View style={[style, styles.container]}
73+
onLayout={(e) => this._maybeUpdateViewDimensions(e)}>
7174
{ background }
7275
{
73-
React.cloneElement(renderScrollComponent(scrollViewProps), {
76+
React.cloneElement(scrollElement, {
7477
ref: SCROLLVIEW_REF,
75-
style: [style, styles.scrollView],
78+
style: [styles.scrollView, scrollElement.props.style],
7679
scrollEventThrottle: 16,
7780
onScroll: this._onScroll.bind(this),
7881
},
@@ -130,24 +133,36 @@ class ParallaxScrollView extends Component {
130133
prevOnScroll(e);
131134
}
132135

136+
_maybeUpdateViewDimensions(e) {
137+
const { nativeEvent: { layout: { width, height} } } = e;
138+
139+
if (width !== this.state.viewWidth || height !== this.state.viewHeight) {
140+
this.setState({
141+
viewWidth: width,
142+
viewHeight: height
143+
});
144+
}
145+
}
146+
133147
_renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground }) {
148+
const { viewWidth, viewHeight, scrollY } = this.state;
134149
const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2;
135150
return (
136151
<Animated.View
137152
style={[styles.backgroundImage, {
138153
backgroundColor: headerBackgroundColor,
139154
height: parallaxHeaderHeight,
140-
width: window.width,
155+
width: viewWidth,
141156
transform: [{
142-
translateY: this.state.scrollY.interpolate({
157+
translateY: scrollY.interpolate({
143158
inputRange: [0, midpoint],
144159
outputRange: [0, -midpoint],
145160
extrapolateRight: 'extend',
146161
extrapolateLeft: 'clamp'
147162
})
148163
}, {
149-
scale: this.state.scrollY.interpolate({
150-
inputRange: [-window.height, 0],
164+
scale: scrollY.interpolate({
165+
inputRange: [-viewHeight, 0],
151166
outputRange: [5, 1],
152167
extrapolate: 'clamp'
153168
})
@@ -184,13 +199,14 @@ class ParallaxScrollView extends Component {
184199
}
185200

186201
_wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight }) {
202+
const { viewHeight } = this.state;
187203
return (
188204
<View
189205
style={{ backgroundColor: contentBackgroundColor }}
190206
onLayout={e => {
191207
// Adjust the bottom height so we can scroll the parallax header all the way up.
192208
const { nativeEvent: { layout: { height } } } = e;
193-
const footerHeight = Math.max(0, window.height - height - stickyHeaderHeight);
209+
const footerHeight = Math.max(0, viewHeight - height - stickyHeaderHeight);
194210
if (this._footerHeight !== footerHeight) {
195211
this._footerComponent.setNativeProps({ style: { height: footerHeight }});
196212
this._footerHeight = footerHeight;
@@ -208,15 +224,16 @@ class ParallaxScrollView extends Component {
208224
}
209225

210226
_maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }) {
227+
const { viewWidth, viewHeight, scrollY } = this.state;
211228
if (renderStickyHeader) {
212229
const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2;
213230
return (
214-
<View style={[styles.stickyHeader, { height: stickyHeaderHeight }]}>
231+
<View style={[styles.stickyHeader, { width: viewWidth, height: stickyHeaderHeight }]}>
215232
<Animated.View
216233
style={{
217234
backgroundColor: headerBackgroundColor,
218235
height: stickyHeaderHeight,
219-
opacity: this.state.scrollY.interpolate({
236+
opacity: scrollY.interpolate({
220237
inputRange: [0, midpoint],
221238
outputRange: [0, 1],
222239
extrapolate: 'clamp'
@@ -225,7 +242,7 @@ class ParallaxScrollView extends Component {
225242
<Animated.View
226243
style={{
227244
transform: [{
228-
translateY: this.state.scrollY.interpolate({
245+
translateY: scrollY.interpolate({
229246
inputRange: [0, midpoint],
230247
outputRange: [stickyHeaderHeight, 0],
231248
extrapolate: 'clamp'
@@ -247,47 +264,13 @@ class ParallaxScrollView extends Component {
247264
ParallaxScrollView.propTypes = IPropTypes;
248265

249266
ParallaxScrollView.defaultProps = {
250-
renderBackground: () => <View/>,
251-
renderParallaxHeader: () => <View/>,
252267
headerBackgroundColor: '#000',
253268
contentBackgroundColor: '#fff',
254269
onChangeHeaderVisibility: () => {},
255270
renderScrollComponent: props => <ScrollView {...props}/>,
256-
stickyHeaderHeight: 0,
257-
style: {}
271+
renderBackground: () => <View/>,
272+
renderParallaxHeader: () => <View/>,
273+
stickyHeaderHeight: 0
258274
};
259275

260-
const window = Dimensions.get('window');
261-
262-
const styles = StyleSheet.create({
263-
container: {
264-
flex: 1,
265-
backgroundColor: 'transparent'
266-
},
267-
parallaxHeaderContainer: {
268-
backgroundColor: 'transparent',
269-
overflow: 'hidden'
270-
},
271-
parallaxHeader: {
272-
backgroundColor: 'transparent',
273-
overflow: 'hidden'
274-
},
275-
backgroundImage: {
276-
position: 'absolute',
277-
backgroundColor: 'transparent',
278-
top: 0
279-
},
280-
stickyHeader: {
281-
backgroundColor: 'transparent',
282-
position: 'absolute',
283-
overflow: 'hidden',
284-
top: 0,
285-
left: 0,
286-
width: window.width
287-
},
288-
scrollView: {
289-
backgroundColor: 'transparent'
290-
}
291-
});
292-
293276
module.exports = ParallaxScrollView;

‎src/styles.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const StyleSheet = require('react-native').StyleSheet;
2+
3+
const styles = StyleSheet.create({
4+
container: {
5+
flex: 1,
6+
backgroundColor: 'transparent'
7+
},
8+
parallaxHeaderContainer: {
9+
backgroundColor: 'transparent',
10+
overflow: 'hidden'
11+
},
12+
parallaxHeader: {
13+
backgroundColor: 'transparent',
14+
overflow: 'hidden'
15+
},
16+
backgroundImage: {
17+
position: 'absolute',
18+
backgroundColor: 'transparent',
19+
top: 0
20+
},
21+
stickyHeader: {
22+
backgroundColor: 'transparent',
23+
position: 'absolute',
24+
overflow: 'hidden',
25+
top: 0,
26+
left: 0
27+
},
28+
scrollView: {
29+
backgroundColor: 'transparent'
30+
}
31+
});
32+
33+
module.exports = styles;

0 commit comments

Comments
 (0)