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.