react-native-parallax-flatlist
A drop in replacement for FlatList that allows for a Parallax effect on images (by using the ParallaxImage component included).
Installation
npm install --save react-native-parallax-flatlist Usage
import FlatList, { ParallaxImage } from './react-native-parallax-flatlist'; export default class ParallaxView extends Component { const data = [ { title: '(=^ ◡ ^=)', image: 'http://loremflickr.com/640/480/cat', }, { title: 'ｏ（Ｕ・ω・）⊃', image: 'http://loremflickr.com/640/480/dog', }]; render() { return ( <FlatList data={data} keyExtractor={(item, index) => index} renderItem={({ item }) => ( <View style={{height: 200}}> <ParallaxImage style={[StyleSheet.absoluteFill]} source={{ uri: item.image }} parallaxFactor={0.2} /> <Text style={{ fontSize: 20, textAlign: 'center', lineHeight: 25, fontWeight: 'bold', color: 'white', }}>{item.title}</Text> </View> )} /> ); } }FlatList Properties
Any FlatList property.
ParallaxImage Properties
Any Image property and the following:
| Prop | Description | Default |
|---|---|---|
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.
Credits
Inspiration taken from react-native-parallax and react-native-snap-carousel
License
MIT License. © David Sullivan
