Gathering detailed insights and metrics for react-native-parallax-scroll-view-sadooghi
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
Releases
Unable to fetch releases
Download Statistics
Total Downloads
854
Last Day
1
Last Week
1
Last Month
12
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
854
Last Day
0%
1
Compared to previous day
Last Week
-50%
1
Compared to previous week
Last Month
100%
12
Compared to previous month
Last Year
-2.4%
124
Compared to previous year
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.