(React Native) LayoutAnimation Delay
Feb 8, 2018
You know why I like React Native? Because the documentation is incomplete. This gives me an excuse to dig in to the React Native codebase and honestly tell my boss that I'm working, not just entertaining myself.1
Just the other day I discovered that the LayoutAnimation
API (partially documented here and here) allows you to set a delay
on the animation. Here's an example of how:
//all duration/delay values are in ms
const myCustomAnimationConfig = {
duration: 300,
update: {
delay: 500,
type: LayoutAnimation.Types.easeInEaseOut
},
create: {
delay: 300,
type: LayoutAnimation.Types.easeInEaseOut
},
delete: {
delay: 100,
type: LayoutAnimation.Types.easeInEaseOut
}
};
LayoutAnimation.configureNext(myCustomAnimationConfig);
Pretty cool, right?
Credit to Justin Poliachik for this blog post, which helped me work out how this works.
1It's also an opportunity for people like yourself to help out by submitting a PR. React Native is open source, and the team has enough to do already. So it's up to us to help out. Why are you still sitting there reading this? Go do it!