1
00:00:02,190 --> 00:00:09,150
Now for the fallback here on the favorites screen and it of course matters to us whether we have favorites

2
00:00:09,150 --> 00:00:15,570
or not. So we can render a fallback here in a very simple way by not rendering the meal list

3
00:00:15,570 --> 00:00:22,620
if fav meals, if this array is empty. So all we need to do here in the favorite screen component is we

4
00:00:22,620 --> 00:00:27,900
can check if fav meals length is equal to zero let's say,

5
00:00:27,900 --> 00:00:33,060
which means we have no favorite meals or that can't really happen in this app

6
00:00:33,060 --> 00:00:38,610
but if for some reason fav meals is false-ish which is what this checks,

7
00:00:38,610 --> 00:00:40,190
so if it's not set,

8
00:00:40,500 --> 00:00:45,780
if either of these two things is true, then I will not return my meal list but a view with let's say

9
00:00:45,780 --> 00:00:55,510
a text in there where I say no favorite meals found, start adding some

10
00:00:55,790 --> 00:01:03,500
and now let's actually be clear about the casing here. So that's the text I could render as a fallback.

11
00:01:03,510 --> 00:01:07,610
Now important, since I use view and text, we need to import this,

12
00:01:07,680 --> 00:01:12,140
so view and text from React Native should be imported here,

13
00:01:12,150 --> 00:01:20,490
otherwise we'll get an error and now we can add some styling here with let's say styles.content

14
00:01:23,930 --> 00:01:29,450
or whatever you want to name it, import stylesheet from React Native therefore and now let's

15
00:01:29,510 --> 00:01:35,230
add a stylesheet here right before the export styles with stylesheet.create

16
00:01:35,240 --> 00:01:44,510
and in there, add this content key we're referring to with flex one and then just as we did it before,

17
00:01:44,540 --> 00:01:52,490
justify content center and align item center to center all content vertically and horizontally.

18
00:01:52,490 --> 00:01:58,300
So this is the content style property which I apply to this view and

19
00:01:58,340 --> 00:02:00,200
with this, we show this text.

20
00:02:00,230 --> 00:02:05,180
Now of course instead of using text, we could actually also use our default text

21
00:02:05,180 --> 00:02:12,470
now that I think about it, that's what we have it for, the default text which uses our font from components

22
00:02:12,710 --> 00:02:13,780
default text.

23
00:02:14,330 --> 00:02:19,730
So let's use default text here instead of the built-in text component to have our default font

24
00:02:19,730 --> 00:02:24,170
and now if we save this, what we have is this text here,

25
00:02:24,170 --> 00:02:25,730
we have no favorites.

26
00:02:25,910 --> 00:02:28,180
As soon as we start adding some,

27
00:02:28,250 --> 00:02:34,790
so if we add these two items here as favorites for example, we'll of course see those and only if we

28
00:02:34,790 --> 00:02:38,660
remove both here, we'll see the fallback text again.

29
00:02:38,690 --> 00:02:40,400
So that works like a charm.