Animated API basics in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new animated value starting at 0.

React Native

const opacity = new Animated.Value([1]);

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

A0

B1

Cnull

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 instead of 0 starts fully visible, not invisible.

Passing null or true causes errors.

The Animated.Value constructor needs a starting numeric value. Here, 0 means fully transparent.

2fill in blank

medium

Complete the code to start a timing animation that changes opacity to 1 over 500ms.

React Native

Animated.timing(opacity, { toValue: [1], duration: 500, useNativeDriver: true }).start();

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

Afalse

Bnull

C0

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 means no change in opacity.

Passing false to toValue causes errors.

toValue should be 1 to animate opacity from 0 to fully visible.

3fill in blank

hard

Fix the error in the code to animate the scale of a view from 1 to 2.

React Native

const scale = new Animated.Value(1);
Animated.timing(scale, { toValue: [1], duration: 300, useNativeDriver: true }).start();

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

A1

B2

C'2'

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using '2' as a string causes runtime errors.

Using 1 means no scale change.

toValue must be a number 2 to scale up the view. A string '2' is invalid.

4fill in blank

hard

Fill in the blank to create an animated style that changes opacity and scale.

React Native

const animatedStyle = {
  opacity: opacity,
  transform: [{ scale: [1] }]
};

return <Animated.View style={animatedStyle} />;

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

Ascale

Bopacity

CscaleValue

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity instead of scale in transform.

Using undefined variable names.

The transform property expects an object with the scale key set to the animated value.

5fill in blank

hard

Fill all three blanks to create a fade-in and scale-up animation using Animated.parallel.

React Native

Animated.parallel([
  Animated.timing(opacity, { toValue: [1], duration: 400, useNativeDriver: true }),
  Animated.timing(scale, { toValue: [2], duration: 400, useNativeDriver: true })
]).start([3]);

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

A1

B2

C() => console.log('Animation done')

D() => alert('Done')

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong toValue numbers.

Passing alert instead of console.log.

Missing the callback function.

Opacity animates to 1 (visible), scale animates to 2 (double size), and the callback logs when done.