React Native Reanimated - Mini App: Build & Ship

Build: Simple Fade Animation

This screen shows a box that fades in and out when you tap a button below it.

Target UI

┌─────────────────────────────┐
│                             │
│          [  BOX  ]           │
│                             │
│                             │
│       [ Fade In/Out ]        │
└─────────────────────────────┘

Display a colored square box in the center of the screen.

Add a button labeled 'Fade In/Out' below the box.

When the button is tapped, the box should smoothly fade out if visible, or fade in if invisible.

Use React Native Reanimated for the fade animation.

Ensure the animation duration is about 500 milliseconds.

Starter Code

React Native

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function FadeBox() {
  const opacity = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value
    };
  });

  const toggleFade = () => {
    // TODO: Add code to toggle opacity between 0 and 1 with animation
  };

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: '#4a90e2',
    marginBottom: 20
  }
});

Task 1

Task 2

Task 3

Solution

React Native

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function FadeBox() {
  const opacity = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value
    };
  });

  const toggleFade = () => {
    opacity.value = withTiming(opacity.value === 1 ? 0 : 1, { duration: 500 });
  };

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: '#4a90e2',
    marginBottom: 20
  }
});

We use useSharedValue to hold the opacity state. The useAnimatedStyle hook returns a style object that updates the opacity of the box based on the shared value. The toggleFade function changes the opacity value between 1 and 0 using withTiming to animate the change smoothly over 500 milliseconds. This creates a fade in/out effect when the button is pressed.

Final Result

Completed Screen

┌─────────────────────────────┐
│                             │
│          [  BOX  ]           │
│                             │
│                             │
│       [ Fade In/Out ]        │
└─────────────────────────────┘

When the user taps the 'Fade In/Out' button, the blue box smoothly fades out if visible.

If the box is invisible, tapping the button fades it back in.

The fade animation lasts about half a second.

Stretch Goal

Add a sliding animation so the box moves up by 50 pixels while fading out and moves back down while fading in.

💡 Hint

Use another shared value for vertical position and animate it together with opacity using withTiming.