Parallax scrolling in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a scrollable view with parallax effect using Animated.ScrollView.

React Native

import React from 'react';
import { Animated, View, Text } from 'react-native';

export default function ParallaxExample() {
  const scrollY = React.useRef(new Animated.Value(0)).current;

  return (
    <Animated.ScrollView
      onScroll={Animated.event([
        { nativeEvent: { contentOffset: { y: [1] } } }
      ], { useNativeDriver: true })}
      scrollEventThrottle={16}
    >
      <View style={{ height: 300, backgroundColor: 'skyblue' }}>
        <Text>Parallax Header</Text>
      </View>
    </Animated.ScrollView>
  );
}

Drag options to blanks, or click blank then click option'

Ay

BcontentOffset

CscrollY

DscrollEventThrottle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'y' or 'contentOffset' directly instead of the Animated.Value.

Not using useNativeDriver: true for better performance.

The Animated.event needs to update the Animated.Value 'scrollY' to track the vertical scroll position for the parallax effect.

2fill in blank

medium

Complete the code to interpolate the header height based on scrollY for the parallax effect.

React Native

const headerHeight = scrollY.interpolate({
  inputRange: [0, 200],
  outputRange: [300, [1]],
  extrapolate: 'clamp',
});

Drag options to blanks, or click blank then click option'

A100

B0

C400

D300

Attempts:

3 left

💡 Hint

Common Mistakes

Setting outputRange second value equal or larger than the first, which prevents shrinking.

Using zero which collapses the header completely.

The header height shrinks from 300 to 100 pixels as the user scrolls down 200 pixels.

3fill in blank

hard

Fix the error in the Animated.View style to apply the interpolated height for the parallax header.

React Native

<Animated.View style={{ height: [1] }}>
  <Text>Parallax Header</Text>
</Animated.View>

Drag options to blanks, or click blank then click option'

AheaderHeight

BheaderHeight()

CscrollY

DheaderHeight.value

Attempts:

3 left

💡 Hint

Common Mistakes

Calling headerHeight as a function like headerHeight().

Trying to access a '.value' property which does not exist.

The interpolated value 'headerHeight' is an Animated.Value and should be used directly without calling it as a function.

4fill in blank

hard

Fill both blanks to create a parallax image that moves slower than the scroll.

React Native

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

Drag options to blanks, or click blank then click option'

A300

B150

C-300

D-150

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive values which move the image down with scroll.

Using full scroll distance which moves the image too fast.

To create a parallax effect, the image moves up slower than the scroll, so translateY outputRange is negative and half the scroll distance.

5fill in blank

hard

Fill all three blanks to create a parallax background that scales and fades on scroll.

React Native

<Animated.View style={{
  transform: [{ scale: scrollY.interpolate({
    inputRange: [0, 200],
    outputRange: [1, [1]],
    extrapolate: 'clamp',
  }) }],
  opacity: scrollY.interpolate({
    inputRange: [0, 200],
    outputRange: [1, [2]],
    extrapolate: 'clamp',
  }),
  height: [3],
}} />

Drag options to blanks, or click blank then click option'

A1.5

B0

C300

D0.5

Attempts:

3 left

💡 Hint

Common Mistakes

Setting opacity to 0 which makes the background invisible.

Using scale less than 1 which shrinks the background.

Changing height dynamically which can cause layout jumps.

The background scales up to 1.5 times and fades to 0.5 opacity while keeping height fixed at 300 for a smooth parallax effect.