LayoutAnimation in React Native

Introduction

LayoutAnimation helps your app smoothly change the size or position of elements. It makes the app feel alive and easy to use.

When you want a button to grow or shrink smoothly after a tap.

When a list item expands or collapses with a nice animation.

When you add or remove elements and want the layout to adjust gently.

When you want to animate changes in your app's layout without complex code.

Syntax

React Native

import { LayoutAnimation } from 'react-native';

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

Use LayoutAnimation.configureNext() before state changes that affect layout.

You can use built-in presets like easeInEaseOut, linear, or create custom animations.

Examples

This makes the next layout change animate with a spring effect, like a bounce.

React Native

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

This makes the layout change animate smoothly at a constant speed.

React Native

LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);

This shows how to create a custom animation with a specific duration and easing.

React Native

LayoutAnimation.configureNext({
  duration: 300,
  update: {
    type: LayoutAnimation.Types.easeInEaseOut
  }
});

Sample App

This app shows a blue box that grows bigger each time you press the button. The size change animates smoothly thanks to LayoutAnimation.

React Native

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

export default function App() {
  const [boxSize, setBoxSize] = useState(100);

  const increaseSize = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setBoxSize(boxSize + 50);
  };

  return (
    <View style={styles.container}>
      <View style={[styles.box, { width: boxSize, height: boxSize }]} />
      <Button title="Grow Box" onPress={increaseSize} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  box: {
    backgroundColor: 'skyblue',
    marginBottom: 20
  }
});

Important Notes

LayoutAnimation works only on iOS and Android, not on web.

Always call LayoutAnimation.configureNext() before the state change that triggers layout update.

Animations run automatically without needing extra animation components.

Summary

LayoutAnimation makes layout changes smooth and natural.

Use configureNext with presets or custom configs before changing layout.

Great for simple animations like expanding, shrinking, or moving views.