Animated API basics in React Native - Mini App: Build & Ship

Build: Simple Fade Animation

This screen shows a box that fades in and out continuously using React Native's Animated API.

Target UI

┌─────────────────────────────┐
│                             │
│        [Animated Box]        │
│                             │
│  (Box fades in and out)      │
│                             │
└─────────────────────────────┘

Display a square box in the center of the screen

Use React Native Animated API to animate the box's opacity

The box should fade from fully visible to invisible and back repeatedly

Animation should start automatically when the screen loads

Starter Code

React Native

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

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

  useEffect(() => {
    // TODO: Add animation code here
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { opacity }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'tomato',
    borderRadius: 10
  }
});

Task 1

Task 2

Solution

React Native

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

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

  useEffect(() => {
    const fadeOut = Animated.timing(opacity, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true
    });

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

    const loopAnimation = Animated.loop(
      Animated.sequence([fadeOut, fadeIn])
    );

    loopAnimation.start();

    return () => loopAnimation.stop();
  }, [opacity]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { opacity }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'tomato',
    borderRadius: 10
  }
});

We use React Native's Animated.Value to hold the opacity value. Inside useEffect, we create two animations: one to fade out (opacity 1 to 0) and one to fade in (opacity 0 to 1). We combine them in a sequence and loop it infinitely with Animated.loop. The animation starts automatically when the component mounts and stops if the component unmounts. The useNativeDriver: true option makes the animation smoother by running it on the native thread.

Final Result

Completed Screen

┌─────────────────────────────┐
│                             │
│        ████████████          │
│                             │
│  (Box fades in and out)      │
│                             │
└─────────────────────────────┘

The red square box in the center smoothly fades out to invisible and then fades back in repeatedly without user input.

Stretch Goal

Add a button below the box to pause and resume the fade animation.

💡 Hint

Use a state variable to track if animation is running. Use Animated.loop's stop() and start() methods to control animation.

Practice

1. What is the primary purpose of Animated.Value in React Native's Animated API?

easy

A. To define the duration of an animation

B. To create a new component for animation

C. To store and track the current value of an animation

D. To handle user gestures during animation

Solution

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

   Animated.Value is used to hold a numeric value that changes over time during an animation.

2. Step 2: Differentiate from other Animated API parts

   It does not create components or handle gestures; it only stores the animation's current value.

3. Final Answer:

   To store and track the current value of an animation -> Option C

4. Quick Check:

   Animated.Value = animation value holder [OK]

Hint: Animated.Value holds the changing number in animation [OK]

Common Mistakes:

• Confusing Animated.Value with animation duration
• Thinking Animated.Value creates UI components
• Assuming it handles user input gestures

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

easy

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

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

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

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

Solution

1. Step 1: Recall correct Animated.Value instantiation

   Animated.Value is a class and must be instantiated with new.

2. Step 2: Check each option's syntax

   Only new Animated.Value(0) is correct; others miss new or use wrong method names.

3. Final Answer:

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

4. Quick Check:

   Use new keyword to create Animated.Value [OK]

Hint: Always use 'new' when creating Animated.Value [OK]

Common Mistakes:

• Omitting the 'new' keyword
• Using lowercase 'value' instead of 'Value'
• Using non-existent methods like createValue

3. What will be the final value of anim after this code runs?

const anim = new Animated.Value(0);
Animated.timing(anim, {toValue: 100, duration: 500, useNativeDriver: false}).start();
// Assume animation completes instantly for this question

medium

A. 100

B. 0

C. 50

D. undefined

Solution

1. Step 1: Understand Animated.timing behavior

   Animated.timing animates the value from its current state to toValue over the given duration.

2. Step 2: Since animation completes instantly here, anim reaches toValue

   Because we assume instant completion, anim will be 100 after animation.

3. Final Answer:

   100 -> Option A

4. Quick Check:

   Animated.timing sets value to toValue after animation [OK]

Hint: Animated.timing moves value to toValue after animation [OK]

Common Mistakes:

• Thinking value stays at 0
• Assuming value is halfway (50) instantly
• Confusing useNativeDriver effect on value

4. Identify the error in this animation code snippet:

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

medium

A. toValue must be 0 or less

B. Missing useNativeDriver property in timing config

C. start() method is missing a callback

D. Animated.Value should be initialized with 1

Solution

1. Step 1: Check Animated.timing config requirements

   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, causing a warning or error.

3. Final Answer:

   Missing useNativeDriver property in timing config -> Option B

4. Quick Check:

   Always include useNativeDriver in Animated.timing [OK]

Hint: Always add useNativeDriver in timing config [OK]

Common Mistakes:

• Ignoring useNativeDriver requirement
• Thinking start() needs a callback
• Initializing Animated.Value incorrectly

5. You want to animate a view's opacity from 0 to 1 and then back to 0 repeatedly. Which approach correctly uses the Animated API to achieve this?

hard

A. Use setTimeout to manually update opacity value every second

B. Use a single Animated.timing with toValue 1 and duration doubled

C. Use Animated.spring with toValue 1 and then call Animated.timing to 0

D. Use Animated.loop with Animated.sequence of two Animated.timing calls changing opacity 0->1 and 1->0

Solution

1. Step 1: Understand repeating animations

   To repeat animations, Animated.loop is used to repeat a sequence or animation indefinitely.

2. Step 2: Use Animated.sequence to chain opacity changes

   Animating opacity from 0 to 1 then back to 0 requires sequencing two Animated.timing calls inside a loop.

3. Step 3: Evaluate options

   Use Animated.loop with Animated.sequence of two Animated.timing calls changing opacity 0->1 and 1->0 correctly uses Animated.loop with Animated.sequence of two timings. Others either don't loop or use incorrect methods.

4. Final Answer:

   Use Animated.loop with Animated.sequence of two Animated.timing calls changing opacity 0->1 and 1->0 -> Option D

5. Quick Check:

   Loop + sequence = repeated animation [OK]

Hint: Use Animated.loop with sequence for repeated animations [OK]

Common Mistakes:

• Trying to do repeat with single timing
• Mixing spring and timing incorrectly
• Using manual timers instead of Animated API