Skip to content

Commit 8a03e85

Browse files
author
Rodrigo Cervantes Saucedo
committed
Added prop value to scale interpolation
1 parent c4a05d6 commit 8a03e85

File tree

4 files changed

+21
-20
lines changed

4 files changed

+21
-20
lines changed

CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
## Changelog
22

3+
### 0.20.1
4+
- Added prop to change interpolated Scale Output Value
5+
36
### 0.20.0 // Rodrigocs
47
- Now uses native driver, and tested with React Native 0.46.0
58
- Adds `useNativeDriver` to improve performance, but renderScrollComponent must be a Animated component ( ie: Animated.createAnimatedComponent(component))

README.md

+7-14
Original file line numberDiff line numberDiff line change
@@ -114,24 +114,17 @@ The `ParallaxScrollView` component adds a few additional properties, as describe
114114
| `renderStickyHeader` | `func` | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |
115115
| `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | If `renderStickyHeader` is set, then its height must be specified. |
116116
| `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)) |
117+
| `outputScaleValue` | `number` | No | The value for the scale interpolation output value, default `5` |
117118

118-
## Latest changes
119-
120-
### 0.19.0
121-
122-
- Fixes compatibility with React Native 0.27.2
123-
- Adds `contentContainerStyle` prop to style scroll container (thanks [@alaycock](https://github.com/alaycock))
124119

125-
### 0.18.1
126-
127-
- Fixes error when inspecting the sticky header due to cyclical object structure
128-
on `style` (#23)
120+
## Latest changes
129121

130-
### 0.18.0 (Compatibility with React Native 0.20.0)
122+
### 0.20.1
123+
- Added prop to change interpolated Scale Output Value
131124

132-
- **Breaking:** Removes `ParallaxScrollView#scrollWithoutAnimationTo` since this has been deprecated in React Native. If you used this method previously, use `scrollTo` instead.
133-
- Adds `ParallaxScrollView#getScrollableNode` method, which is required in React Native 0.20.0 for components implementing
134-
`ScrollView` interface.
125+
### 0.20.0 // Rodrigocs
126+
- Now uses native driver, and tested with React Native 0.46.0
127+
- Adds `useNativeDriver` to improve performance, but renderScrollComponent must be a Animated component ( ie: Animated.createAnimatedComponent(component))
135128

136129
See full changelog [here](./CHANGELOG.md).
137130

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-parallax-scroll-view",
3-
"version": "0.20.0",
3+
"version": "0.20.1",
44
"description": "A ScrollView-like component with parallax and sticky header support",
55
"main": "src/index.js",
66
"repository": {

src/index.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ const IPropTypes = {
3737
renderScrollComponent: func,
3838
renderStickyHeader: func,
3939
stickyHeaderHeight: number,
40-
contentContainerStyle: View.propTypes.style
40+
contentContainerStyle: View.propTypes.style,
41+
outputScaleValue: number
4142
}
4243

4344
class ParallaxScrollView extends Component {
@@ -86,6 +87,7 @@ class ParallaxScrollView extends Component {
8687
stickyHeaderHeight,
8788
style,
8889
contentContainerStyle,
90+
outputScaleValue,
8991
...scrollViewProps
9092
} = this.props
9193

@@ -95,7 +97,8 @@ class ParallaxScrollView extends Component {
9597
backgroundColor,
9698
parallaxHeaderHeight,
9799
stickyHeaderHeight,
98-
renderBackground
100+
renderBackground,
101+
outputScaleValue
99102
})
100103
const foreground = this._renderForeground({
101104
fadeOutForeground,
@@ -220,7 +223,8 @@ class ParallaxScrollView extends Component {
220223
backgroundColor,
221224
parallaxHeaderHeight,
222225
stickyHeaderHeight,
223-
renderBackground
226+
renderBackground,
227+
outputScaleValue
224228
}) {
225229
const { viewWidth, viewHeight } = this.state
226230
const { scrollY } = this
@@ -252,7 +256,7 @@ class ParallaxScrollView extends Component {
252256
{
253257
scale: interpolate(scrollY, {
254258
inputRange: [-viewHeight, 0],
255-
outputRange: [5, 1],
259+
outputRange: [outputScaleValue, 1],
256260
extrapolate: 'clamp'
257261
})
258262
}
@@ -413,7 +417,8 @@ ParallaxScrollView.defaultProps = {
413417
renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
414418
renderForeground: null,
415419
stickyHeaderHeight: 0,
416-
contentContainerStyle: null
420+
contentContainerStyle: null,
421+
outputScaleValue: 5
417422
}
418423

419424
module.exports = ParallaxScrollView

0 commit comments

Comments
 (0)