react-native/website/versioned_docs/0.28/layoutanimation.md

id, title, original_id

id	title	original_id
version-0.28-layoutanimation	layoutanimation	layoutanimation

LayoutAnimation #

Edit on GitHub

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

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

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 #

Examples #

Edit on GitHub

'use strict';

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

const AddRemoveExample = React.createClass({

getInitialState() { return { 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>;

const CrossFadeExample = React.createClass({

getInitialState() { return { 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(): ReactElement<any> { return <AddRemoveExample />; }, }, { title: 'Cross fade views', render(): ReactElement<any> { return <CrossFadeExample />; }, }];

Next →