react-native-parallax-scroll-view - npm Package Compare versions

Comparing version 0.16.8 to 0.16.9

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: {}

package.json

 {
   "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",

README.md

@@ -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. |

No alert changes

Improved metrics

Total package byte prevSize

10797

increased by11.77%

Lines of code

208

increased by0.48%

Number of lines in readme file

68

increased by83.78%

No dependency changes