Skip to content

Commit eb36c67

Browse files
authored
Merge pull request #106 from FactorBench/master
render content background added
2 parents 34f52b4 + 23487cf commit eb36c67

File tree

1 file changed

+23
-4
lines changed

1 file changed

+23
-4
lines changed

src/index.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Animated, Dimensions, ScrollView, View, ViewPropTypes } from 'react-native'
2+
import { Animated, Dimensions, ScrollView, View, ViewPropTypes, Image } from 'react-native'
33

44
const styles = require('./styles')
55

@@ -13,6 +13,8 @@ const pivotPoint = (a, b) => a - b
1313

1414
const renderEmpty = () => <View />
1515

16+
const noRender = () => <View style={{display: 'none'}} />
17+
1618
// Override `toJSON` of interpolated value because of
1719
// an error when serializing style on view inside inspector.
1820
// See: https://github.com/jaysoo/react-native-parallax-scroll-view/issues/23
@@ -32,6 +34,7 @@ const IPropTypes = {
3234
onChangeHeaderVisibility: func,
3335
parallaxHeaderHeight: number.isRequired,
3436
renderBackground: func,
37+
renderContentBackground: func,
3538
renderFixedHeader: func,
3639
renderForeground: func,
3740
renderScrollComponent: func,
@@ -79,6 +82,7 @@ class ParallaxScrollView extends Component {
7982
fadeOutBackground,
8083
parallaxHeaderHeight,
8184
renderBackground,
85+
renderContentBackground,
8286
renderFixedHeader,
8387
renderForeground,
8488
renderParallaxHeader,
@@ -109,6 +113,7 @@ class ParallaxScrollView extends Component {
109113
const bodyComponent = this._wrapChildren(children, {
110114
contentBackgroundColor,
111115
stickyHeaderHeight,
116+
renderContentBackground,
112117
contentContainerStyle
113118
})
114119
const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor })
@@ -305,16 +310,24 @@ class ParallaxScrollView extends Component {
305310

306311
_wrapChildren(
307312
children,
308-
{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle }
313+
{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle, renderContentBackground }
309314
) {
310315
const { viewHeight } = this.state
311316
const containerStyles = [{ backgroundColor: contentBackgroundColor }]
312317

313318
if (contentContainerStyle) containerStyles.push(contentContainerStyle)
314319

320+
this.containerHeight = this.state.viewHeight;
321+
322+
children.forEach((item) => {
323+
if (item && Object.keys(item).length != 0) {
324+
this.containerHeight = 0;
325+
}
326+
});
327+
315328
return (
316329
<View
317-
style={containerStyles}
330+
style={[containerStyles, { minHeight: this.containerHeight }]}
318331
onLayout={e => {
319332
// Adjust the bottom height so we can scroll the parallax header all the way up.
320333
const { nativeEvent: { layout: { height } } } = e
@@ -330,6 +343,7 @@ class ParallaxScrollView extends Component {
330343
}
331344
}}
332345
>
346+
{renderContentBackground()}
333347
{children}
334348
</View>
335349
)
@@ -338,7 +352,11 @@ class ParallaxScrollView extends Component {
338352
_renderFooterSpacer({ contentBackgroundColor }) {
339353
return (
340354
<View
341-
ref={ref => (this._footerComponent = ref)}
355+
ref={ref => {
356+
if (ref) {
357+
this._footerComponent = ref;
358+
}
359+
}}
342360
style={{ backgroundColor: contentBackgroundColor }}
343361
/>
344362
)
@@ -413,6 +431,7 @@ ParallaxScrollView.defaultProps = {
413431
onChangeHeaderVisibility: () => {},
414432
renderScrollComponent: props => <Animated.ScrollView {...props} />,
415433
renderBackground: renderEmpty,
434+
renderContentBackground: noRender,
416435
renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
417436
renderForeground: null,
418437
stickyHeaderHeight: 0,

0 commit comments

Comments
 (0)