1
1
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'
3
3
4
4
const styles = require ( './styles' )
5
5
@@ -13,6 +13,8 @@ const pivotPoint = (a, b) => a - b
13
13
14
14
const renderEmpty = ( ) => < View />
15
15
16
+ const noRender = ( ) => < View style = { { display : 'none' } } />
17
+
16
18
// Override `toJSON` of interpolated value because of
17
19
// an error when serializing style on view inside inspector.
18
20
// See: https://github.com/jaysoo/react-native-parallax-scroll-view/issues/23
@@ -32,6 +34,7 @@ const IPropTypes = {
32
34
onChangeHeaderVisibility : func ,
33
35
parallaxHeaderHeight : number . isRequired ,
34
36
renderBackground : func ,
37
+ renderContentBackground : func ,
35
38
renderFixedHeader : func ,
36
39
renderForeground : func ,
37
40
renderScrollComponent : func ,
@@ -79,6 +82,7 @@ class ParallaxScrollView extends Component {
79
82
fadeOutBackground,
80
83
parallaxHeaderHeight,
81
84
renderBackground,
85
+ renderContentBackground,
82
86
renderFixedHeader,
83
87
renderForeground,
84
88
renderParallaxHeader,
@@ -109,6 +113,7 @@ class ParallaxScrollView extends Component {
109
113
const bodyComponent = this . _wrapChildren ( children , {
110
114
contentBackgroundColor,
111
115
stickyHeaderHeight,
116
+ renderContentBackground,
112
117
contentContainerStyle
113
118
} )
114
119
const footerSpacer = this . _renderFooterSpacer ( { contentBackgroundColor } )
@@ -305,16 +310,24 @@ class ParallaxScrollView extends Component {
305
310
306
311
_wrapChildren (
307
312
children ,
308
- { contentBackgroundColor, stickyHeaderHeight, contentContainerStyle }
313
+ { contentBackgroundColor, stickyHeaderHeight, contentContainerStyle, renderContentBackground }
309
314
) {
310
315
const { viewHeight } = this . state
311
316
const containerStyles = [ { backgroundColor : contentBackgroundColor } ]
312
317
313
318
if ( contentContainerStyle ) containerStyles . push ( contentContainerStyle )
314
319
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
+
315
328
return (
316
329
< View
317
- style = { containerStyles }
330
+ style = { [ containerStyles , { minHeight : this . containerHeight } ] }
318
331
onLayout = { e => {
319
332
// Adjust the bottom height so we can scroll the parallax header all the way up.
320
333
const { nativeEvent : { layout : { height } } } = e
@@ -330,6 +343,7 @@ class ParallaxScrollView extends Component {
330
343
}
331
344
} }
332
345
>
346
+ { renderContentBackground ( ) }
333
347
{ children }
334
348
</ View >
335
349
)
@@ -338,7 +352,11 @@ class ParallaxScrollView extends Component {
338
352
_renderFooterSpacer ( { contentBackgroundColor } ) {
339
353
return (
340
354
< View
341
- ref = { ref => ( this . _footerComponent = ref ) }
355
+ ref = { ref => {
356
+ if ( ref ) {
357
+ this . _footerComponent = ref ;
358
+ }
359
+ } }
342
360
style = { { backgroundColor : contentBackgroundColor } }
343
361
/>
344
362
)
@@ -413,6 +431,7 @@ ParallaxScrollView.defaultProps = {
413
431
onChangeHeaderVisibility : ( ) => { } ,
414
432
renderScrollComponent : props => < Animated . ScrollView { ...props } /> ,
415
433
renderBackground : renderEmpty ,
434
+ renderContentBackground : noRender ,
416
435
renderParallaxHeader : renderEmpty , // Deprecated (will be removed in 0.18.0)
417
436
renderForeground : null ,
418
437
stickyHeaderHeight : 0 ,
0 commit comments