LayoutAnimation in React Native - Mini App: Build & Ship

Build: Animated Box List

This screen shows a list of colored boxes that animate smoothly when added or removed using LayoutAnimation.

Target UI

---------------------
| Animated Box List  |
---------------------
| [Add Box]         |
|                   |
| [Red Box]         |
| [Green Box]       |
| [Blue Box]        |
|                   |
| Tap a box to remove|
---------------------

Display a vertical list of colored boxes with some initial boxes

Add a button labeled 'Add Box' that adds a new colored box at the end

When a box is added or removed, animate the layout change smoothly using LayoutAnimation

Tapping a box removes it with animation

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, UIManager, Platform } from 'react-native';

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export default function AnimatedBoxList() {
  const [boxes, setBoxes] = useState(['red', 'green', 'blue']);

  // TODO: Add function to handle adding a box with animation

  // TODO: Add function to handle removing a box with animation

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.addButton} onPress={() => { /* TODO: Add box */ }}>
        <Text style={styles.addButtonText}>Add Box</Text>
      </TouchableOpacity>
      {boxes.map((color, index) => (
        <TouchableOpacity
          key={index}
          style={[styles.box, { backgroundColor: color }]}
          onPress={() => { /* TODO: Remove box */ }}
          accessibilityLabel={`Box color ${color}`}
          accessible={true}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  addButton: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 6,
    marginBottom: 20,
    alignItems: 'center'
  },
  addButtonText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16
  },
  box: {
    height: 60,
    borderRadius: 8,
    marginBottom: 12
  }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, UIManager, Platform } from 'react-native';

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const COLORS = ['red', 'green', 'blue', 'orange', 'purple', 'yellow', 'cyan'];

export default function AnimatedBoxList() {
  const [boxes, setBoxes] = useState(['red', 'green', 'blue']);

  function addBox() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    const nextColor = COLORS[Math.floor(Math.random() * COLORS.length)];
    setBoxes(prev => [...prev, nextColor]);
  }

  function removeBox(index) {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setBoxes(prev => prev.filter((_, i) => i !== index));
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.addButton} onPress={addBox} accessibilityRole="button" accessibilityLabel="Add a new colored box">
        <Text style={styles.addButtonText}>Add Box</Text>
      </TouchableOpacity>
      {boxes.map((color, index) => (
        <TouchableOpacity
          key={index}
          style={[styles.box, { backgroundColor: color }]}
          onPress={() => removeBox(index)}
          accessibilityLabel={`Box color ${color}, tap to remove`}
          accessible={true}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  addButton: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 6,
    marginBottom: 20,
    alignItems: 'center'
  },
  addButtonText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16
  },
  box: {
    height: 60,
    borderRadius: 8,
    marginBottom: 12
  }
});

We enabled LayoutAnimation for Android by calling UIManager.setLayoutAnimationEnabledExperimental(true). This allows smooth animations when layout changes.

The addBox function picks a random color from a list and adds it to the boxes array. Before updating state, it calls LayoutAnimation.configureNext with a preset animation to animate the layout change.

The removeBox function removes the tapped box by filtering it out of the array, also wrapped with LayoutAnimation.configureNext to animate the removal.

The UI shows a button to add boxes and a list of colored boxes. Tapping a box removes it with animation. Accessibility labels help screen readers describe the boxes and button.

Final Result

Completed Screen

---------------------
| Animated Box List  |
---------------------
| [Add Box]         |
|                   |
| [Red Box]         |
| [Green Box]       |
| [Blue Box]        |
|                   |
| Tap a box to remove|
---------------------

Tap 'Add Box' button: a new colored box appears at the bottom with a smooth animation

Tap any colored box: that box disappears with a smooth animation

Stretch Goal

Add a fade animation effect when boxes are added or removed

💡 Hint

Use LayoutAnimation.configureNext with a custom config that includes opacity changes

Practice

1. What is the main purpose of LayoutAnimation in React Native?

easy

A. To handle network requests asynchronously

B. To animate layout changes smoothly when views change size or position

C. To manage app navigation between screens

D. To style components with CSS-like rules

Solution

1. Step 1: Understand what LayoutAnimation does

   LayoutAnimation is used to animate changes in layout, like when a view grows or moves.

2. Step 2: Compare with other options

   The other options relate to networking, navigation, and styling, which are unrelated to layout animation.

3. Final Answer:

   To animate layout changes smoothly when views change size or position -> Option B

4. Quick Check:

   LayoutAnimation = Animate layout changes [OK]

Hint: LayoutAnimation = smooth layout changes animation [OK]

Common Mistakes:

• Confusing LayoutAnimation with navigation or styling
• Thinking it handles data fetching
• Assuming it animates only opacity or color

