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
