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
:
if (Platform.OS === 'android') {
if (UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
Example usage:
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, Platform, UIManager, LayoutAnimation} from 'react-native';
if (
Platform.OS === 'android' &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
class AnimatedCollapsible extends React.Component {
state = {expanded: false};
render() {
return (
<View style={{overflow: 'hidden'}}>
<TouchableOpacity
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({expanded: !this.state.expanded});
}}>
<Text>
Press me to {this.state.expanded ? 'collapse' : 'expand'}!
</Text>
</TouchableOpacity>
{this.state.expanded && <Text>I disappear sometimes!</Text>}
</View>
);
}
}
static configureNext(config, onAnimationDidEnd?)
Schedules an animation to happen on the next layout.
Name | Type | Required | Description |
---|
config | object | Yes | See config description below. |
onAnimationDidEnd | function | No | Called when the animation finished. Only supported on iOS. |
The
config
parameter is an object with the keys below.
create
returns a valid object for
config
, and the
Presets
objects can also all be passed as the
config
.
duration
in millisecondscreate
, optional config for animating in new viewsupdate
, optional config for animating views that have been updateddelete
, optional config for animating views as they are removed
The config that's passed to create
, update
, or delete
has the following keys:
type
, the animation type to useproperty
, the layout property to animate (optional, but recommended for create
and delete
)springDamping
(number, optional and only for use with type: Type.spring
)initialVelocity
(number, optional)delay
(number, optional)duration
(number, optional)
static create(duration, type, creationProp)
Example usage:
LayoutAnimation.configureNext(
LayoutAnimation.create(500, LayoutAnimation.Types.spring, LayoutAnimation.Properties.scaleXY)
);
An enumeration of animation types to be used in the
create
method, or in the
create
/
update
/
delete
configs for
configureNext
. (example usage:
LayoutAnimation.Types.easeIn
)
Types |
---|
spring |
linear |
easeInEaseOut |
easeIn |
easeOut |
keyboard |
An enumeration of layout properties to be animated to be used in the
create
method, or in the
create
/
update
/
delete
configs for
configureNext
. (example usage:
LayoutAnimation.Properties.opacity
)
Properties |
---|
opacity |
scaleX |
scaleY |
scaleXY |
A set of predefined animation configs to pass into
configureNext
.
Presets | Value |
---|
easeInEaseOut | create(300, 'easeInEaseOut', 'opacity') |
linear | create(500, 'linear', 'opacity') |
spring | { duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } } |
Calls configureNext()
with Presets.easeInEaseOut
.
Calls configureNext()
with Presets.linear
.
Calls configureNext()
with Presets.spring
.