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.

Practice

1. What is the main idea behind parallax scrolling in mobile apps?

easy

A. Scrolling is disabled to keep the background fixed.

B. All elements move at the same speed to keep the screen static.

C. Background images move slower than the foreground content to create depth.

D. Foreground images move slower than the background to focus attention.

Solution

1. Step 1: Understand parallax scrolling concept

   Parallax scrolling means background moves slower than foreground to create a 3D effect.

2. Step 2: Match the description to options

   Background images move slower than the foreground content to create depth correctly describes this effect, others do not.

3. Final Answer:

   Background images move slower than the foreground content to create depth. -> Option C

4. Quick Check:

   Parallax = background slower than foreground [OK]

Hint: Remember: background moves slower to create depth [OK]

Common Mistakes:

• Confusing which layer moves slower
• Thinking all layers move equally
• Assuming scrolling is disabled

2. Which React Native code snippet correctly creates an animated value for parallax scrolling?

easy

A. const scrollY = new Animated.Value(0);

B. const scrollY = Animated.createValue(0);

C. const scrollY = Animated.Value();

D. const scrollY = Animated.Value(0);

Solution

1. Step 1: Recall Animated.Value syntax

   The correct way to create an animated value is using new Animated.Value(initialValue).

2. Step 2: Check each option

   const scrollY = new Animated.Value(0); uses correct syntax. Options A, B, and D have syntax errors or missing arguments.

3. Final Answer:

   const scrollY = new Animated.Value(0); -> Option A

4. Quick Check:

   Animated.Value needs 'new' and initial value [OK]

Hint: Use 'new Animated.Value(0)' to start animation value [OK]

Common Mistakes:

• Omitting 'new' keyword
• Not passing initial value
• Using wrong method names

3. Given this code snippet, what will be the output behavior of the background image?

const scrollY = new Animated.Value(0);
const translateY = scrollY.interpolate({
  inputRange: [0, 100],
  outputRange: [0, -50],
  extrapolate: 'clamp'
});

// Used in style: { transform: [{ translateY }] }

medium

A. Background moves up the same distance as scroll.

B. Background moves down as user scrolls down.

C. Background stays fixed and does not move.

D. Background moves up half the scroll distance when scrolling down.

Solution

1. Step 1: Understand interpolation mapping

   Input scroll from 0 to 100 maps to translateY from 0 to -50, so background moves up half the scroll.

2. Step 2: Interpret transform effect

   Negative translateY moves background up, but only half the scroll distance, creating parallax.

3. Final Answer:

   Background moves up half the scroll distance when scrolling down. -> Option D

4. Quick Check:

   Interpolate outputRange controls movement amount [OK]

Hint: Check outputRange values to see movement scale [OK]

Common Mistakes:

• Confusing positive/negative translateY direction
• Assuming background moves same as scroll
• Ignoring 'clamp' effect

4. Identify the error in this React Native parallax code snippet:

const scrollY = new Animated.Value(0);
const translateY = scrollY.interpolate({
  inputRange: [0, 100],
  outputRange: [0, 50],
  extrapolate: 'extend'
});

// Used in style: { transform: [{ translateY }] }

medium

A. Missing 'new' keyword when creating Animated.Value.

B. Using 'extrapolate: extend' can cause unwanted movement beyond input range.

C. Output range values should be negative to move background up.

D. Input range array must have three values.

Solution

1. Step 1: Check extrapolate property effect

   'extend' allows output to go beyond outputRange if input exceeds inputRange, causing unwanted movement.

2. Step 2: Verify other code parts

   Animated.Value uses 'new' correctly, outputRange can be positive, inputRange can have two values.

3. Final Answer:

   Using 'extrapolate: extend' can cause unwanted movement beyond input range. -> Option B

4. Quick Check:

   Use 'clamp' to restrict movement within range [OK]

Hint: Use 'clamp' to prevent movement beyond limits [OK]

Common Mistakes:

• Confusing 'extend' with 'clamp'
• Assuming outputRange must be negative
• Thinking inputRange needs 3 values

5. You want to create a parallax effect where the background image moves slower vertically and also fades out as the user scrolls down. Which approach correctly combines these effects in React Native?

hard

A. Use one Animated.Value for scrollY, interpolate translateY for slower movement, and interpolate opacity from 1 to 0.

B. Use two separate Animated.Values for scroll position and opacity, updating both independently.

C. Animate translateY only; opacity cannot be animated with parallax.

D. Use scrollY Animated.Value but set opacity directly without interpolation.

Solution

1. Step 1: Combine animations using one Animated.Value

   Using one scrollY Animated.Value allows interpolating multiple properties like translateY and opacity smoothly.

2. Step 2: Interpolate translateY for slower movement and opacity for fade

   TranslateY outputRange uses smaller values for slower movement; opacity interpolates from 1 to 0 as scroll increases.

3. Step 3: Avoid separate Animated.Values or direct opacity setting

   Separate values complicate sync; direct opacity without interpolation won't animate smoothly.

4. Final Answer:

   Use one Animated.Value for scrollY, interpolate translateY for slower movement, and interpolate opacity from 1 to 0. -> Option A

5. Quick Check:

   One Animated.Value + multiple interpolations = smooth combined effect [OK]

Hint: Use one Animated.Value with multiple interpolations for combined effects [OK]

Common Mistakes:

• Using multiple Animated.Values causing unsynced animations
• Not interpolating opacity, so fade is abrupt
• Trying to animate opacity without Animated API