Interpolation in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Output of Animated Interpolation

What will be the output value of interpolatedValue when animatedValue is 0.5 in this React Native code snippet?

React Native

import { Animated } from 'react-native';
const animatedValue = new Animated.Value(0.5);
const interpolatedValue = animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
});
interpolatedValue.__getValue();

A 50

B 0.5

C 100

D undefined

💡 Hint

Interpolation maps input values to output values linearly between ranges.

The interpolate function maps 0 to 0 and 1 to 100. Since animatedValue is 0.5, the output is halfway, which is 50.

📝 Syntax

intermediate

Correct Syntax for Interpolation

Which option correctly uses interpolate to map an animated value from 0-1 to 0-200?

A animatedValue.interpolate({input: [0, 1], output: [0, 200]})

B animatedValue.interpolate(inputRange = [0, 1], outputRange = [0, 200])

C animatedValue.interpolate([0, 1], [0, 200])

D animatedValue.interpolate({inputRange: [0, 1], outputRange: [0, 200]})

💡 Hint

interpolate expects an object with inputRange and outputRange keys.

Option D uses the correct object syntax with keys inputRange and outputRange.

❓ lifecycle

advanced

Effect of Changing Input Range Dynamically

If you change the inputRange of an interpolation after the animation starts, what happens to the interpolated output?

A The interpolated output stays the same until the animation restarts.

B The interpolated output updates immediately to reflect the new inputRange.

C The app crashes with an error about inputRange change.

D The interpolation resets to default values.

💡 Hint

Interpolation config is fixed when created; changing it later does not affect current output.

Interpolation config is static after creation; changing inputRange later has no effect until re-created or animation restarted.

🔧 Debug

advanced

Why Does This Interpolation Return NaN?

Given this code, why does interpolatedValue.__getValue() return NaN?

React Native

const animatedValue = new Animated.Value(0.5);
const interpolatedValue = animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0px', '100px']
});
interpolatedValue.__getValue();

A Because inputRange values must be strings, not numbers.

B Because outputRange values are strings with units, causing NaN on numeric getValue().

C Because animatedValue must be an integer, not 0.5.

D Because interpolate requires outputRange to be numbers only.

💡 Hint

getValue() returns a number; outputRange strings with units cause conversion failure.

Using strings with units in outputRange causes getValue() to fail returning NaN because it expects numeric values.

🧠 Conceptual

expert

Interpolation Behavior Outside Input Range

What is the output of this interpolation when animatedValue is set to 1.5?

React Native

const animatedValue = new Animated.Value(1.5);
const interpolatedValue = animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100],
  extrapolate: 'clamp'
});
interpolatedValue.__getValue();

A 1.5

B 150

C 100

D NaN

💡 Hint

The 'clamp' option limits output to the nearest boundary value.

With extrapolate set to 'clamp', values outside inputRange are clamped to nearest outputRange boundary, so 1.5 maps to 100.