2. Which of the following is the correct way to trigger a layout animation before a state change?

easy

A. LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setState({expanded: true});

B. LayoutAnimation.start(); setState({expanded: true});

C. LayoutAnimation.animate(); setState({expanded: true});

D. LayoutAnimation.begin(); setState({expanded: true});

Solution

1. Step 1: Recall the correct method to start animation

   The official method is configureNext with a preset before changing state.

2. Step 2: Check method names

   Only LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setState({expanded: true}); uses configureNext and a valid preset. Others use invalid methods.

3. Final Answer:

   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setState({expanded: true}); -> Option A

4. Quick Check:

   Use configureNext before state change [OK]

Hint: Use configureNext with preset before state change [OK]

Common Mistakes:

• Using non-existent methods like start or animate
• Calling animation after state change
• Forgetting to import LayoutAnimation

3. Given this code snippet, what will happen when the button is pressed?

import React from 'react';
import { LayoutAnimation, UIManager, Platform, View, Button } from 'react-native';

if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const MyComponent = () => {
  const [expanded, setExpanded] = React.useState(false);

  const toggle = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setExpanded(!expanded);
  };

  return (
    
      
      
    
  );
};

medium

A. The button does not respond to presses

B. The blue box instantly changes height without animation

C. The app crashes on Android due to missing permissions

D. The blue box smoothly expands or shrinks height with a spring animation

Solution

1. Step 1: Understand the animation setup

   UIManager enables animation on Android. LayoutAnimation.configureNext with spring preset is called before state change.

2. Step 2: Analyze the effect on the blue box

   The height toggles between 100 and 200, so the box smoothly animates height change with spring effect.

3. Final Answer:

   The blue box smoothly expands or shrinks height with a spring animation -> Option D

4. Quick Check:

   configureNext + state change = smooth animation [OK]

Hint: configureNext + state toggle = smooth layout animation [OK]

Common Mistakes:

• Ignoring UIManager setup on Android
• Thinking animation is instant
• Assuming button is unresponsive

4. What is wrong with this code snippet that tries to animate a layout change?

import React from 'react';
import { LayoutAnimation, View, Button } from 'react-native';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const toggle = () => {
    setVisible(!visible);
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  };

  return (
    
      
      {visible && }
    
  );
};

medium

A. LayoutAnimation requires a custom config, presets don't work

B. The red box style is missing width, causing layout error

C. LayoutAnimation.configureNext is called after the state change, so animation won't run

D. Button onPress should be async for animation to work

Solution

1. Step 1: Check order of animation and state change

   Animation must be configured before the state change triggers layout update.

2. Step 2: Identify the mistake

   Here, setVisible is called before configureNext, so animation is not applied to the layout change.

3. Final Answer:

   LayoutAnimation.configureNext is called after the state change, so animation won't run -> Option C

4. Quick Check:

   configureNext must come before state change [OK]

Hint: Call configureNext before state change to animate [OK]

Common Mistakes:

• Calling configureNext after setState
• Forgetting to enable animation on Android
• Assuming presets need custom config

5. You want to create a custom layout animation that fades and scales a view when it appears or disappears. Which approach correctly uses LayoutAnimation to achieve this effect?

hard

A. Use LayoutAnimation.configureNext with a custom config specifying duration, create with property: 'opacity' and update with type: 'scaleXY'

B. Use Animated.timing on opacity and scale values instead of LayoutAnimation

C. Call LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) without custom config

D. Wrap the view in a ScrollView and animate scroll position

Solution

1. Step 1: Understand custom LayoutAnimation config

   Custom configs can specify duration and animation types for create, update, and delete phases.

2. Step 2: Match animation properties to fade and scale

   Fading uses opacity property, scaling uses scaleXY type in update phase.

3. Step 3: Evaluate options

   Use LayoutAnimation.configureNext with a custom config specifying duration, create with property: 'opacity' and update with type: 'scaleXY' correctly uses configureNext with a custom config for opacity and scale. Use Animated.timing on opacity and scale values instead of LayoutAnimation uses Animated API, not LayoutAnimation. Call LayoutAnimation.configureNext(LayoutAnimation.Presets.linear) without custom config uses preset without scale. Wrap the view in a ScrollView and animate scroll position is unrelated.

4. Final Answer:

   Use LayoutAnimation.configureNext with a custom config specifying duration, create with property: 'opacity' and update with type: 'scaleXY' -> Option A

5. Quick Check:

   Custom config with opacity and scaleXY = fade and scale [OK]

Hint: Custom config with opacity and scaleXY for fade+scale [OK]

Common Mistakes:

• Using presets only for scale animations
• Confusing Animated API with LayoutAnimation
• Not specifying create and update properties