Sign in Go Pro

Advanced React Native

Animate Components with LayoutAnimation

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson
Autoplay

Up next

Previous

About

The easiest way to add animation to React Native components is to use the built in LayoutAnimation feature.

LayoutAnimation will take visual changes that happen on the component, and automatically animate between those visual changes. You don't have to do any extra work to calculate animation values, or start and stop the animations - it all happens automatically.

We'll also see how to use setTimeout and requestAnimationFrame to ensure that style changes will actually animate with LayoutAnimation

Summary of Content:

  • Add a LayoutAnimation spring animation to componentDidMount
  • Add a height and padding initial state to the component, and use the height and padding state to change the appearance of the todo items
  • Change the height and padding state in componentDidMount
  • use setTimeout to delay the animation until after the component is flushed to the UI
  • use requestAnimationFrame instead of setTimeout to delay the state change until the next animation frame

Resources:

https://facebook.github.io/react-native/docs/layoutanimation.html

Instructor

Links

Comments

There are no comments on this lesson, start the conversation below ...

>
You need to go PRO to post comments.

Lessons in Advanced React Native