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