react-native-parallax
NOTE: This module requires React Native 0.8+
Installation
npm install --save react-native-parallax
Usage
Note: Parallax.Image
elements must be direct descendants of Parallax.ScrollView
var Parallax = require('react-native-parallax');
var ParallaxView = React.createClass({
render: function() {
return (
<Parallax.ScrollView>
<Parallax.Image
style={{ height: 200 }}
overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
source={{ uri: 'http://loremflickr.com/640/480' }}
>
<Text>This is optional overlay content</Text>
</Parallax.Image>
</Parallax.ScrollView>
);
},
});
Parallax.ScrollView
Properties
Any ScrollView
property and the following:
Prop | Description | Default |
---|---|---|
scrollViewComponent |
What underlying component to compose around, must be ScrollView compatible. |
ScrollView |
Parallax.Image
Properties
Any Image
property and the following:
Prop | Description | Default |
---|---|---|
onPress |
Fired when element is tapped. | None |
imageStyle |
Optional image style, width and height styles are set automatically. |
None |
overlayStyle |
Optional overlay style, might be useful if you want a shaded background for better readability. | None |
parallaxFactor |
The speed of the parallax effect. Larger values require taller images or they will be zoomed in. | 0.2 |
Demo
Example
Check full example in the Example
folder.
License
MIT License. © Joel Arvidsson