1
00:00:00,810 --> 00:00:05,550
I think that the last thing you have to do inside of our application is maybe do a little bit of formatting

2
00:00:05,550 --> 00:00:11,190
on this text right here and also add in some nice animation so that whenever a row expands we get a

3
00:00:11,190 --> 00:00:15,130
nice smooth expansion as opposed to the very abrupt like boom.

4
00:00:15,130 --> 00:00:16,330
Here's some text.

5
00:00:16,380 --> 00:00:20,920
So first let's take care of the styling for our text and this shouldn't be too bad.

6
00:00:21,360 --> 00:00:27,540
Inside of my list item component I going to find my render description method and for my text tag I'm

7
00:00:27,540 --> 00:00:36,420
just going to wrap it with another card section so card section and closing card section like so this

8
00:00:36,420 --> 00:00:41,740
is going to serve to just give my card or my text a little bit of margin on either side.

9
00:00:42,000 --> 00:00:45,990
And also make sure that it's just you know give myself a bottom border there as well.

10
00:00:46,290 --> 00:00:47,460
So let's refresh this.

11
00:00:47,460 --> 00:00:49,490
Test it out and.

12
00:00:49,540 --> 00:00:51,350
Well OK.

13
00:00:51,810 --> 00:00:56,770
It's off the edge and we've got a bottom border there but now the tuks is running off the screen.

14
00:00:56,850 --> 00:01:03,270
So this is just a little bit of an oddity with the way that using text work we can fix this by adding

15
00:01:03,270 --> 00:01:06,690
on a style property to the text tag itself.

16
00:01:06,690 --> 00:01:14,940
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

17
00:01:15,120 --> 00:01:19,680
do not wrap your text or do not cut your text off the screen wrap your text.

18
00:01:19,680 --> 00:01:22,840
Make sure that takes up as much space as it needs to.

19
00:01:22,860 --> 00:01:25,030
So let's refresh this now.

20
00:01:25,450 --> 00:01:28,290
And OK now we're looking pretty darned good.

21
00:01:28,290 --> 00:01:34,050
We've got a reasonable amount of padding on the left hand side and we've got a nice bottom border.

22
00:01:34,050 --> 00:01:35,640
All that kind of good stuff.

23
00:01:35,640 --> 00:01:40,140
If you want to add in some additional padding to the left and right hand side just to push the text

24
00:01:40,140 --> 00:01:41,430
off a little bit more.

25
00:01:41,550 --> 00:01:42,170
Go for it.

26
00:01:42,180 --> 00:01:42,990
Totally up to you.

27
00:01:43,080 --> 00:01:45,630
But I'm I'm pretty happy with the way it looks right now.

28
00:01:46,180 --> 00:01:46,710
OK.

29
00:01:46,770 --> 00:01:50,240
The last thing you have to do here is adding some animation.

30
00:01:50,280 --> 00:01:57,270
So the whole goal here is that whenever a section expands that should just shoot occur like in a nice

31
00:01:57,270 --> 00:01:59,710
sliding fashion and like the tech should fade in.

32
00:01:59,730 --> 00:02:01,650
All that kind of good stuff.

33
00:02:01,650 --> 00:02:06,420
So without talking too much about animation at all like I'm not going to say anything about it just

34
00:02:06,420 --> 00:02:07,360
yet.

35
00:02:07,440 --> 00:02:09,600
Adding some code just a couple lines.

36
00:02:09,630 --> 00:02:11,370
We're going to see where that gets us.

37
00:02:11,370 --> 00:02:11,910
OK.

38
00:02:13,450 --> 00:02:22,870
So first on my Riak native library up top I'm going to import another library or another element or

39
00:02:22,870 --> 00:02:31,840
I should say called layout animation and notice just because of so many properties here now I chose

40
00:02:31,840 --> 00:02:34,910
to newline my import statements.

41
00:02:34,960 --> 00:02:37,760
That's just a stylistic thing that I like to do if you don't want to do it.

42
00:02:37,780 --> 00:02:38,900
That's totally fine.

43
00:02:39,280 --> 00:02:43,850
So I just imported layout animation again I'm not going to say anything about it just yet.

44
00:02:44,080 --> 00:02:51,870
The next you are going to do is that in a lifecycle method called component will update.

45
00:02:52,390 --> 00:02:54,550
Again I'm not going to say what it does just yet.

46
00:02:54,580 --> 00:02:56,020
Just bear with me.

47
00:02:56,230 --> 00:03:00,750
And then inside of here I'll call layout animation spring.

48
00:03:00,820 --> 00:03:05,900
So all we did was inport layout animation adding a lifecycle method.

49
00:03:05,940 --> 00:03:11,460
We'll talk about when it's called in just a second here and then called layout animation spring.

50
00:03:11,590 --> 00:03:18,440
Nothing else I can refresh my application and then I'm going to click on something here and whoa.

51
00:03:18,450 --> 00:03:19,980
Hot dog.

52
00:03:20,300 --> 00:03:23,520
Wow that is awesome.

53
00:03:23,530 --> 00:03:25,500
We basically got for free.

54
00:03:25,540 --> 00:03:32,020
Like no work required some awesome little animation of whenever we change or enter in the currently

