Skip to content

replace “renderEmptyView” with a configurable placeholder #24

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

Merged
merged 1 commit into from
Apr 14, 2018
Merged

replace “renderEmptyView” with a configurable placeholder #24

Show file tree
Hide file tree
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ The `ParallaxScroll` component adds a few additional properties, as described be
| `headerFixedTransformY` | `number` | `0` | This number indicating how much the fixed header should move upwards during the scroll. Used as the hack to change fixed header height during scroll. |
| `onChangeHeaderVisibility` | `func` | `null` | A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with a `boolean` value to indicate whether header is visible or not. |
| `renderParallaxBackground` | `({ width, height, animatedValue }) => {}` | `null` | This renders the background of the parallax. |
| `renderBackgroundPlaceholder` | `({ height, animatedValue }) => {}` | `null` | By default we assume that you want to show the foreground and background in its own space. We prepend an empty view with the height of `parallaxHeight`. You can override this behaviour to layer things in between foreground and background. You might want to avoid foreground in such a scenario, see Issue [#23](https://github.com/monterosalondon/react-native-parallax-scroll/issues/23) for more details. |
| `renderParallaxForeground` | `({ width, height, animatedValue }) => {}` | `null` | This renders the foreground of the parallax. |
| `fadeOutParallaxBackground` | `bool` | `false` | If `true`, the background will fade out as the user scrolls up. |
| `fadeOutParallaxForeground` | `bool` | `false` | If `true`, the foreground will fade out as the user scrolls up. |
Expand Down
26 changes: 21 additions & 5 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default class ParallaxScroll extends Component {
PropTypes.number,
PropTypes.object
]),
renderBackgroundPlaceholder: PropTypes.func,
onChangeHeaderVisibility: PropTypes.func,
renderParallaxBackground: PropTypes.func,
renderParallaxForeground: PropTypes.func,
Expand Down Expand Up @@ -77,6 +78,7 @@ export default class ParallaxScroll extends Component {
headerBackgroundColor: 'rgba(0, 0, 0, 0)',
contentContainerStyle: {},
onChangeHeaderVisibility: () => {},
renderBackgroundPlaceholder: null,
renderParallaxBackground: null,
renderParallaxForeground: null,
fadeOutParallaxForeground: false,
Expand Down Expand Up @@ -126,7 +128,7 @@ export default class ParallaxScroll extends Component {
return [{ data: [{ key: KEY }], key: KEY }, ...sections];
}

return [{ data: [{ key: KEY }], key: KEY, renderItem: this._renderEmptyView }, ...sections];
return [{ data: [{ key: KEY }], key: KEY, renderItem: this._renderBackgroundPlaceholder }, ...sections];
}

_onScroll = e => {
Expand Down Expand Up @@ -163,21 +165,35 @@ export default class ParallaxScroll extends Component {

_renderRow = (rowData, sectionID, rowID, highlightRow) => {
if (sectionID === KEY) {
return this._renderEmptyView();
return this._renderBackgroundPlaceholder();
}

return this.props.renderRow(rowData, sectionID, rowID, highlightRow);
};

_renderItem = e => {
if (e.item.key === KEY) {
return this._renderEmptyView();
return this._renderBackgroundPlaceholder();
}

return this.props.renderItem(e);
};

_renderEmptyView = () => <View style={{ height: this.props.parallaxHeight }} />;
_renderBackgroundPlaceholder = () => {
const {
renderBackgroundPlaceholder,
parallaxHeight
} = this.props;

if (renderBackgroundPlaceholder) {
return renderBackgroundPlaceholder({
animatedValue: this.scrollY,
height: parallaxHeight
});
} else {
return <View style={{ height: parallaxHeight }} />;
}
}

_ref = ref => {
if (typeof this.props.innerRef === 'function' && ref && ref._component) {
Expand Down Expand Up @@ -430,7 +446,7 @@ export default class ParallaxScroll extends Component {
>
{isRenderChildComponents && renderParallaxForeground && this._renderParallaxForeground()}

{isRenderChildComponents && this._renderEmptyView()}
{isRenderChildComponents && this._renderBackgroundPlaceholder()}

{isRenderChildComponents && children}
</ScrollableComponent>
Expand Down