LayoutAnimation #

Automatically animates views to their new positions when the next layout happens.

A common way to use this API is to call it before calling setState.

Note that in order to get this to work on Android you need to set the following flags via UIManager:

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

Methods #

static configureNext(config, onAnimationDidEnd?) #

Schedules an animation to happen on the next layout.

@param config Specifies animation properties:

duration in milliseconds
create, config for animating in new views (see Anim type)
update, config for animating views that have been updated (see Anim type)

@param onAnimationDidEnd Called when the animation finished. Only supported on iOS. @param onError Called on error. Only supported on iOS.

static create(duration, type, creationProp) #

Helper for creating a config for configureNext.

Properties #

Types: CallExpression #

Properties: CallExpression #

configChecker: CallExpression #

Presets: ObjectExpression #

easeInEaseOut: CallExpression #

linear: CallExpression #

spring: CallExpression #

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub

'use strict';

const React = require('react');
const ReactNative = require('react-native');
const {
  LayoutAnimation,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} = ReactNative;

class AddRemoveExample extends React.Component {
  state = {
    views: [],
  };

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
  }

  _onPressAddView = () => {
    this.setState((state) => ({views: [...state.views, {}]}));
  };

  _onPressRemoveView = () => {
    this.setState((state) => ({views: state.views.slice(0, -1)}));
  };

  render() {
    const views = this.state.views.map((view, i) =>
      <View key={i} style={styles.view}>
        <Text>{i}</Text>
      </View>
    );
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._onPressAddView}>
          <View style={styles.button}>
            <Text>Add view</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._onPressRemoveView}>
          <View style={styles.button}>
            <Text>Remove view</Text>
          </View>
        </TouchableOpacity>
        <View style={styles.viewContainer}>
          {views}
        </View>
      </View>
    );
  }
}

const GreenSquare = () =>
  <View style={styles.greenSquare}>
    <Text>Green square</Text>
  </View>;

const BlueSquare = () =>
  <View style={styles.blueSquare}>
    <Text>Blue square</Text>
  </View>;

class CrossFadeExample extends React.Component {
  state = {
    toggled: false,
  };

  _onPressToggle = () => {
    LayoutAnimation.easeInEaseOut();
    this.setState((state) => ({toggled: !state.toggled}));
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._onPressToggle}>
          <View style={styles.button}>
            <Text>Toggle</Text>
          </View>
        </TouchableOpacity>
        <View style={styles.viewContainer}>
          {
            this.state.toggled ?
            <GreenSquare /> :
            <BlueSquare />
          }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  button: {
    borderRadius: 5,
    backgroundColor: '#eeeeee',
    padding: 10,
    marginBottom: 10,
  },
  buttonText: {
    fontSize: 16,
  },
  viewContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  view: {
    height: 54,
    width: 54,
    backgroundColor: 'red',
    margin: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  greenSquare: {
    width: 150,
    height: 150,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
  },
  blueSquare: {
    width: 150,
    height: 150,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

exports.title = 'Layout Animation';
exports.description = 'Layout animation';
exports.examples = [{
  title: 'Add and remove views',
  render(): React.Element<any> {
    return <AddRemoveExample />;
  },
}, {
  title: 'Cross fade views',
  render(): React.Element<any> {
    return <CrossFadeExample />;
  },
}];

Run this example

← Prev Next →

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis