Socket
Socket
Sign inDemoInstall

react-native-parallax-scroll-view

Package Overview
Dependencies
0
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.16.8 to 0.16.9

23

index.js

@@ -13,3 +13,2 @@ const React = require('react-native');

any,
bool,
func,

@@ -22,6 +21,6 @@ number,

const IPropTypes = {
headerBackgroundColor: string,
contentBackgroundColor: string,
parallaxHeaderHeight: number.isRequired,
renderParallaxHeader: func.isRequired,
rowHeight: number,
backgroundColor: string,
renderStickyHeader: func,

@@ -31,3 +30,2 @@ renderFixedHeader: func,

stickyHeaderHeight: number,
shouldPadBottom: bool,
style: any

@@ -50,4 +48,5 @@ };

const {
backgroundColor,
children,
contentBackgroundColor,
headerBackgroundColor,
parallaxHeaderHeight,

@@ -68,3 +67,3 @@ stickyHeaderHeight,

style={[styles.backgroundImage, {
backgroundColor,
backgroundColor: headerBackgroundColor,
height: parallaxHeaderHeight,

@@ -116,3 +115,4 @@ width: window.width,

</View>
<View key="children" ref="children"
<View
style={{ backgroundColor: contentBackgroundColor }}
onLayout={e => {

@@ -123,3 +123,3 @@ // Adjust the bottom height so we can scroll the parallax header all the way up.

if (this._footerHeight !== footerHeight) {
this.refs.footer.setNativeProps({ style: { height: footerHeight }});
this.refs.Footer.setNativeProps({ style: { height: footerHeight }});
this._footerHeight = footerHeight;

@@ -130,3 +130,3 @@ }

</View>
<View ref="footer"/>
<View ref="Footer" style={{ backgroundColor: contentBackgroundColor }}/>
</ScrollView>

@@ -138,3 +138,3 @@ { renderStickyHeader

style={{
backgroundColor,
backgroundColor: headerBackgroundColor,
height: stickyHeaderHeight,

@@ -193,3 +193,4 @@ opacity: scrollY.interpolate({

ParallaxScrollView.defaultProps = {
backgroundColor: '#000',
headerBackgroundColor: '#000',
contentBackgroundColor: '#fff',
stickyHeaderHeight: 0,

@@ -196,0 +197,0 @@ style: {}

{
"name": "react-native-parallax-scroll-view",
"version": "0.16.8",
"version": "0.16.9",
"description": "A ScrollView-like component with parallax and sticky header support",

@@ -5,0 +5,0 @@ "main": "index.js",

@@ -5,2 +5,4 @@ # react-native-parallax-scroll-view

Tested with react-native 0.16.0 on Android and iOS.

@@ -18,6 +20,34 @@

## Example
## Basic Usage
Please refer to the [Example](./Example/example.js) provided.
```js
import ParallaxScrollView from 'react-native-parallax-scroll-view';
// Inside of a component's render() method:
render() {
return (
<ParallaxScrollView
headerBackgroundColor="blue"
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
renderParallaxHeader={() => (
<View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello World!</Text>
</View>
)}>
<View style={{ height: 500, backgroundColor: "pink" }}>
<Text>Scroll me</Text>
</View>
</ParallaxScrollView>
);
}
```
## Examples
Please refer to the [Example](./Example/example.js) provided to see how `ParallaxScrollView` can be used in
combination with `ListView`.
The [Android example](./Example/index.android.js) shows how you can use `PullToRefreshViewAndroid` with `ParallaxScrollView`.
## Usage (API)

@@ -34,3 +64,4 @@

| `parallaxHeaderHeight` | `number` | Yes | This is the height of parallax header. |
| `backgroundColor` | `string` | No | `'#000'` | This is the background color of sticky header, and also used as parallax header background color if `renderBackground` is not provided. |
| `headerBackgroundColor` | `string` | No | `'#000'` | This is the background color of the sticky header, and also used as parallax header background color if `renderBackground` is not provided. |
| `contentBackgroundColor` | `string` | No | `'#fff'` | This is the background color of the content. |
| `renderBackground` | `func` | No | Opaque background using `backgroundColor`. | This renders the background of the parallax header. Can be used to display cover images for example. |

@@ -37,0 +68,0 @@ | `renderStickyHeader` | `func` | No | N/A | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc