Parallax Scroll Effect in React Native with Reanimated

#reactnative #android #ios #parallax

Introduction

Parallax scrolling is a popular animation technique that creates an illusion of depth by making background images move slower than foreground images. In this tutorial, we will build a beautiful Parallax Scroll Effect in React Native using react-native-reanimated. This effect is great for enhancing the user experience, especially in image carousels, onboarding screens, or feature showcases.

import {Dimensions, StyleSheet, View} from 'react-native';
import React from 'react';
import {metaData} from '../../screens/CarouselBackgroundAnimation/data';
import Animated, {
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const {width} = Dimensions.get('screen');

const _imageWidth = width * 0.7;
const _imageHeight = _imageWidth * 1.76;
const _spacing = 12;

const ParallaxView = () => {
  const scrollX = useSharedValue(0);
  const onScroll = useAnimatedScrollHandler(e => {
    scrollX.value = e.contentOffset.x / (_imageWidth + _spacing);
  });
  return (
    <View style={styles.container}>
      <Animated.FlatList
        data={metaData}
        renderItem={({item, index}) => (
          <Photo item={item} index={index} scrollX={scrollX} />
        )}
        horizontal
        style={{flexGrow: 0}}
        pagingEnabled
        snapToInterval={_imageWidth + _spacing}
        decelerationRate={'fast'}
        contentContainerStyle={{
          gap: _spacing,
          paddingHorizontal: (width - _imageWidth) / 2,
        }}
        showsHorizontalScrollIndicator={false}
        onScroll={onScroll}
        scrollEventThrottle={1000 / 60}
      />
    </View>
  );
};

export default ParallaxView;

const Photo = ({item, index, scrollX}) => {
  const styleZ = useAnimatedStyle(() => {
    return {
      transform: [
        {
          scale: interpolate(
            scrollX.value,
            [index - 1, index, index + 1],
            [1.4, 1, 1.4],
          ),
        },
        {
          rotate: `${interpolate(
            scrollX.value,
            [index - 1, index, index + 1],
            [5, 0, 5],
          )}deg`,
        },
      ],
    };
  });
  return (
    <View
      style={{
        width: _imageWidth,
        height: _imageHeight,
        overflow: 'hidden',
        borderRadius: 16,
      }}>
      <Animated.Image source={{uri: item}} style={[{flex: 1}, styleZ]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Conclusion

In this tutorial, we built a Parallax Scroll Effect in React Native using react-native-reanimated. This technique enhances the visual appeal of image carousels, making the user experience more immersive.

Key Takeaways:

Used useSharedValue to track the scroll position.
Created an animated transformation using interpolate.
Applied smooth scaling and rotation effects.

This is just the beginning! You can further customize this effect by adding more animations like opacity changes, blur effects, or background parallax layers.

Happy coding! 🚀