- Notifications
You must be signed in to change notification settings - Fork376
A ScrollView-like component with parallax and sticky header support.
License
i6mi6/react-native-parallax-scroll-view
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This component now uses Native Driver by default.Remember to pass a Animated component torenderScrollComponent, by default it hasAnimated.ScrollView
importParallaxScrollViewfrom'react-native-parallax-scroll-view';importCustomScrollViewfrom'custom-scroll-view'constAnimatedCustomScrollView=Animated.createAnimatedComponent(CustomScrollView)render(){return(<ParallaxScrollViewbackgroundColor="blue"contentBackgroundColor="pink"parallaxHeaderHeight={300}// renderScrollComponent={() => <Animated.View />}renderScrollComponent={()=><AnimatedCustomScrollView/>}renderForeground={()=>(<Viewstyle={{height:300,flex:1,alignItems:'center',justifyContent:'center'}}><Text>Hello World!</Text></View>)}><Viewstyle={{height:500}}><Text>Scroll me</Text></View></ParallaxScrollView>);}
AScrollView-like component that:
- Has a parallax header
- Has an optional sticky header
- Is composable with any component that expects a
ScrollView(e.g.ListVieworInfiniteScrollView) - Can be nested within other views
- Works on iOS and Android
$ npm install react-native-parallax-scroll-view --saveNote: For React Native 0.19.0 and earlier, you'll want to usereact-native-parallax-scroll-view@0.17.4. Version0.18.0 changes the scrolling API to be compatible with React Native 0.20.0.
| iOS | Android |
|---|---|
 |  |
importParallaxScrollViewfrom'react-native-parallax-scroll-view';// Inside of a component's render() method:render(){return(<ParallaxScrollViewbackgroundColor="blue"contentBackgroundColor="pink"parallaxHeaderHeight={300}renderForeground={()=>(<Viewstyle={{height:300,flex:1,alignItems:'center',justifyContent:'center'}}><Text>Hello World!</Text></View>)}><Viewstyle={{height:500}}><Text>Scroll me</Text></View></ParallaxScrollView>);}
Please refer to theListView example provided to see howParallaxScrollView can be used incombination withListView.
TheAndroid ListView example shows how you can usePullToRefreshViewAndroid withParallaxScrollView.
There are more examples in theexamples folder.
All of the properties ofScrollView are supported. Please refer to theScrollView documentation for more detail.
TheParallaxScrollView component adds a few additional properties, as described below.
| Property | Type | Required | Description |
|---|---|---|---|
backgroundColor | string | No | The color of the header background. Defaults to#000) |
backgroundScrollSpeed | number | No | The speed factor that the background moves at relative to the foreground. Defaults to 5. |
contentBackgroundColor | string | No | This is the background color of the content. (Defaults to'#fff') |
fadeOutForeground | bool | No | Iftrue, the foreground will fade out as the user scrolls up. (Defaults totrue) |
onChangeHeaderVisibility | func | No | A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with aboolean value to indicate whether header is visible or not. |
parallaxHeaderHeight | number | Yes | This is the height of parallax header. |
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 usingbackgroundColor) |
renderContentBackground | func | No | This renders the background of the content. Can be used to display cover images for example. (Defaults to a non-visibleView) |
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. |
renderForeground | func | No | This renders the foreground header that moves at same speed as scroll content. |
renderScrollComponent | func | No | A function with inputprops and outputs anAnimated.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) (By default, returns aAnimated.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 | IfrenderStickyHeader is used | IfrenderStickyHeader is set, then its height must be specified. |
contentContainerStyle | object | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as forScrollView) |
outputScaleValue | number | No | The value for the scale interpolation output value, default5 |
parallaxHeaderContainerStyle | object | No | These styles will be applied to the parallax header view content container |
parallaxHeaderStyle | object | No | These styles will be applied to the parallax header view content |
backgroundImageStyle | object | No | These styles will be applied to the background image header view content |
stickyHeaderStyle | object | No | These styles will be applied to the sticky headerStyle view content |
scrollEvent | func | No | Callback to recieve the animated scroll event values |
- Added prop to change interpolated Scale Output Value
- Now uses native driver, and tested with React Native 0.46.0
- Adds
useNativeDriverto improve performance, but renderScrollComponent must be a Animated component ( ie: Animated.createAnimatedComponent(component))
See full changeloghere.
I welcome contributions! Please open an issues if you have any feature ideasor find any bugs. I also accept pull requests with open arms. I willgo over the issues when I have time. :)
About
A ScrollView-like component with parallax and sticky header support.
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.