0
0
React Nativemobile~20 mins

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

Choose your learning style9 modes available
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.