From 85e485beede38c5a6c17816ac3a9c6a5b3bdf671 Mon Sep 17 00:00:00 2001 From: bdavid68 Date: Wed, 16 Aug 2017 11:27:57 +1000 Subject: [PATCH 1/4] add sticky header slide direction --- .gitignore | 2 +- src/index.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 64b4cb1..029db81 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ lib/ node_modules/ npm-debug.log - +.idea/ \ No newline at end of file diff --git a/src/index.js b/src/index.js index 594c906..199dea7 100644 --- a/src/index.js +++ b/src/index.js @@ -42,6 +42,7 @@ const IPropTypes = { renderScrollComponent: func, renderStickyHeader: func, stickyHeaderHeight: number, + stickyHeaderSlideDirection: React.PropTypes.oneOf(['top', 'bottom']), contentContainerStyle: View.propTypes.style }; @@ -79,6 +80,7 @@ class ParallaxScrollView extends Component { renderScrollComponent, renderStickyHeader, stickyHeaderHeight, + stickyHeaderSlideDirection, style, contentContainerStyle, ...scrollViewProps @@ -88,7 +90,7 @@ class ParallaxScrollView extends Component { const foreground = this._renderForeground({ fadeOutForeground, parallaxHeaderHeight, stickyHeaderHeight, renderForeground: renderForeground || renderParallaxHeader }); const bodyComponent = this._wrapChildren(children, { contentBackgroundColor, stickyHeaderHeight, contentContainerStyle }); const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor }); - const maybeStickyHeader = this._maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }); + const maybeStickyHeader = this._maybeRenderStickyHeader({ stickyHeaderSlideDirection, parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }); const scrollElement = renderScrollComponent(scrollViewProps); return ( @@ -272,10 +274,11 @@ class ParallaxScrollView extends Component { ); } - _maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }) { + _maybeRenderStickyHeader({ stickyHeaderSlideDirection, parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }) { const { viewWidth, scrollY } = this.state; if (renderStickyHeader || renderFixedHeader) { const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight); + const outputValue = (stickyHeaderSlideDirection === 'top') ? -1 * stickyHeaderHeight : stickyHeaderHeight; return ( { @@ -283,7 +286,7 @@ class ParallaxScrollView extends Component { ? ( Date: Wed, 16 Aug 2017 11:53:13 +1000 Subject: [PATCH 2/4] fix a bug of fixed header --- src/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 199dea7..8deba23 100644 --- a/src/index.js +++ b/src/index.js @@ -279,8 +279,13 @@ class ParallaxScrollView extends Component { if (renderStickyHeader || renderFixedHeader) { const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight); const outputValue = (stickyHeaderSlideDirection === 'top') ? -1 * stickyHeaderHeight : stickyHeaderHeight; + let height = interpolate(scrollY, { + inputRange: [0, stickyHeaderHeight], + outputRange: [0, stickyHeaderHeight], + extrapolate: 'clamp' + }); return ( - + { renderStickyHeader ? ( From d79bbbc7ab2fd1c0b7d03bbb54466de9b1b0b2ae Mon Sep 17 00:00:00 2001 From: bdavid68 Date: Wed, 16 Aug 2017 11:56:39 +1000 Subject: [PATCH 3/4] update readme --- .DS_Store | Bin 0 -> 6148 bytes README.md | 4 +++- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5172429f264de2441865cb4700216d4256da9242 GIT binary patch literal 6148 zcmeH~J!%6%427R!7lt%jx}3%b$PET#pTHLgIFQEJ;E>dF^gR7ES*H$5cmnB-G%I%Z zD|S`@Z2$T80!#olbXV*=%*>dt@PRwdU#I)^a=X5>;#J@&VrHyNnC;iLL0pQvfVyTmjO&;ssLc!1UOG})p;=82 zR;?Ceh}WZ?+UmMqI#RP8R>OzYoz15hnq@nzF`-!xQ4j$Um=RcIKKc27r2jVm&svm< zfC&6E0=7P!4tu^-ovjbA=k?dB`g+i*aXG_}p8zI)6mRKa+;6_1_R^8c3Qa!(fk8n8 H{*=HsM+*^= literal 0 HcmV?d00001 diff --git a/README.md b/README.md index e335bd2..4f4c066 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ render() { backgroundColor="blue" contentBackgroundColor="pink" parallaxHeaderHeight={300} + stickyHeaderSlideDirection={'top'} renderForeground={() => ( Hello World! @@ -80,6 +81,7 @@ The `ParallaxScrollView` component adds a few additional properties, as describe | `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) | | `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. | +| `stickyHeaderSlideDirection` | `string` | If `stickyHeaderSlideDirection` is used | Slide direction of sticky header. | | `contentContainerStyle` | `object` | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as for [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)) | ## Latest changes @@ -87,7 +89,7 @@ The `ParallaxScrollView` component adds a few additional properties, as describe ### 0.19.0 - Fixes compatibility with React Native 0.27.2 -- Adds `contentContainerStyle` prop to style scroll container (thanks [@alaycock](https://github.com/alaycock)) +- Adds `contentContainerStyle` prop to style scroll container (thanks @alaycock) ### 0.18.1 From da292dbd521fe5ec3be0cdb1ec60077194ca3a2f Mon Sep 17 00:00:00 2001 From: bdavid68 Date: Wed, 16 Aug 2017 11:58:22 +1000 Subject: [PATCH 4/4] update readme --- .gitignore | 3 ++- README.md | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 029db81..3eb04cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ lib/ node_modules/ npm-debug.log -.idea/ \ No newline at end of file +.idea/ +.DS_Store \ No newline at end of file diff --git a/README.md b/README.md index 4f4c066..3a5c349 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ The `ParallaxScrollView` component adds a few additional properties, as describe | `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) | | `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. | -| `stickyHeaderSlideDirection` | `string` | If `stickyHeaderSlideDirection` is used | Slide direction of sticky header. | +| `stickyHeaderSlideDirection` | `string` | If `renderStickyHeader` is used | Slide direction of sticky header. It should be either 'top' or 'bottom' | | `contentContainerStyle` | `object` | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as for [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)) | ## Latest changes