I think that the last thing you have to do inside of our application is maybe do a little bit of formatting
on this text right here and also add in some nice animation so that whenever a row expands we get a
nice smooth expansion as opposed to the very abrupt like boom.
Here's some text.
So first let's take care of the styling for our text and this shouldn't be too bad.
Inside of my list item component I going to find my render description method and for my text tag I'm
just going to wrap it with another card section so card section and closing card section like so this
is going to serve to just give my card or my text a little bit of margin on either side.
And also make sure that it's just you know give myself a bottom border there as well.
So let's refresh this.
Test it out and.
Well OK.
It's off the edge and we've got a bottom border there but now the tuks is running off the screen.
So this is just a little bit of an oddity with the way that using text work we can fix this by adding
on a style property to the text tag itself.
So on a text tag I mean to add on a style just right in line of flex one is going to tell the text tag
do not wrap your text or do not cut your text off the screen wrap your text.
Make sure that takes up as much space as it needs to.
So let's refresh this now.
And OK now we're looking pretty darned good.
We've got a reasonable amount of padding on the left hand side and we've got a nice bottom border.
All that kind of good stuff.
If you want to add in some additional padding to the left and right hand side just to push the text
off a little bit more.
Go for it.
Totally up to you.
But I'm I'm pretty happy with the way it looks right now.
OK.
The last thing you have to do here is adding some animation.
So the whole goal here is that whenever a section expands that should just shoot occur like in a nice
sliding fashion and like the tech should fade in.
All that kind of good stuff.
So without talking too much about animation at all like I'm not going to say anything about it just
yet.
Adding some code just a couple lines.
We're going to see where that gets us.
OK.
So first on my Riak native library up top I'm going to import another library or another element or
I should say called layout animation and notice just because of so many properties here now I chose
to newline my import statements.
That's just a stylistic thing that I like to do if you don't want to do it.
That's totally fine.
So I just imported layout animation again I'm not going to say anything about it just yet.
The next you are going to do is that in a lifecycle method called component will update.
Again I'm not going to say what it does just yet.
Just bear with me.
And then inside of here I'll call layout animation spring.
So all we did was inport layout animation adding a lifecycle method.
We'll talk about when it's called in just a second here and then called layout animation spring.
Nothing else I can refresh my application and then I'm going to click on something here and whoa.
Hot dog.
Wow that is awesome.
We basically got for free.
Like no work required some awesome little animation of whenever we change or enter in the currently
selected library you know click on a different one.
It expands nicely.
It kind of bounces and the text fades in on top of that.
That is madness total madness like this is sweet.
This is one of the best things about re-acclimated right here for such little work we get some pretty
awesome animations.
So clearly this animation thing right here is totally awesome.
Let's spend some time to figure out exactly how it works.
So I'm going pull up a diagram and let's check this thing out.
OK.
So on the bottom here I'm going from left to right is you can kind of think of his time.
So this arrow is like time going along.
So let's walk through the cycle here first.
A user presses on a library.
Now as we know that we'll call our action creator.
That action clearly turning action that gets sent to all of our reducers.
So the reducers will rerun.
They will assemble some amount of new application state that new application state automatically sent
gets sent down to our map state to prop's functions which causes our components to re render and boom
all of a sudden our view updates on the screen.
So that's that's like what happens that is a cycle that we have right now.
So the animation is a little hook on that very last step right here.
If we call Leo animation at any time before our components updates are shown on the screen and that
is exactly when this lifecycle method component will update is called If we call layout animation that
spring at any point in time before our component gets up there on the screen all the updates on devices
screen will be automatically animated for us in any way possible.
So any element that is moving around will have its movement animated smoothly.
Any text that appears will fade in smoothly any text that goes away will fade ins will fade out slowly.
All we have to do is make sure that we call the layout animation spring method before this update takes
place.
And that's pretty much it.
It is incredibly easy to get some animation going within your apps.
So I really suggest you call layout animation not spring.
You know within reason don't go overboard.
The only downside that we saw to our animation here was that if you'll notice if I've got one open up
top and then like I open one at the bottom and then open another one up top again the text kind of like
you know bounces through at the bottom there.
Yeah definitely funky.
Unfortunately there's not exactly an easy work around for us.
And so that's why it allowed animation is not always a catch all solution.
You know it's not always going to do the perfectly nice looking thing for us.
Nonetheless as an engineer I personally love that we have smooth animations here even though we didn't
have to spend a lot of time putting it together.
So I think that I can deal with that kind of weird aspect to it if I could eventually figure out a work
around.
OK last thing I want to do is just make sure that it's clear this life cycle method right here.
Remember life cycle methods.
All we have to do is define them and then they will automatically be called for us.
So this particular one component will update is called whenever the component is about to be re rendered
to the device.
That's pretty much it.
All right.
Our app is looking fantastic.
Let's do a review of everything in the next section.