Spring and decay animations in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible effect of this spring animation code?

Consider this React Native code snippet using the Animated API with a spring animation. What will the user see on the screen?

React Native

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

Animated.spring(position, {
  toValue: 100,
  useNativeDriver: true
}).start();

return <Animated.View style={{transform: [{translateY: position}]}} />;

A The view moves up 100 pixels with a spring effect.

B The view instantly jumps down 100 pixels without animation.

C The view moves down 100 pixels but stops abruptly without bouncing.

D The view smoothly moves down 100 pixels with a bouncing effect.

💡 Hint

Spring animations create smooth movement with natural bounce.

The spring animation moves the view to 100 pixels down with a natural bounce effect because of the spring physics.

❓ lifecycle

intermediate

When does the decay animation stop automatically?

In React Native, using Animated.decay with a velocity, when will the animation stop by itself?

React Native

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

Animated.decay(position, {
  velocity: 1,
  deceleration: 0.997,
  useNativeDriver: true
}).start();

A When the velocity slows down to near zero due to deceleration.

B Only when the user manually stops the animation.

C After a fixed time of 1 second regardless of velocity.

D It never stops and loops infinitely.

💡 Hint

Decay animations simulate friction slowing down movement.

Decay animations reduce velocity gradually by deceleration until velocity is near zero, then stop automatically.

📝 Syntax

advanced

Which option correctly uses spring animation with custom tension and friction?

Choose the code snippet that correctly applies a spring animation with tension 40 and friction 7 in React Native.

A Animated.spring(position, {toValue: 200, stiffness: 40, damping: 7, useNativeDriver: true}).start();

B Animated.spring(position, {toValue: 200, tension: 40, friction: 7, useNativeDriver: true}).start();

C Animated.spring(position, {toValue: 200, tension: 40, friction: 7}).start();

D Animated.spring(position, {toValue: 200, stiffness: 40, damping: 7}).start();

💡 Hint

Core Animated.spring uses tension and friction properties. useNativeDriver: true is recommended for performance.

React Native's Animated.spring uses tension and friction for spring config (stiffness/damping are for Reanimated). Option B is correct with useNativeDriver: true.

🔧 Debug

advanced

Why does this decay animation never stop?

This code runs a decay animation but the view keeps moving forever. What is the cause?

React Native

Animated.decay(position, {
  velocity: 1,
  deceleration: 1,
  useNativeDriver: true
}).start();

A useNativeDriver must be false for decay to stop.

B Velocity is too high causing infinite movement.

C Deceleration is set to 1, so velocity never decreases and animation never stops.

D Missing toValue causes animation to loop.

💡 Hint

Deceleration controls how fast velocity slows down.

A deceleration of 1 means no slowing down, so velocity stays constant and animation never ends.

🧠 Conceptual

expert

How do spring and decay animations differ in user experience?

Which statement best describes the difference in user experience between spring and decay animations in mobile apps?

A Spring animations simulate elastic movement with bounce; decay animations simulate gradual slowing to stop.

B Spring animations move at constant speed; decay animations jump instantly to the end.

C Spring animations only move horizontally; decay animations only move vertically.

D Spring animations require manual stop; decay animations loop infinitely.

💡 Hint

Think about natural physics effects each animation mimics.

Spring animations mimic elastic forces causing bounce; decay animations mimic friction slowing movement gradually.