Parallax scrolling in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible effect of this parallax scroll code?

Consider a React Native ScrollView with an Animated.Image that moves slower than the scroll content. What visual effect will the user see when scrolling?

React Native

import React from 'react';
import { Animated, ScrollView, View, Text, Dimensions } from 'react-native';
const { height } = Dimensions.get('window');
export default function ParallaxExample() {
  const scrollY = React.useRef(new Animated.Value(0)).current;
  const translateY = scrollY.interpolate({
    inputRange: [0, height],
    outputRange: [0, -height / 2],
    extrapolate: 'clamp',
  });
  return (
    <View style={{ flex: 1 }}>
      <Animated.Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={{ height: height / 2, width: '100%', transform: [{ translateY }] }}
        accessibilityLabel="Background parallax image"
      />
      <ScrollView
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true }
        )}
        scrollEventThrottle={16}
        style={{ flex: 1, marginTop: height / 2 }}
      >
        <Text style={{ fontSize: 24, padding: 20 }}>Scroll Content</Text>
        <View style={{ height: 1000 }} />
      </ScrollView>
    </View>
  );
}

A The background image moves slower than the scroll content, creating a depth effect.

B The background image moves faster than the scroll content, making it appear in front.

C The background image stays fixed and does not move during scrolling.

D The background image disappears when scrolling starts.

💡 Hint

Think about how the translateY value changes relative to scrollY.

The image's translateY moves at half the speed of the scroll, so it lags behind the content, creating a parallax depth effect.

❓ lifecycle

intermediate

When does the Animated.event listener update the parallax effect?

In React Native, when using Animated.event with useNativeDriver:true on ScrollView's onScroll, when is the scrollY Animated.Value updated?

A Continuously during scrolling, on every frame, without blocking the JS thread.

B Only once when scrolling starts, then stops updating.

C After scrolling ends, in a batch update.

D Only when the user lifts their finger from the screen.

💡 Hint

Consider what useNativeDriver:true does to animation updates.

With useNativeDriver:true, the animation updates run on the native UI thread continuously during scrolling, ensuring smooth parallax effect.

🔧 Debug

advanced

Why does this parallax image flicker or jump during scroll?

Given this code snippet, the parallax image flickers or jumps unexpectedly during scroll. const translateY = scrollY.interpolate({ inputRange: [0, height], outputRange: [0, -height / 2], extrapolate: 'extend', });

React Native

const translateY = scrollY.interpolate({
  inputRange: [0, height],
  outputRange: [0, -height / 2],
  extrapolate: 'extend',
});

A The inputRange values are reversed and should be [height, 0].

B Using 'extrapolate: extend' causes values outside inputRange to produce unexpected jumps.

C The outputRange values must be positive numbers for translateY.

D The scrollY Animated.Value is not initialized properly.

💡 Hint

Check how extrapolate affects values outside the input range.

'extrapolate: extend' allows values beyond inputRange, which can cause sudden jumps if scrollY goes beyond expected range. 'clamp' prevents this by limiting output values.

❓ navigation

advanced

How to preserve parallax scroll position when navigating back?

In a React Native app with parallax scrolling on a screen, how can you preserve the scroll position and parallax effect when navigating back to that screen?

A Reset scrollY to zero on every screen mount to avoid glitches.

B Disable parallax effect when navigating back to improve performance.

C Store scrollY value in a state or context and restore it on screen focus.

D Use a static image instead of Animated.Image to avoid scroll position issues.

💡 Hint

Think about how to keep scroll position across navigation events.

Saving scrollY in a shared state or context and restoring it on screen focus keeps the scroll and parallax consistent when returning.

🧠 Conceptual

expert

Why is useNativeDriver recommended for parallax animations?

Why should you use useNativeDriver:true in Animated.event for parallax scrolling animations in React Native?

A It disables user interaction during animations to prevent glitches.

B It enables animations to run only when the app is in the foreground.

C It automatically caches images used in parallax backgrounds.

D It offloads animation calculations to native UI thread, making animations smoother and less janky.

💡 Hint

Consider performance and thread usage in React Native animations.

useNativeDriver:true runs animations on the native UI thread, avoiding JS thread bottlenecks and improving smoothness of parallax effects.

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