Gathering detailed insights and metrics for react-native-parallax-scroll-view-sadooghi
Installations
npm install react-native-parallax-scroll-view-sadooghiDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.9.1
NPM Version
5.7.1
Score
72
Supply Chain
98.4
Quality
74.7
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Love this project? Help keep it running — sponsor us today! 🚀
Download Statistics
Total Downloads
817
Last Day
1
Last Week
2
Last Month
15
Last Year
124
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
react-native-parallax-scroll-view-sadooghi@1.0.0
Unpacked Size
17.65 kB
Size
5.15 kB
File Count
4
NPM Version
5.7.1
Node Version
8.9.1
Total Downloads
Cumulative downloads
Total Downloads
817
Last Day
0%
1
Compared to previous day
Last Week
-75%
2
Compared to previous week
Last Month
25%
15
Compared to previous month
Last Year
11.7%
124
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
Info
Updated version of react-native-parallax-scroll-view I published this because the height for the page was much longer than it needed to be.
Animated Driver
This component now uses Native Driver by default.
Remember to pass a Animated component to renderScrollComponent, by default it has Animated.ScrollView
Example
1import ParallaxScrollView from 'react-native-parallax-scroll-view-sadooghi'; 2import CustomScrollView from 'custom-scroll-view' 3 4const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView) 5 6render() { 7 return ( 8 <ParallaxScrollView 9 backgroundColor="blue" 10 contentBackgroundColor="pink" 11 parallaxHeaderHeight={300} 12 // renderScrollComponent={() => <Animated.View />} 13 renderScrollComponent={() => <AnimatedCustomScrollView />} 14 renderForeground={() => ( 15 <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}> 16 <Text>Hello World!</Text> 17 </View> 18 )}> 19 <View style={{ height: 500 }}> 20 <Text>Scroll me</Text> 21 </View> 22 </ParallaxScrollView> 23 ); 24}
react-native-parallax-scroll-view-sadooghi
A ScrollView-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
Installation
$ npm install react-native-parallax-scroll-view-sadooghi --save
Demo
| iOS | Android |
|---|---|
 |  |
Basic Usage
1import ParallaxScrollView from 'react-native-parallax-scroll-view-sadooghi'; 2 3// Inside of a component's render() method: 4render() { 5 return ( 6 <ParallaxScrollView 7 backgroundColor="blue" 8 contentBackgroundColor="pink" 9 parallaxHeaderHeight={300} 10 renderForeground={() => ( 11 <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}> 12 <Text>Hello World!</Text> 13 </View> 14 )}> 15 <View style={{ height: 500 }}> 16 <Text>Scroll me</Text> 17 </View> 18 </ParallaxScrollView> 19 ); 20}
Usage (API)
All of the properties of ScrollView are supported. Please refer to the
ScrollView documentation for more detail.
The ParallaxScrollView 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) |
backgroundSpeed | 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 | If true, the foreground will fade out as the user scrolls up. (Defaults to true) |
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 a boolean 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 using backgroundColor) |
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 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) (By default, returns a Animated.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. |
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) |
outputScaleValue | number | No | The value for the scale interpolation output value, default 5 |
Latest changes
Contributing
No vulnerabilities found.
No security vulnerabilities found.