React-native-parallax-flatlist NPM

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>
        )}
      />
    );
  }
}