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.

Practice

1. What is the main purpose of a spring animation in React Native?

easy

A. To create a bouncy and natural movement effect

B. To instantly change a value without animation

C. To simulate a slow fade out effect

D. To repeat an animation infinitely

Solution

1. Step 1: Understand spring animation behavior

   Spring animations mimic real-world springs, causing bouncy, natural movements.

2. Step 2: Compare with other animation types

   Unlike decay or timing animations, spring animations create a bounce effect.

3. Final Answer:

   To create a bouncy and natural movement effect -> Option A

4. Quick Check:

   Spring animation = bouncy movement [OK]

Hint: Spring = bounce and natural movement [OK]

Common Mistakes:

• Confusing spring with decay animation
• Thinking spring is for instant changes
• Assuming spring repeats infinitely

2. Which of the following is the correct way to start a spring animation using React Native's Animated API?

easy

A. Animated.decay(value, {toValue: 1}).start()

B. Animated.spring(value, {duration: 1000}).run()

C. Animated.timing(value, {toValue: 1}).run()

D. Animated.spring(value, {toValue: 1}).start()

Solution

1. Step 1: Identify correct method for spring animation

   The method is Animated.spring with parameters including toValue and then .start() to begin.

2. Step 2: Check method usage and syntax

   Animated.decay is for decay animations, .run() is not a valid method, and duration is not used in spring.

3. Final Answer:

   Animated.spring(value, {toValue: 1}).start() -> Option D

4. Quick Check:

   Use Animated.spring(...).start() for spring animation [OK]

Hint: Use .start() to begin spring animation [OK]

Common Mistakes:

• Using .run() instead of .start()
• Confusing decay with spring method
• Adding duration to spring config

3. What will happen when this code runs?

const anim = new Animated.Value(0);
Animated.decay(anim, {velocity: 3, deceleration: 0.997}).start();
anim.addListener(({value}) => console.log(value));

medium

A. The value will increase quickly then slow down gradually

B. The value will jump instantly to 3 and stop

C. The value will decrease to zero immediately

D. The animation will loop forever without stopping

Solution

1. Step 1: Understand decay animation behavior

   Decay animation starts with a velocity and slows down gradually due to deceleration.

2. Step 2: Analyze given parameters

   Velocity 3 means value increases fast initially, deceleration 0.997 slows it down over time.

3. Final Answer:

   The value will increase quickly then slow down gradually -> Option A

4. Quick Check:

   Decay animation = fast start + slow stop [OK]

Hint: Decay = fast start, then slow down [OK]

Common Mistakes:

• Thinking decay jumps instantly to velocity
• Assuming decay decreases value immediately
• Believing decay loops infinitely

4. Identify the error in this spring animation code:

const anim = new Animated.Value(0);
Animated.spring(anim, {toValue: 1, velocity: 5}).run();

medium

A. Missing toValue property in spring config

B. Using .run() instead of .start() to begin animation

C. Velocity is not a valid spring config property

D. Animated.Value should be initialized with 1

Solution

1. Step 1: Check method to start animation

   Animated animations use .start() to begin, not .run().

2. Step 2: Verify spring config properties

   toValue and velocity are valid properties; initial value 0 is fine.

3. Final Answer:

   Using .run() instead of .start() to begin animation -> Option B

4. Quick Check:

   Use .start() to run animations [OK]

Hint: Animations start with .start(), not .run() [OK]

Common Mistakes:

• Using .run() instead of .start()
• Removing toValue from config
• Initializing Animated.Value incorrectly

5. You want to create a button that moves right with a spring animation and then slows to stop with a decay animation when released. Which sequence of code correctly achieves this behavior?

hard

A. Animated.spring(anim, {toValue: 100, velocity: 2}).start()

B. Animated.decay(anim, {velocity: 2}).start(() => Animated.spring(anim, {toValue: 100}).start())

C. Animated.spring(anim, {toValue: 100}).start(() => Animated.decay(anim, {velocity: 2}).start())

D. Animated.timing(anim, {toValue: 100, duration: 500}).start(() => Animated.decay(anim, {velocity: 2}).start())

Solution

1. Step 1: Understand desired animation sequence

   First move right with spring (bouncy), then slow down with decay on release.

2. Step 2: Analyze options for correct order and methods

   Animated.spring(anim, {toValue: 100}).start(() => Animated.decay(anim, {velocity: 2}).start()) runs spring first, then decay in callback, matching desired sequence.

3. Step 3: Check other options

   Animated.spring(anim, {toValue: 100, velocity: 2}).start() performs only spring without decay. Animated.decay(anim, {velocity: 2}).start(() => Animated.spring(anim, {toValue: 100}).start()) (Animated.decay(anim, {velocity: 2}).start(() => Animated.spring(anim, {toValue: 100}).start())) reverses order. Animated.timing(anim, {toValue: 100, duration: 500}).start(() => Animated.decay(anim, {velocity: 2}).start()) uses timing instead of spring.

4. Final Answer:

   Animated.spring(anim, {toValue: 100}).start(() => Animated.decay(anim, {velocity: 2}).start()) -> Option C

5. Quick Check:

   Spring then decay = move then slow [OK]

Hint: Run spring first, then decay in callback [OK]

Common Mistakes:

• Running decay before spring
• Performing only spring without decay
• Using timing instead of spring for bounce