Name: React Native: LayoutAnimation Basics
Uploaded: 2015-08-05T10:04:37-05:00
Description: React Native's LayoutAnimation provides a simple method for animating styles as they are applied to our views.

React Native's LayoutAnimation provides a simple method for animating styles as they are applied to our views.

https://app.egghead.io/api/v1/lessons/react-react-native-layoutanimation-basics/subtitles

React Native: LayoutAnimation Basics

[00:00] Hey, guys, in this video, we're going to take a look at layoutanimation which is a feature available in React Native that allows us to animate styles as they are applied to our views. So to get us started, I'm going import layoutanimation. I'm also going import touchable without feedback. 

[00:17] Now there's not a ton of use case for touchable without feedback. However, I didn't want to use touchable highlight or touchable opacity since it might get a little confusing as to exactly what's being animated.

[00:29] Now to walk through our application really quick, we've got a view with a nested view. The first one has a styles, styles container and the nested view has a style of styles dot view. Our containers just using a little flex to center all of our content. And our view is doing likewise except it's got a background of black. We've also got this style of view text which we'll add in later and it has the color of white so that we can see against the black background.

[00:56] Now what I want to animate is the height of our view. Now we can't see our view right now because it has no height. So I'm going to create a component here, an object here, sorry, in our state so that I can use it as a style, so it's going to have a height. Let's say 250. Now here in our render method, I'm going to say let views file equal, this is going to be an array that initially takes in our styles dot view and are going to add to that this dot state dot view style.

[01:32] So here in our nested view, our style is going to be equal to view style and then we can see that here in the emulator. So to trigger animation, we're going touchable without feedback. We're going to wrap that around our nested view. And the on press of that, we're going to say this dot animate view. We going to bind that to our context of this. And we'll go ahead and create that method now.

[02:05] And here, before we even use layoutanimation, we're just going to go ahead and update the style from our state. So we'll say this dot said state, use style. We'll set our height equal to this dot state dot view style dot height. And if it's greater than 250 we'll set it back to 250. Otherwise, we'll set it to 450. I'm just going to save that and try it out. When we click on this, you can see it jumps to those dimensions.

[02:39] So to animate this, we're going to use layoutanimation dot configure next which basically just says what should I do when the state or the style of this view changes? And we're going to tap into some of the presets that are available to us in layoutanimation. So the first one we'll take a look at is layoutanimation dot presets dot linear. When I click on that, you can see a nice even animation. It never changes pace. It's just animates open, animates close at the exact same speed.

[03:12] Another preset we can take a look at is layoutanimation dot presets dot ease in ease out, save that and it's kind of hard to tell here but it's basically speeding up during the middle of the animation. It slows at the beginning, slows at the end and in the middle it speeds up.

[03:30] And the last one we'll take a look at here is spring, and in this we're going to get a bit of a bounce. So this initial argument that's passed to layoutanimation configure next is called the config parameter. The next one we can have is called a success function, so this is on the success of the animation or on the animation did end, we're going to have this callback. So I'm going to say let callback equal this dot on view layout dot bond this. So we'll go and create that method now.

[04:10] And here we're going to set state of a new parameter in our state or a new key in our state called text. We're going to use the same logic from the height and if the height's greater than 250 and we're setting it back, we're going to say it's small. Otherwise we're going to say it's big. And this is going to change the state or the inner text of a text element here. So let's drop that in, and here we'll just say, this dot state dot text. And we'll go and add that to our state. And since we're starting that small, save that there.

[04:47] We need to apply our style to our text element. OK, so we start off with our small text and then we jump to our big.


React Native: LayoutAnimation Basics

Share this video with your friends