Animated.Value and Animated.timing in React Native - Mini App: Build & Ship

Build: Simple Fade Animation

This screen shows a box that fades in when you press a button. It uses Animated.Value and Animated.timing to smoothly change the box's opacity from invisible to visible.

Target UI

---------------------
|                   |
|    [Fade In]      |
|                   |
|   [  Box  ]       |
|                   |
---------------------

Add a button labeled 'Fade In' at the top center

Add a square box below the button with initial opacity 0 (invisible)

When the button is pressed, animate the box's opacity from 0 to 1 over 1 second

Use Animated.Value to hold the opacity value

Use Animated.timing to perform the animation

Ensure the animation runs smoothly and the box becomes fully visible

Starter Code

React Native

import React, { useRef } from 'react';
import { View, Button, Animated, StyleSheet } from 'react-native';

export default function FadeAnimationScreen() {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    // TODO: Add animation code here
  };

  return (
    <View style={styles.container}>
      <Button title="Fade In" onPress={fadeIn} />
      <Animated.View style={[styles.box, { opacity }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    marginTop: 20
  }
});

Task 1

Task 2

Solution

React Native

import React, { useRef } from 'react';
import { View, Button, Animated, StyleSheet } from 'react-native';

export default function FadeAnimationScreen() {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    }).start();
  };

  return (
    <View style={styles.container}>
      <Button title="Fade In" onPress={fadeIn} />
      <Animated.View style={[styles.box, { opacity }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    marginTop: 20
  }
});

We use Animated.Value to hold the opacity state starting at 0 (fully transparent). The fadeIn function uses Animated.timing to change the opacity value smoothly from 0 to 1 over 1 second (1000 milliseconds). The useNativeDriver: true option makes the animation run smoothly on the native side. When the button is pressed, the animation starts and the blue box fades in.

Final Result

Completed Screen

---------------------
|                   |
|    [Fade In]      |
|                   |
|   [  Box  ]       |
|                   |
---------------------

User taps the 'Fade In' button

The blue box below smoothly changes from invisible to fully visible over 1 second

Stretch Goal

Add a 'Fade Out' button that fades the box back to invisible

💡 Hint

Create another function using Animated.timing to animate opacity from 1 to 0 and add a button that calls it

Practice

1. What is the main purpose of Animated.Value in React Native animations?

easy

A. To hold the current numeric value of an animation

B. To start the animation automatically

C. To define the animation duration

D. To stop the animation immediately

Solution

1. Step 1: Understand the role of Animated.Value

   Animated.Value is used to store the current value that changes during an animation, like position or opacity.

2. Step 2: Differentiate from other animation functions

   Animated.timing controls how the value changes over time, but Animated.Value itself just holds the number.

3. Final Answer:

   To hold the current numeric value of an animation -> Option A

4. Quick Check:

   Animated.Value holds number = A [OK]

Hint: Animated.Value stores the number, timing changes it smoothly [OK]

Common Mistakes:

• Confusing Animated.Value with Animated.timing
• Thinking Animated.Value starts or stops animation
• Assuming Animated.Value sets duration

2. Which of the following is the correct syntax to create an Animated.Value starting at 0?

easy

A. const anim = Animated.createValue(0);

B. const anim = Animated.Value(0);

C. const anim = Animated.timing(0);

D. const anim = new Animated.Value(0);

Solution

1. Step 1: Recall the correct constructor usage

   Animated.Value is a class, so you must use new Animated.Value(0) to create an instance starting at 0.

2. Step 2: Identify incorrect options

   const anim = Animated.Value(0); misses new, C uses timing instead of Value, D uses a non-existent method.

3. Final Answer:

   const anim = new Animated.Value(0); -> Option D

4. Quick Check:

   Use new with Animated.Value = A [OK]

Hint: Always use 'new' to create Animated.Value instances [OK]

Common Mistakes:

