Automatically animates views to their new positions when the next layout happens.
A common way to use this API is to call it before updating the state hook in functional components and calling setState in class components.
Note that in order to get this to work on Android you need to set the following flags via UIManager:
Copy if ( Platform . OS === 'android' ) {
if ( UIManager . setLayoutAnimationEnabledExperimental ) {
UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
}
}
#
import React, { useState } from "react" ;
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native" ;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true );
}
const App = () =>const [expanded, setExpanded] = useState(false );
return (
<View style ={style.container} >
<TouchableOpacity
onPress ={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
setExpanded(!expanded);
}}
>
<Text > Press me to {expanded ? "collapse" : "expand"}!</Text >
</TouchableOpacity >
{expanded && (
<View style ={style.tile} >
<Text > I disappear sometimes!</Text >
</View >
)}
</View > const style = StyleSheet.create({
tile : {
background : "lightGrey" ,
borderWidth : 0.5 ,
borderColor : "#d6d7da"
},
container : {
flex : 1 ,
justifyContent : "center" ,
alignItems : "center" ,
overflow : "hidden"
}
});
export default App;
# # configureNext()# Copy 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. createconfig, and the Presetsconfig.
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 removedThe 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)create()# Copy static create ( duration , type , creationProp )
Helper that creates an object (with create, update, and delete fields) to pass into configureNexttype parameter is an animation type , and the creationProp parameter is a layout property .
Example usage:
Function Component Example Class Component Example
import React, { useState } from "react" ;
import {
View,
Platform,
UIManager,
LayoutAnimation,
StyleSheet,
Button
} from "react-native" ;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true );
}
const App = () =>const [boxPosition, setBoxPosition] = useState("left" );
const toggleBox = () =>500 ,
LayoutAnimation.Types.spring,
LayoutAnimation.Properties.scaleXY
)
);
setBoxPosition(boxPosition === "left" ? "right" : "left" );
};
return (
<View style ={styles.container} >
<View style ={styles.buttonContainer} >
<Button title ="Toggle Layout" onPress ={toggleBox} />
</View >
<View
style ={[styles.box, boxPosition === "left" ? null : styles.moveRight ]}
/>
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "flex-start" ,
justifyContent : "center"
},
box : {
height : 100 ,
width : 100 ,
borderRadius : 5 ,
margin : 8 ,
backgroundColor : "blue"
},
moveRight : {
alignSelf : "flex-end" ,
height : 200 ,
width : 200
},
buttonContainer : {
alignSelf : "center"
}
});
export default App;
import React, { Component } from "react" ;
import {
View,
Platform,
UIManager,
LayoutAnimation,
StyleSheet,
Button
} from "react-native" ;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true );
}
class App extends Component boxPosition : "left"
};
toggleBox = () =>500 ,
LayoutAnimation.Types.spring,
LayoutAnimation.Properties.scaleXY
)
);
this .setState({
boxPosition : this .state.boxPosition === "left" ? "right" : "left"
});
};
render() {
return (
<View style ={styles.container} >
<View style ={styles.buttonContainer} >
<Button title ="Toggle Layout" onPress ={this.toggleBox} />
</View >
<View
style ={[
styles.box ,
this.state.boxPosition === "left" ? null : styles.moveRight
]}
/>
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "flex-start" ,
justifyContent : "center"
},
box : {
height : 100 ,
width : 100 ,
borderRadius : 5 ,
margin : 8 ,
backgroundColor : "blue"
},
moveRight : {
alignSelf : "flex-end" ,
height : 200 ,
width : 200
},
buttonContainer : {
alignSelf : "center"
}
});
export default App;
# # An enumeration of animation types to be used in the createcreate/update/delete configs for configureNextLayoutAnimation.Types.easeIn)
Types spring linear easeInEaseOut easeIn easeOut keyboard
# An enumeration of layout properties to be animated to be used in the createcreate/update/delete configs for configureNextLayoutAnimation.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' } }
easeInEaseOut()# Calls configureNext() with Presets.easeInEaseOut.
linear()# Calls configureNext() with Presets.linear.
spring()# Calls configureNext() with Presets.spring.
Example usage:
Function Component Example Class Component Example
import React, { useState } from "react" ;
import {
View,
Platform,
UIManager,
LayoutAnimation,
StyleSheet,
Button
} from "react-native" ;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true );
}
const App = () =>const [firstBoxPosition, setFirstBoxPosition] = useState("left" );
const [secondBoxPosition, setSecondBoxPosition] = useState("left" );
const [thirdBoxPosition, setThirdBoxPosition] = useState("left" );
const toggleFirstBox = () =>"left" ? "right" : "left" );
};
const toggleSecondBox = () =>"left" ? "right" : "left" );
};
const toggleThirdBox = () =>"left" ? "right" : "left" );
};
return (
<View style ={styles.container} >
<View style ={styles.buttonContainer} >
<Button title ="EaseInEaseOut" onPress ={toggleFirstBox} />
</View >
<View
style ={[
styles.box ,
firstBoxPosition === "left" ? null : styles.moveRight
]}
/>
<View style ={styles.buttonContainer} >
<Button title ="Linear" onPress ={toggleSecondBox} />
</View >
<View
style ={[
styles.box ,
secondBoxPosition === "left" ? null : styles.moveRight
]}
/>
<View style ={styles.buttonContainer} >
<Button title ="Spring" onPress ={toggleThirdBox} />
</View >
<View
style ={[
styles.box ,
thirdBoxPosition === "left" ? null : styles.moveRight
]}
/>
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "flex-start" ,
justifyContent : "center"
},
box : {
height : 100 ,
width : 100 ,
borderRadius : 5 ,
margin : 8 ,
backgroundColor : "blue"
},
moveRight : {
alignSelf : "flex-end"
},
buttonContainer : {
alignSelf : "center"
}
});
export default App;
import React, { Component } from "react" ;
import {
View,
Platform,
UIManager,
LayoutAnimation,
StyleSheet,
Button
} from "react-native" ;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true );
}
class App extends Component firstBoxPosition : "left" ,
secondBoxPosition : "left" ,
thirdBoxPosition : "left"
};
toggleFirstBox = () =>this .setState({
firstBoxPosition :
this .state.firstBoxPosition === "left" ? "right" : "left"
});
};
toggleSecondBox = () =>this .setState({
secondBoxPosition :
this .state.secondBoxPosition === "left" ? "right" : "left"
});
};
toggleThirdBox = () =>this .setState({
thirdBoxPosition :
this .state.thirdBoxPosition === "left" ? "right" : "left"
});
};
render() {
return (
<View style ={styles.container} >
<View style ={styles.buttonContainer} >
<Button title ="EaseInEaseOut" onPress ={this.toggleFirstBox} />
</View >
<View
style ={[
styles.box ,
this.state.firstBoxPosition === "left" ? null : styles.moveRight
]}
/>
<View style ={styles.buttonContainer} >
<Button title ="Linear" onPress ={this.toggleSecondBox} />
</View >
<View
style ={[
styles.box ,
this.state.secondBoxPosition === "left" ? null : styles.moveRight
]}
/>
<View style ={styles.buttonContainer} >
<Button title ="Spring" onPress ={this.toggleThirdBox} />
</View >
<View
style ={[
styles.box ,
this.state.thirdBoxPosition === "left" ? null : styles.moveRight
]}
/>
</View > const styles = StyleSheet.create({
container : {
flex : 1 ,
alignItems : "flex-start" ,
justifyContent : "center"
},
box : {
height : 100 ,
width : 100 ,
borderRadius : 5 ,
margin : 8 ,
backgroundColor : "blue"
},
moveRight : {
alignSelf : "flex-end"
},
buttonContainer : {
alignSelf : "center"
}
});
export default App;