Skip to content

To avoid footer space issue in latest version #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

To avoid footer space issue in latest version #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
118 changes: 76 additions & 42 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Animated, Dimensions, ScrollView, View, ViewPropTypes } from 'react-native'
import { Animated, Dimensions, View, ViewPropTypes } from 'react-native'

const styles = require('./styles')

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

const renderEmpty = () => <View />

const noRender = () => <View style={{ display: 'none' }} />

// Override `toJSON` of interpolated value because of
// an error when serializing style on view inside inspector.
// See: https://github.com/jaysoo/react-native-parallax-scroll-view/issues/23
Expand All @@ -32,6 +34,7 @@ const IPropTypes = {
onChangeHeaderVisibility: func,
parallaxHeaderHeight: number.isRequired,
renderBackground: func,
renderContentBackground: func,
renderFixedHeader: func,
renderForeground: func,
renderScrollComponent: func,
Expand Down Expand Up @@ -60,7 +63,7 @@ class ParallaxScrollView extends Component {
viewWidth: window.width
}
this.scrollY = new Animated.Value(0)
this._footerComponent = { setNativeProps() {} } // Initial stub
this._footerComponent = { setNativeProps() { } } // Initial stub
this._footerHeight = 0
}

Expand All @@ -79,6 +82,7 @@ class ParallaxScrollView extends Component {
fadeOutBackground,
parallaxHeaderHeight,
renderBackground,
renderContentBackground,
renderFixedHeader,
renderForeground,
renderParallaxHeader,
Expand Down Expand Up @@ -109,6 +113,7 @@ class ParallaxScrollView extends Component {
const bodyComponent = this._wrapChildren(children, {
contentBackgroundColor,
stickyHeaderHeight,
renderContentBackground,
contentContainerStyle
})
const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor })
Expand Down Expand Up @@ -136,9 +141,19 @@ class ParallaxScrollView extends Component {
onScroll: Animated.event(
[{ nativeEvent: { contentOffset: { y: this.scrollY } } }],
{ useNativeDriver: true, listener: this._onScroll.bind(this) }
)
),
onContentSizeChange: (contentWidth, contentHeight) => {
if (contentHeight != this._mainHeight) {
const footerHeight = Math.max(0, this.state.viewHeight - this._mainHeight - stickyHeaderHeight);// this._mainHeight set by onLayout
if (this._footerHeight !== footerHeight) {
this._footerComponent.setNativeProps({ style: { height: footerHeight } });
this._footerHeight = footerHeight;
}
}
}
// onScroll: this._onScroll.bind(this)
},

foreground,
bodyComponent,
footerSpacer
Expand Down Expand Up @@ -176,7 +191,7 @@ class ParallaxScrollView extends Component {
parallaxHeaderHeight,
stickyHeaderHeight,
onChangeHeaderVisibility,
onScroll: prevOnScroll = e => {}
onScroll: prevOnScroll = () => { }
} = this.props
this.props.scrollEvent && this.props.scrollEvent(e)
const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight)
Expand Down Expand Up @@ -206,13 +221,18 @@ class ParallaxScrollView extends Component {
}

_maybeUpdateViewDimensions(e) {
const { nativeEvent: { layout: { width, height } } } = e

const { stickyHeaderHeight } = this.props;
const { nativeEvent: { layout: { width, height } } } = e;
if (width !== this.state.viewWidth || height !== this.state.viewHeight) {
const footerHeight = Math.max(0, height - this.mainHeight - stickyHeaderHeight);// this.mainHeight set by onLayout
if (this._footerHeight !== footerHeight) {
this._footerComponent.setNativeProps({ style: { height: footerHeight } });
this._footerHeight = footerHeight;
}
this.setState({
viewWidth: width,
viewHeight: height
})
});
}
}

