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

`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: 'ｏ（Ｕ・ω・）⊃',
image: 'http://loremflickr.com/640/480/dog',
}];

render() {
return (
data={data}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (

style={[StyleSheet.absoluteFill]}
source={{ uri: item.image }}
parallaxFactor={0.2}
/>
fontSize: 20,
textAlign: 'center',
lineHeight: 25,
fontWeight: 'bold',
color: 'white',
}}>{item.title}

)}
/>
);
}
}
`

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

!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