55
00:03:32,020 --> 00:03:34,610
selected library you know click on a different one.

56
00:03:34,630 --> 00:03:36,010
It expands nicely.

57
00:03:36,010 --> 00:03:39,680
It kind of bounces and the text fades in on top of that.

58
00:03:39,730 --> 00:03:44,050
That is madness total madness like this is sweet.

59
00:03:44,050 --> 00:03:51,340
This is one of the best things about re-acclimated right here for such little work we get some pretty

60
00:03:51,340 --> 00:03:53,060
awesome animations.

61
00:03:53,470 --> 00:03:56,950
So clearly this animation thing right here is totally awesome.

62
00:03:56,950 --> 00:04:01,600
Let's spend some time to figure out exactly how it works.

63
00:04:01,720 --> 00:04:05,210
So I'm going pull up a diagram and let's check this thing out.

64
00:04:05,670 --> 00:04:06,380
OK.

65
00:04:06,430 --> 00:04:11,410
So on the bottom here I'm going from left to right is you can kind of think of his time.

66
00:04:11,440 --> 00:04:14,500
So this arrow is like time going along.

67
00:04:14,770 --> 00:04:17,340
So let's walk through the cycle here first.

68
00:04:17,380 --> 00:04:19,770
A user presses on a library.

69
00:04:19,810 --> 00:04:23,070
Now as we know that we'll call our action creator.

70
00:04:23,430 --> 00:04:27,630
That action clearly turning action that gets sent to all of our reducers.

71
00:04:27,790 --> 00:04:29,730
So the reducers will rerun.

72
00:04:29,860 --> 00:04:36,270
They will assemble some amount of new application state that new application state automatically sent

73
00:04:36,280 --> 00:04:43,600
gets sent down to our map state to prop's functions which causes our components to re render and boom

74
00:04:43,600 --> 00:04:46,490
all of a sudden our view updates on the screen.

75
00:04:46,690 --> 00:04:49,950
So that's that's like what happens that is a cycle that we have right now.

76
00:04:50,320 --> 00:04:56,140
So the animation is a little hook on that very last step right here.

77
00:04:56,140 --> 00:05:03,670
If we call Leo animation at any time before our components updates are shown on the screen and that

78
00:05:03,670 --> 00:05:11,470
is exactly when this lifecycle method component will update is called If we call layout animation that

79
00:05:11,500 --> 00:05:17,950
spring at any point in time before our component gets up there on the screen all the updates on devices

80
00:05:17,950 --> 00:05:22,560
screen will be automatically animated for us in any way possible.

81
00:05:22,690 --> 00:05:27,110
So any element that is moving around will have its movement animated smoothly.

82
00:05:27,280 --> 00:05:34,570
Any text that appears will fade in smoothly any text that goes away will fade ins will fade out slowly.

83
00:05:34,600 --> 00:05:41,080
All we have to do is make sure that we call the layout animation spring method before this update takes

84
00:05:41,080 --> 00:05:42,010
place.

85
00:05:42,010 --> 00:05:43,680
And that's pretty much it.

86
00:05:43,720 --> 00:05:47,630
It is incredibly easy to get some animation going within your apps.

87
00:05:47,650 --> 00:05:52,530
So I really suggest you call layout animation not spring.

88
00:05:52,570 --> 00:05:55,420
You know within reason don't go overboard.

89
00:05:55,450 --> 00:06:01,110
The only downside that we saw to our animation here was that if you'll notice if I've got one open up

90
00:06:01,110 --> 00:06:06,790
top and then like I open one at the bottom and then open another one up top again the text kind of like

91
00:06:07,120 --> 00:06:09,900
you know bounces through at the bottom there.

92
00:06:10,000 --> 00:06:11,360
Yeah definitely funky.

93
00:06:11,380 --> 00:06:14,570
Unfortunately there's not exactly an easy work around for us.

94
00:06:14,770 --> 00:06:19,310
And so that's why it allowed animation is not always a catch all solution.

95
00:06:19,320 --> 00:06:23,290
You know it's not always going to do the perfectly nice looking thing for us.

96
00:06:23,410 --> 00:06:28,750
Nonetheless as an engineer I personally love that we have smooth animations here even though we didn't

97
00:06:28,750 --> 00:06:30,850
have to spend a lot of time putting it together.

98
00:06:30,850 --> 00:06:35,830
So I think that I can deal with that kind of weird aspect to it if I could eventually figure out a work

99
00:06:35,830 --> 00:06:36,750
around.

100
00:06:37,300 --> 00:06:42,440
OK last thing I want to do is just make sure that it's clear this life cycle method right here.

101
00:06:42,580 --> 00:06:43,900
Remember life cycle methods.

102
00:06:43,900 --> 00:06:48,260
All we have to do is define them and then they will automatically be called for us.

103
00:06:48,490 --> 00:06:54,220
So this particular one component will update is called whenever the component is about to be re rendered

104
00:06:54,220 --> 00:06:55,100
to the device.

105
00:06:55,150 --> 00:06:56,760
That's pretty much it.

106
00:06:57,370 --> 00:06:57,820
All right.

107
00:06:57,820 --> 00:06:59,410
Our app is looking fantastic.

108
00:06:59,410 --> 00:07:02,160
Let's do a review of everything in the next section.