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.