Expand All @@ -238,10 +258,10 @@ class ParallaxScrollView extends Component {
width: viewWidth,
opacity: fadeOutBackground
? interpolate(scrollY, {
inputRange: [0, p * (1 / 2), p * (3 / 4), p],
outputRange: [1, 0.3, 0.1, 0],
extrapolate: 'clamp'
})
inputRange: [0, p * (1 / 2), p * (3 / 4), p],
outputRange: [1, 0.3, 0.1, 0],
extrapolate: 'clamp'
})
: 1,
transform: [
{
Expand All @@ -255,7 +275,7 @@ class ParallaxScrollView extends Component {
{
scale: interpolate(scrollY, {
inputRange: [-viewHeight, 0],
outputRange: [outputScaleValue, 1],
outputRange: [outputScaleValue * 1.5, 1],
extrapolate: 'clamp'
})
}
Expand Down Expand Up @@ -287,10 +307,10 @@ class ParallaxScrollView extends Component {
height: parallaxHeaderHeight,
opacity: fadeOutForeground
? interpolate(scrollY, {
inputRange: [0, p * (1 / 2), p * (3 / 4), p],
outputRange: [1, 0.3, 0.1, 0],
extrapolate: 'clamp'
})
inputRange: [0, p * (1 / 2), p * (3 / 4), p],
outputRange: [1, 0.3, 0.1, 0],
extrapolate: 'clamp'
})
: 1
}
]}
Expand All @@ -305,16 +325,24 @@ class ParallaxScrollView extends Component {

_wrapChildren(
children,
{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle }
{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle, renderContentBackground }
) {
const { viewHeight } = this.state
const containerStyles = [{ backgroundColor: contentBackgroundColor }]

if (contentContainerStyle) containerStyles.push(contentContainerStyle)

this.containerHeight = this.state.viewHeight;

React.Children.forEach(children, (item) => {
if (item && Object.keys(item).length != 0) {
this.containerHeight = 0;
}
});

return (
<View
style={containerStyles}
style={[containerStyles, { minHeight: this.containerHeight }]}
onLayout={e => {
// Adjust the bottom height so we can scroll the parallax header all the way up.
const { nativeEvent: { layout: { height } } } = e
Expand All @@ -330,6 +358,7 @@ class ParallaxScrollView extends Component {
}
}}
>
{renderContentBackground()}
{children}
</View>
)
Expand All @@ -338,7 +367,11 @@ class ParallaxScrollView extends Component {
_renderFooterSpacer({ contentBackgroundColor }) {
return (
<View
ref={ref => (this._footerComponent = ref)}
ref={ref => {
if (ref) {
this._footerComponent = ref;
}
}}
style={{ backgroundColor: contentBackgroundColor }}
/>
)
Expand Down Expand Up @@ -367,32 +400,32 @@ class ParallaxScrollView extends Component {
>
{renderStickyHeader
? <Animated.View
style={{
backgroundColor: backgroundColor,
height: stickyHeaderHeight,
opacity: interpolate(scrollY, {
inputRange: [0, p],
outputRange: [0, 1],
extrapolate: 'clamp'
})
}}
>
<Animated.View
style={{
backgroundColor: backgroundColor,
height: stickyHeaderHeight,
opacity: interpolate(scrollY, {
inputRange: [0, p],
outputRange: [0, 1],
extrapolate: 'clamp'
})
transform: [
{
translateY: interpolate(scrollY, {
inputRange: [0, p],
outputRange: [stickyHeaderHeight, 0],
extrapolate: 'clamp'
})
}
]
}}
>
<Animated.View
style={{
transform: [
{
translateY: interpolate(scrollY, {
inputRange: [0, p],
outputRange: [stickyHeaderHeight, 0],
extrapolate: 'clamp'
})
}
]
}}
>
{renderStickyHeader()}
</Animated.View>
{renderStickyHeader()}
</Animated.View>
</Animated.View>
: null}
{renderFixedHeader && renderFixedHeader()}
</View>
Expand All @@ -410,9 +443,10 @@ ParallaxScrollView.defaultProps = {
backgroundColor: '#000',
contentBackgroundColor: '#fff',
fadeOutForeground: true,
onChangeHeaderVisibility: () => {},
onChangeHeaderVisibility: () => { },
renderScrollComponent: props => <Animated.ScrollView {...props} />,
renderBackground: renderEmpty,
renderContentBackground: noRender,
renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
renderForeground: null,
stickyHeaderHeight: 0,
Expand Down