Parallax effects for React Native using Animated API
npm install react-native-parallaxNOTE: This module requires React Native 0.8+
```
npm install --save react-native-parallax
Note: Parallax.Image elements must be direct descendants of Parallax.ScrollView
`js
var Parallax = require('react-native-parallax');
var ParallaxView = React.createClass({
render: function() {
return (
overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
source={{ uri: 'http://loremflickr.com/640/480' }}
>
);
},
});
`
PropertiesAny ScrollView property and the following:
| Prop | Description | Default |
|---|---|---|
|scrollViewComponent|What underlying component to compose around, must be ScrollView compatible. |ScrollView|
PropertiesAny 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
Check full example in the Example` folder.
MIT License. © Joel Arvidsson