• Omitting 'new' keyword
• Using Animated.timing instead of Animated.Value
• Calling non-existent methods like createValue

3. Given the code snippet:

const anim = new Animated.Value(0);
Animated.timing(anim, { toValue: 100, duration: 500, useNativeDriver: false }).start();
console.log(anim._value);

What will console.log(anim._value) most likely output immediately after start() is called?

medium

A. undefined

B. 0

C. 100

D. An error is thrown

Solution

1. Step 1: Understand Animated.timing behavior

   Animated.timing changes the value smoothly over time, not instantly. Right after start(), the value is still at the initial 0.

2. Step 2: Check the value property

   anim._value holds the current numeric value, which remains 0 immediately after starting.

3. Final Answer:

   0 -> Option B

4. Quick Check:

   Animation starts gradual change, initial value = 0 [OK]

Hint: Animation value changes over time, not instantly [OK]

Common Mistakes:

• Assuming value changes immediately to toValue
• Confusing _value with animated value getter
• Expecting errors from accessing _value

4. Identify the error in this animation code:

const anim = new Animated.Value(0);
Animated.timing(anim, { toValue: 1, duration: 300 }).start();

Why might this animation not work as expected?

medium

A. Missing useNativeDriver property causes error

B. Animated.Value must be initialized with 1, not 0

C. Duration must be a string, not a number

D. start() must be called with a callback function

Solution

1. Step 1: Check required properties for Animated.timing

   Since React Native 0.62+, useNativeDriver is required to specify if native driver is used.

2. Step 2: Identify missing property

   The code lacks useNativeDriver, so the animation may not run or throw a warning.

3. Final Answer:

   Missing useNativeDriver property causes error -> Option A

4. Quick Check:

   Always include useNativeDriver in timing config [OK]

Hint: Always add useNativeDriver: true or false in timing config [OK]

Common Mistakes:

• Omitting useNativeDriver property
• Wrong duration type
• Thinking start() needs a callback

5. You want to create a fade-in effect on a view using Animated.Value and Animated.timing. Which code snippet correctly animates opacity from 0 to 1 over 1 second?

hard

A. const opacity = new Animated.Value(0);
Animated.timing(opacity, { toValue: 1, duration: '1000', useNativeDriver: true }).start();

B. const opacity = Animated.Value(0);
Animated.timing(opacity, { toValue: 1, duration: 1000 }).start();

C. const opacity = new Animated.Value(0);
Animated.timing(opacity, { toValue: 1, duration: 1000, useNativeDriver: true }).start();

D. const opacity = new Animated.Value(1);
Animated.timing(opacity, { toValue: 0, duration: 1000, useNativeDriver: true }).start();

Solution

1. Step 1: Initialize Animated.Value correctly

   Opacity starts at 0, so use new Animated.Value(0).

2. Step 2: Configure Animated.timing properly

   Set toValue: 1, duration: 1000 (number), and useNativeDriver: true for smooth native animation.

3. Step 3: Identify incorrect options

   const opacity = Animated.Value(0); Animated.timing(opacity, { toValue: 1, duration: 1000 }).start(); misses new and useNativeDriver. const opacity = new Animated.Value(1); Animated.timing(opacity, { toValue: 0, duration: 1000, useNativeDriver: true }).start(); reverses fade direction. const opacity = new Animated.Value(0); Animated.timing(opacity, { toValue: 1, duration: '1000', useNativeDriver: true }).start(); uses string for duration, which is invalid.

4. Final Answer:

   const opacity = new Animated.Value(0); Animated.timing(opacity, { toValue: 1, duration: 1000, useNativeDriver: true }).start(); -> Option C

5. Quick Check:

   Initialize with new, use number duration, add useNativeDriver [OK]

Hint: Use new Animated.Value(0) and number duration with useNativeDriver [OK]

Common Mistakes:

• Omitting new keyword
• Using string for duration
• Forgetting useNativeDriver
• Reversing from/to values