Parallax effects for React Native using Animated API
Our friend Joel Arvidsson (as in we like him for his work very much) keeps being prolific and sharing his work for us to take advantage of it.
Check his new Parallax component:
react-native-parallax on GitHub (Example)
NOTE: This module requires React Native 0.8+
var Parallax = require('react-native-parallax');
var ParallaxView = React.createClass({
mixins: [Parallax.Mixin],
render: function() {
return (
<ScrollView
scrollEventThrottle={16}
onScroll={this.onParallaxScroll}
>
<Parallax.Image
style={{ height: 200 }}
scrollY={this.state.parallaxScrollY}
overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
source={{ uri: 'http://loremflickr.com/640/480' }}
>
<Text>This is optional overlay content</Text>
</Parallax.Image>
</ScrollView>
);
},