React Native Parallax Flatlist

React Native Parallax Flatlist 100% working example and step by step guide

You can create animations with bare react native.
yes, do not need to use any other additional library. here is the code sample, and take a look at this animation video for final result.

import { StatusBar } from 'expo-status-bar';
import React, { useRef } from 'react';
import { Animated, Dimensions, View } from 'react-native';

const { width } = Dimensions.get('screen');
const itemWidth = width * 0.75;
const itemHeight = itemWidth * 1.5;

const images = [
  "https://images.unsplash.com/photo-1631414833461-c4a0e70afe54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMTk0MzE0Mw&ixlib=rb-1.2.1&q=80&w=1080",
  "https://images.unsplash.com/photo-1629754004665-b817cf69d651?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMTk0MzE5NA&ixlib=rb-1.2.1&q=80&w=1080",
  "https://images.unsplash.com/photo-1631295114060-09a224f99ded?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMTk0MzI0Mw&ixlib=rb-1.2.1&q=80&w=1080",
  "https://images.unsplash.com/photo-1631119462970-45919be464ee?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMTk0MzI3Ng&ixlib=rb-1.2.1&q=80&w=1080",
  "https://images.unsplash.com/photo-1629294517330-3d646313a32d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMTk0MzI2NA&ixlib=rb-1.2.1&q=80&w=1080"
]

const App = () => {

  const scrollAnime = useRef(new Animated.Value(0)).current;

  const renderItem = (item, index) => {
    const inputRange = [
      (index - 1) * width,
      (index) * width,
      (index + 1) * width,
    ]
    const translateAnime = scrollAnime.interpolate({
      inputRange,
      outputRange: [
        -width * .7,
        0,
        width * .7
      ]
    })
    return (
      <View style={{ width, justifyContent: 'center', alignItems: 'center' }} key={index.toString()}>
        <View style={{
          shadowColor: '#000',
          shadowOpacity: 1,
          shadowOffset: { width: 0, height: 0 },
          elevation: 16,
          shadowRadius: 14,
          padding: 6,
          backgroundColor: '#fff',
          borderRadius: 16
        }}>
          <View style={{
            width: itemWidth,
            height: itemHeight,
            overflow: 'hidden',
            alignItems: 'center',
            borderRadius: 12
          }}>
            <Animated.Image
              source={{ uri: item }}
              style={{
                width: itemWidth * 1.5,
                height: itemHeight,
                resizeMode: 'cover',
                transform: [
                  { translateX: translateAnime }
                ]
              }}
            />
          </View>
        </View>
      </View>
    )
  }

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <Animated.FlatList
        data={images}
        renderItem={({ item, index }) => { return renderItem(item, index) }}
        horizontal
        pagingEnabled
        keyExtractor={(item, index) => { index.toString() }}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: scrollAnime } } }],
          { useNativeDriver: true }
        )} />
    </View>
  );
}


export default App