NOTE: This module requires React Native 0.8+
npm install --save react-native-parallax
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>
);
},
});Any ScrollView property and the following:
| Prop | Description | Default |
|---|---|---|
scrollViewComponent |
What underlying component to compose around, must be ScrollView compatible. |
ScrollView |
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 |
Check full example in the Example folder.
MIT License. © Joel Arvidsson