Parallax scrolling in React Native

Introduction

Parallax scrolling makes your app look cool by moving background and foreground at different speeds. It adds depth and feels like layers are sliding over each other.

When you want to create a fun and engaging scrolling effect in a list or page.

To highlight a big image behind text that moves slower than the text.

When building a profile or product page with a fancy header image.

To make your app feel more alive and interactive with smooth animations.

Syntax

React Native

import React, { useRef } from 'react';
import { Animated, ScrollView, View, Text, Image, StyleSheet } from 'react-native';

const ParallaxExample = () => {
  const scrollY = useRef(new Animated.Value(0)).current;

  return (
    <Animated.ScrollView
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        { useNativeDriver: true }
      )}
      scrollEventThrottle={16}
    >
      <Animated.Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={[styles.image, {
          transform: [{ translateY: scrollY.interpolate({
            inputRange: [0, 200],
            outputRange: [0, -100],
            extrapolate: 'clamp'
          }) }]
        }]}
      />
      <View style={styles.content}>
        <Text style={styles.text}>Your content here</Text>
      </View>
    </Animated.ScrollView>
  );
};

const styles = StyleSheet.create({
  image: {
    height: 200,
    width: '100%',
    position: 'absolute',
    top: 0,
    left: 0
  },
  content: {
    marginTop: 200,
    padding: 20
  },
  text: {
    fontSize: 18
  }
});

export default ParallaxExample;

Use Animated.Value to track scroll position.

Use interpolate to move background slower than scroll.

Examples

This sets up the scroll listener to update scrollY as you scroll.

React Native

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

<Animated.ScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    { useNativeDriver: true }
  )}
  scrollEventThrottle={16}
>

This moves the image up slower than the scroll, creating the parallax effect.

React Native

<Animated.Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{
    transform: [{ translateY: scrollY.interpolate({
      inputRange: [0, 200],
      outputRange: [0, -100],
      extrapolate: 'clamp'
    }) }]
  }}
/>

Sample App

This example shows a small image at the top that moves slower than the text below when you scroll. The text scrolls normally, but the image slides up gently, creating a nice parallax effect.

React Native

import React, { useRef } from 'react';
import { Animated, ScrollView, View, Text, Image, StyleSheet } from 'react-native';

const ParallaxExample = () => {
  const scrollY = useRef(new Animated.Value(0)).current;

  return (
    <Animated.ScrollView
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: scrollY } } }],
        { useNativeDriver: true }
      )}
      scrollEventThrottle={16}
    >
      <Animated.Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={[styles.image, {
          transform: [{ translateY: scrollY.interpolate({
            inputRange: [0, 150],
            outputRange: [0, -75],
            extrapolate: 'clamp'
          }) }]
        }]}
        accessibilityLabel="Parallax background image"
      />
      <View style={styles.content}>
        <Text style={styles.text}>Scroll down to see the parallax effect!</Text>
        <Text style={styles.text}>This text scrolls normally.</Text>
        <Text style={styles.text}>The image behind moves slower.</Text>
        <Text style={styles.text}>Try scrolling up and down.</Text>
      </View>
    </Animated.ScrollView>
  );
};

const styles = StyleSheet.create({
  image: {
    height: 150,
    width: '100%',
    position: 'absolute',
    top: 0,
    left: 0
  },
  content: {
    marginTop: 150,
    padding: 20
  },
  text: {
    fontSize: 16,
    marginBottom: 20
  }
});

export default ParallaxExample;

Important Notes

Always use useNativeDriver: true for smooth animations.

Set scrollEventThrottle to 16 for 60fps updates.

Use accessibility labels on images for screen readers.

Summary

Parallax scrolling moves background images slower than foreground content.

Use Animated.Value and interpolate to create the effect.

This effect makes your app feel more dynamic and fun to use.