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