1
00:00:02,420 --> 00:00:08,930
Now with all of that in this module, you learned a lot about how to build real apps with React Native.

2
00:00:08,930 --> 00:00:11,780
You learned a lot about the built-in components,

3
00:00:11,780 --> 00:00:16,370
you learned a lot about styling and how to lay things out in the way you want and how to style things

4
00:00:16,370 --> 00:00:17,300
in the way you want,

5
00:00:17,300 --> 00:00:24,290
also how styling differs between some components, for example that for text components, styling does

6
00:00:24,320 --> 00:00:26,320
cascade to a certain extent,

7
00:00:26,390 --> 00:00:31,970
so styles are inherited in nested styles there, something we're taking advantage of in the game over

8
00:00:31,970 --> 00:00:39,770
screen here but that on all other components like the view, styles that you apply to it really only apply

9
00:00:39,770 --> 00:00:45,880
to that view and do not cascade, are not shared with any nested child views.

10
00:00:45,890 --> 00:00:52,010
You also learned how you can share common stylings, for example with custom components, like our body

11
00:00:52,010 --> 00:00:58,100
text which sets up a general font family so that we can use body text instead of the built-in text

12
00:00:58,130 --> 00:01:00,480
if we want text with that font family.

13
00:01:00,590 --> 00:01:04,190
Of course that's a concept you can use for any shared styling you want,

14
00:01:04,310 --> 00:01:09,980
like we're also doing it for the card kind of, where we have a prestyled view to give us this nice card

15
00:01:10,010 --> 00:01:12,140
look with a little bit of a shadow.

16
00:01:12,140 --> 00:01:17,450
You also learned how you can set up some theming with constants which you can import into different files,

17
00:01:17,870 --> 00:01:23,990
both for colors here or also if you needed it, for text styles or for any other style you want to share

18
00:01:23,990 --> 00:01:29,630
across components so that you don't have to rewrite it all the times, especially useful for cases where

19
00:01:29,630 --> 00:01:33,120
you don't want to or where you can't create separate components

20
00:01:33,260 --> 00:01:36,070
as we're doing it for the font family for example.

21
00:01:36,250 --> 00:01:40,820
So if that's not possible, which in case of the colors would have been difficult because we need colors

22
00:01:40,820 --> 00:01:47,690
in all kinds of places, then such shared styles or shared constants are a great way

23
00:01:47,690 --> 00:01:53,420
and in general, I hope you get a feeling for how you compose user interfaces with built-in components

24
00:01:53,450 --> 00:01:58,820
and with your own custom components that then build up on the built-in components and how you can therefore

25
00:01:58,820 --> 00:02:02,120
build nice React Native applications.

26
00:02:02,140 --> 00:02:07,390
We had a look at some core components and therefore I also want to give you a quick summary regarding

27
00:02:07,390 --> 00:02:09,710
what you learned about these components here.

28
00:02:09,760 --> 00:02:15,080
Probably the most important component is the view, which is a container which you wrap around other

29
00:02:15,100 --> 00:02:21,180
components to then lay those components out or to add certain container styles, like shadows, borders,

30
00:02:21,190 --> 00:02:24,760
background color, things like that. Pretty much

31
00:02:24,760 --> 00:02:29,870
equally important is the text component which you use for outputting text.

32
00:02:29,950 --> 00:02:36,130
You can also nest text into text where some style is even shared and you can in general control how

33
00:02:36,130 --> 00:02:41,980
text should be output, if it should wrap itself which is the default or if it should only output one

34
00:02:41,980 --> 00:02:43,070
or two lines

35
00:02:43,210 --> 00:02:49,450
and that's where the text component really helps you output that valuable information to your users.

36
00:02:49,450 --> 00:02:53,860
Now sometimes you don't just want to output information but also fetch information and for this, the

37
00:02:53,860 --> 00:02:55,930
text input can be helpful.

38
00:02:55,930 --> 00:03:00,760
Now we'll dive deeper into fetching user input later in the course but you already got a first look

39
00:03:00,760 --> 00:03:05,290
at how you can style it and how you can configure it and how you can make sure you're getting the right

40
00:03:05,320 --> 00:03:11,210
input and you're validating the input and you're really only working with the input you need. Now speaking

41
00:03:11,210 --> 00:03:14,230
of user input, the button of course also is a crucial component,

42
00:03:14,330 --> 00:03:19,070
be that the built-in button or your own button which you can build with the touchable components which

43
00:03:19,130 --> 00:03:20,960
also are super important

44
00:03:20,960 --> 00:03:26,660
and in cases where you need to output lists of data, you learned about FlatList and about scroll view

45
00:03:26,750 --> 00:03:32,270
where the main difference is that FlatList is optimized for very long lists or lists where you don't

46
00:03:32,270 --> 00:03:35,790
really know how long they will be but they potentially are very long,

47
00:03:35,930 --> 00:03:42,470
whereas scroll view is great for any other scrollable content which isn't infinitely long, where you certainly

48
00:03:42,470 --> 00:03:48,410
will go beyond the boundaries of the screen but it won't be too much extra content because if all that

49
00:03:48,410 --> 00:03:54,110
extra content is rendered without it being used, without it being visible to the user, then you're wasting

50
00:03:54,110 --> 00:03:54,860
performance

51
00:03:54,920 --> 00:03:56,710
and that's where FlatList comes in

52
00:03:56,780 --> 00:03:59,980
because that only renders what the user can really see.

53
00:04:00,020 --> 00:04:05,330
Speaking of what the user can see, in this module, you also learned how to add your own custom fonts and

54
00:04:05,330 --> 00:04:08,770
sometimes you don't need a font but an image, you also learned how to do that,

55
00:04:08,900 --> 00:04:14,580
how to include both local or network images and how you can style these images to look good.

56
00:04:14,600 --> 00:04:20,240
Speaking of styling, for this we're using the stylesheet which is not a component but a class or an object

57
00:04:20,240 --> 00:04:22,130
provided by React Native

58
00:04:22,130 --> 00:04:28,190
and the advantage of using this stylesheet is not only that you'll get your styles out of the jsx

59
00:04:28,190 --> 00:04:35,090
code which you want to keep relatively lean and short and concise but that you also get automatic validation

60
00:04:35,180 --> 00:04:41,110
of your styles and React Native tells you when you're using a style incorrectly and that in the future,

61
00:04:41,150 --> 00:04:47,860
you might also get additional performance optimizations. And with that, we can only encourage you to keep

62
00:04:47,860 --> 00:04:48,810
this section in mind,

63
00:04:48,820 --> 00:04:55,540
maybe go through it a second time and use it as a basis for your further course progress where we will

64
00:04:55,540 --> 00:05:01,570
use all these components we worked with, where we will write more styles, where we will build more complex

65
00:05:01,570 --> 00:05:07,330
user interfaces and where you really will need these fundamentals you learned in the second and in this

66
00:05:07,330 --> 00:05:11,080
course module to then build amazing React Native applications.

67
00:05:11,080 --> 00:05:11,890
So let's move on.