|
1 | 1 | [](https://www.npmjs.com/package/react-native-parallax-scroll-view) |
2 | 2 |
|
| 3 | +# Rodrigocs - Animated Driver |
| 4 | + |
| 5 | +This component now uses Native Driver by default. |
| 6 | +Remember to pass a Animated component to `renderScrollComponent`, by default it has `Animated.ScrollView` |
| 7 | + |
| 8 | +# Example |
| 9 | +```js |
| 10 | +import ParallaxScrollView from 'react-native-parallax-scroll-view'; |
| 11 | +import CustomScrollView from 'custom-scroll-view' |
| 12 | + |
| 13 | +const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView) |
| 14 | + |
| 15 | +render() { |
| 16 | + return ( |
| 17 | + <ParallaxScrollView |
| 18 | + backgroundColor="blue" |
| 19 | + contentBackgroundColor="pink" |
| 20 | + parallaxHeaderHeight={300} |
| 21 | + // renderScrollComponent={() => <Animated.View />} |
| 22 | + renderScrollComponent={() => <AnimatedCustomScrollView />} |
| 23 | + renderForeground={() => ( |
| 24 | + <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}> |
| 25 | + <Text>Hello World!</Text> |
| 26 | + </View> |
| 27 | + )}> |
| 28 | + <View style={{ height: 500 }}> |
| 29 | + <Text>Scroll me</Text> |
| 30 | + </View> |
| 31 | + </ParallaxScrollView> |
| 32 | + ); |
| 33 | +} |
| 34 | +``` |
| 35 | + |
3 | 36 | # react-native-parallax-scroll-view |
4 | 37 |
|
5 | 38 | A `ScrollView`-like component that: |
@@ -77,29 +110,22 @@ The `ParallaxScrollView` component adds a few additional properties, as describe |
77 | 110 | | `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 `backgroundColor`) | |
78 | 111 | | `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 should set its height and width appropriately. | |
79 | 112 | | `renderForeground` | `func` | No |This renders the foreground header that moves at same speed as scroll content. | |
80 | | -| `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) | |
| 113 | +| `renderScrollComponent` | `func` | No | A function with input `props` and outputs an `Animated.ScrollView`-like component in which the content is rendered. This is useful if you want to provide your own scrollable component, remember however to make it an Animated component. (See: [https://github.com/exponentjs/react-native-scrollable-mixin](https://github.com/exponentjs/react-native-scrollable-mixin)) (By default, returns a `Animated.ScrollView` with the given props) | |
81 | 114 | | `renderStickyHeader` | `func` | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. | |
82 | 115 | | `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | If `renderStickyHeader` is set, then its height must be specified. | |
83 | 116 | | `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` | |
84 | 118 |
|
85 | | -## Latest changes |
86 | 119 |
|
87 | | -### 0.19.0 |
88 | | - |
89 | | -- Fixes compatibility with React Native 0.27.2 |
90 | | -- Adds `contentContainerStyle` prop to style scroll container (thanks [@alaycock](https://github.com/alaycock)) |
91 | | - |
92 | | -### 0.18.1 |
| 120 | +## Latest changes |
93 | 121 |
|
94 | | -- Fixes error when inspecting the sticky header due to cyclical object structure |
95 | | - on `style` (#23) |
| 122 | +### 0.20.1 |
| 123 | +- Added prop to change interpolated Scale Output Value |
96 | 124 |
|
97 | | -### 0.18.0 (Compatibility with React Native 0.20.0) |
| 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)) |
98 | 128 |
|
99 | | -- **Breaking:** Removes `ParallaxScrollView#scrollWithoutAnimationTo` since this has been deprecated in React Native. If you used this method previously, use `scrollTo` instead. |
100 | | -- Adds `ParallaxScrollView#getScrollableNode` method, which is required in React Native 0.20.0 for components implementing |
101 | | - `ScrollView` interface. |
102 | | - |
103 | 129 | See full changelog [here](./CHANGELOG.md). |
104 | 130 |
|
105 | 131 | ## Contributing |
|
0 commit comments