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

Comparing version 0.16.13 to 0.16.14

index.js

@@ -18,2 +18,4 @@ const React = require('react-native');
 
+const SCROLLVIEW_REF = 'ScrollView';
+
 // Properties accepted by `ParallaxScrollView`.
@@ -26,2 +28,3 @@ const IPropTypes = {
   renderStickyHeader: func,
+  renderScrollComponent: func,
   renderFixedHeader: func,
@@ -40,2 +43,3 @@ renderBackground: func,
     this.state = { scrollY: new Animated.Value(0) };
+    this._footerComponent = null;
     this._footerHeight = 0;
@@ -46,3 +50,2 @@ this._animatedEvent = Animated.event([{nativeEvent: { contentOffset: { y: this.state.scrollY } } }]);
   render() {
-    const { scrollY } = this.state;
     const {
@@ -57,4 +60,4 @@ children,
       renderParallaxHeader,
+      renderScrollComponent,
       renderStickyHeader,
-      onScroll: prevOnScroll = () => {},
       style,
@@ -64,6 +67,61 @@ ...scrollViewProps
 
+    const background = this._renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground });
+    const parallaxHeader = this._renderParallaxHeader({ parallaxHeaderHeight, stickyHeaderHeight, renderParallaxHeader });
+    const bodyComponent = this._wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight });
+    const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor });
+    const maybeStickyHeader = this._maybeRenderStickyHeader({ stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader });
+
     return (
       <View style={styles.container}>
-        <Animated.View
-          style={[styles.backgroundImage, {
+        { background }
+        {
+          React.cloneElement(renderScrollComponent(scrollViewProps), {
+            ref: SCROLLVIEW_REF,
+            style: [style, styles.scrollView],
+            scrollEventThrottle: 16,
+            onScroll: this._onScroll.bind(this),
+          },
+            parallaxHeader,
+            bodyComponent,
+            footerSpacer
+          )
+        }
+        { maybeStickyHeader }
+      </View>
+    );
+  }
+
+  /*
+   * Expose `ScrollView` API so this component is composable with any component that expects a `ScrollView`.
+   */
+  getScrollResponder() {
+    return this.refs[SCROLLVIEW_REF].getScrollResponder();
+  }
+  getInnerViewNode() {
+    return this.getScrollResponder().getInnerViewNode();
+  }
+  scrollTo(destY, destX) {
+    this.getScrollResponder().scrollTo(destY, destX);
+  }
+  scrollWithoutAnimationTo(destY, destX) {
+    this.getScrollResponder().scrollWithoutAnimationTo(destY, destX);
+  }
+  setNativeProps(props) {
+    this.refs[SCROLLVIEW_REF].setNativeProps(props);
+  }
+
+  /*
+   * Private helpers
+   */
+
+  _onScroll(e) {
+    const { onScroll: prevOnScroll = () => {} } = this.props;
+    this._animatedEvent(e);
+    prevOnScroll(e);
+  }
+
+  _renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground }) {
+    return (
+      <Animated.View
+        style={[styles.backgroundImage, {
             backgroundColor: headerBackgroundColor,
@@ -73,3 +131,3 @@ height: parallaxHeaderHeight,
             transform: [{
-              translateY: scrollY.interpolate({
+              translateY: this.state.scrollY.interpolate({
                 inputRange: [0, parallaxHeaderHeight - stickyHeaderHeight],
@@ -81,3 +139,3 @@ outputRange: [0, -parallaxHeaderHeight],
             }, {
-              scale: scrollY.interpolate({
+              scale: this.state.scrollY.interpolate({
                 inputRange: [-window.height, 0],
@@ -89,18 +147,15 @@ outputRange: [5, 1],
           }]}>
-          <View>
-            { renderBackground && renderBackground() }
-          </View>
-        </Animated.View>
-        <ScrollView {...scrollViewProps}
-            ref="ScrollView"
-            style={[style, styles.scrollView]}
-            scrollEventThrottle={16}
-            onScroll={e => {
-              this._animatedEvent(e);
-              prevOnScroll(e);
-            }}>
-          <View style={styles.parallaxHeaderContainer}>
-            <Animated.View
-                style={[styles.parallaxHeader, {
-                  height: scrollY.interpolate({
+        <View>
+          { renderBackground && renderBackground() }
+        </View>
+      </Animated.View>
+    );
+  }
+
+  _renderParallaxHeader({ parallaxHeaderHeight, stickyHeaderHeight, renderParallaxHeader }) {
+    return (
+      <View style={styles.parallaxHeaderContainer}>
+        <Animated.View
+          style={[styles.parallaxHeader, {
+                  height: this.state.scrollY.interpolate({
                     inputRange: [0, parallaxHeaderHeight - stickyHeaderHeight],
@@ -110,3 +165,3 @@ outputRange: [parallaxHeaderHeight, stickyHeaderHeight],
                   }),
-                  opacity: scrollY.interpolate({
+                  opacity: this.state.scrollY.interpolate({
                     inputRange: [0, (parallaxHeaderHeight - stickyHeaderHeight) / 2 - 20, (parallaxHeaderHeight - stickyHeaderHeight) / 2],
@@ -117,8 +172,13 @@ outputRange: [1, .9, 0],
                 }]}>
-              { renderParallaxHeader && renderParallaxHeader() }
-            </Animated.View>
-          </View>
-          <View
-              style={{ backgroundColor: contentBackgroundColor }}
-              onLayout={e => {
+          { renderParallaxHeader && renderParallaxHeader() }
+        </Animated.View>
+      </View>
+    );
+  }
+
+  _wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight }) {
+    return (
+      <View
+        style={{ backgroundColor: contentBackgroundColor }}
+        onLayout={e => {
                 // Adjust the bottom height so we can scroll the parallax header all the way up.
@@ -128,41 +188,7 @@ const { nativeEvent: { layout: { height } } } = e;
                 if (this._footerHeight !== footerHeight) {
-                  this.refs.Footer.setNativeProps({ style: { height: footerHeight }});
+                  this._footerComponent.setNativeProps({ style: { height: footerHeight }});
                   this._footerHeight = footerHeight;
                 }
               }}>
-            { children }
-          </View>
-          <View ref="Footer" style={{ backgroundColor: contentBackgroundColor }}/>
-        </ScrollView>
-        { renderStickyHeader
-          ? (
-          <View style={[styles.stickyHeader, { height: stickyHeaderHeight }]}>
-            <Animated.View
-              style={{
-                    backgroundColor: headerBackgroundColor,
-                    height: stickyHeaderHeight,
-                    opacity: scrollY.interpolate({
-                      inputRange: [-window.height, 0, stickyHeaderHeight],
-                      outputRange: [0, 0, 1],
-                      extrapolate: 'clamp'
-                    })
-                  }}>
-              <Animated.View
-                style={{
-                        transform: [{
-                          translateY: scrollY.interpolate({
-                            inputRange: [-window.height, 0, stickyHeaderHeight],
-                            outputRange: [stickyHeaderHeight, stickyHeaderHeight, 0],
-                            extrapolate: 'clamp'
-                          })
-                        }]
-                      }}>
-                { renderStickyHeader() }
-              </Animated.View>
-            </Animated.View>
-            { renderFixedHeader && renderFixedHeader() }
-          </View>
-        )
-          : null
-        }
+        { children }
       </View>
@@ -172,21 +198,42 @@ );
 
-  getScrollResponder() {
-    return this.refs.ScrollView.getScrollResponder();
+  _renderFooterSpacer({ contentBackgroundColor }) {
+    return (
+      <View ref={ref => this._footerComponent = ref } style={{ backgroundColor: contentBackgroundColor }}/>
+    );
   }
 
-  getInnerViewNode() {
-    return this.getScrollResponder().getInnerViewNode();
+  _maybeRenderStickyHeader({ stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }) {
+    if (renderStickyHeader) {
+      return (
+        <View style={[styles.stickyHeader, { height: stickyHeaderHeight }]}>
+          <Animated.View
+              style={{
+                backgroundColor: headerBackgroundColor,
+                height: stickyHeaderHeight,
+                opacity: this.state.scrollY.interpolate({
+                  inputRange: [-window.height, 0, stickyHeaderHeight],
+                  outputRange: [0, 0, 1],
+                  extrapolate: 'clamp'
+                })
+              }}>
+            <Animated.View
+                style={{
+                  transform: [{
+                    translateY: this.state.scrollY.interpolate({
+                      inputRange: [-window.height, 0, stickyHeaderHeight],
+                      outputRange: [stickyHeaderHeight, stickyHeaderHeight, 0],
+                      extrapolate: 'clamp'
+                    })
+                  }]
+                }}>
+              { renderStickyHeader() }
+            </Animated.View>
+          </Animated.View>
+          { renderFixedHeader && renderFixedHeader() }
+        </View>
+      );
+    } else {
+      return null;
+    }
   }
-
-  scrollTo(destY, destX) {
-    this.getScrollResponder().scrollTo(destY, destX);
-  }
-
-  scrollWithoutAnimationTo(destY, destX) {
-    this.getScrollResponder().scrollWithoutAnimationTo(destY, destX);
-  }
-
-  setNativeProps(props) {
-    this.refs.ScrollView.setNativeProps(props);
-  }
 }
@@ -199,2 +246,3 @@
   contentBackgroundColor: '#fff',
+  renderScrollComponent: props => <ScrollView {...props}/>,
   stickyHeaderHeight: 0,
@@ -201,0 +249,0 @@ style: {}

package.json

 {
   "name": "react-native-parallax-scroll-view",
-  "version": "0.16.13",
+  "version": "0.16.14",
   "description": "A ScrollView-like component with parallax and sticky header support",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -61,11 +61,12 @@ # react-native-parallax-scroll-view
 
-| Property | Type | Required | Default | Description |
-| -------- | ---- | -------- | ------- | ----------- |
-| `renderParallaxHeader` |  `func` | **Yes** | N/A | This renders the parallax header above the background. |
-| `parallaxHeaderHeight` | `number` | **Yes** | N/A | This is the height of parallax header. |
-| `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 `headerBackgroundColor`. | This renders the background of the parallax header. Can be used to display cover images for example. |
-| `renderStickyHeader` | `func` | No | N/A | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |
-| `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | 0 | If `renderStickyHeader` is set, then its height must be specified. |
-| `renderFixedHeader` | `func` | No | N/A | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You must set its height and width appropriately. |
+| Property | Type | Required | Description |
+| -------- | ---- | -------- | ----------- |
+| `renderParallaxHeader` |  `func` | **Yes** |This renders the parallax header above the background. |
+| `parallaxHeaderHeight` | `number` | **Yes** |This is the height of parallax header. |
+| `headerBackgroundColor` | `string` | No | This is the background color of the sticky header, and also used as parallax header background color if `renderBackground` is not provided. (Defaults to `'#000'`) |
+| `contentBackgroundColor` | `string` | No | This is the background color of the content. (Defaults to `'#fff'`) |
+| `renderBackground` | `func` | No | This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using `headerBackgroundColor`) |
+| `renderStickyHeader` | `func` | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |
+| `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | If `renderStickyHeader` is set, then its height must be specified. |
+| `renderFixedHeader` | `func` | No | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You must set its height and width appropriately. |
+| `renderScrollComponent` | `func` | No | A function with input `props` and outputs a `ScrollView`-like component in which the content is rendered. This is useful if you want to provide your own scrollable component. (See: [https://github.com/exponentjs/react-native-scrollable-mixin](https://github.com/exponentjs/react-native-scrollable-mixin)) (By default, returns a `ScrollView` with the given props) |

No alert changes

Improved metrics

Total package byte prevSize

1991908

increased by0.1%

Lines of code

251

increased by20.67%

Number of lines in readme file

72

increased by1.41%

No dependency changes