Parallax effects for images in a React Native FlatList
npm install react-native-parallax-flatlistA drop in replacement for FlatList that allows for a Parallax effect on images (by using the ParallaxImage component included).
```
npm install --save react-native-parallax-flatlist
`js
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: 'o(U・ω・)⊃',
image: 'http://loremflickr.com/640/480/dog',
}];
render() {
return (
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
source={{ uri: item.image }}
parallaxFactor={0.2}
/>
textAlign: 'center',
lineHeight: 25,
fontWeight: 'bold',
color: 'white',
}}>{item.title}
)}
/>
);
}
}
`
PropertiesAny FlatList property.
PropertiesAny 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
Check full example in the Example` folder.
Inspiration taken from react-native-parallax and react-native-snap-carousel
MIT License. © David Sullivan