Why animations create fluid experiences in React Native - Build It to Prove It

Build: Animation Demo Screen

This screen shows a simple box that smoothly moves across the screen when you tap a button. It demonstrates how animations make app experiences feel smooth and natural.

Target UI

-------------------------
| Animation Demo Screen  |
|-----------------------|
|                       |
|   [  ]                |
|                       |
|                       |
|                       |
|                       |
|          [Move Box]    |
-------------------------

Display a square box on the left side of the screen

Add a button labeled 'Move Box' at the bottom center

When the button is tapped, animate the box moving smoothly to the right side

Use React Native's Animated API for the movement

Ensure the animation duration is about 1 second

The box should move back to the left if the button is tapped again (toggle)

Starter Code

React Native

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

export default function AnimationDemo() {
  const animation = useRef(new Animated.Value(0)).current;
  const [moved, setMoved] = useState(false);

  const moveBox = () => {
    // TODO: Add animation code here
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { transform: [{ translateX: animation }] }]} />
      <Button title="Move Box" onPress={moveBox} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    padding: 20
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue'
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function AnimationDemo() {
  const animation = useRef(new Animated.Value(0)).current;
  const [moved, setMoved] = useState(false);

  const moveBox = () => {
    Animated.timing(animation, {
      toValue: moved ? 0 : 200,
      duration: 1000,
      useNativeDriver: true
    }).start(() => {
      setMoved(!moved);
    });
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { transform: [{ translateX: animation }] }]} />
      <Button title="Move Box" onPress={moveBox} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    padding: 20
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue'
  }
});

This example uses React Native's Animated API to create a smooth movement of a blue box across the screen. The animation value controls the horizontal position of the box.

When the user taps the 'Move Box' button, the moveBox function triggers an animation that moves the box from its current position to the other side (0 to 200 pixels or back). The Animated.timing function smoothly changes the position over 1 second.

This smooth transition feels natural and fluid, unlike an instant jump. Animations like this help users understand changes on screen and make the app feel polished and responsive.

Final Result

Completed Screen

-------------------------
| Animation Demo Screen  |
|-----------------------|
|                       |
|                     [ ]|
|                       |
|                       |
|                       |
|          [Move Box]    |
-------------------------

Tap 'Move Box' button: The blue box slides smoothly from left to right over 1 second.

Tap 'Move Box' again: The box slides back smoothly to the left side.

Repeated taps toggle the box position with smooth animation.

Stretch Goal

Add a fade-in and fade-out effect to the box when it moves.

💡 Hint

Use another Animated.Value for opacity and animate it together with translateX.