Now with all of that in this module, you learned a lot about how to build real apps with React Native.
You learned a lot about the built-in components,
you learned a lot about styling and how to lay things out in the way you want and how to style things
in the way you want,
also how styling differs between some components, for example that for text components, styling does
cascade to a certain extent,
so styles are inherited in nested styles there, something we're taking advantage of in the game over
screen here but that on all other components like the view, styles that you apply to it really only apply
to that view and do not cascade, are not shared with any nested child views.
You also learned how you can share common stylings, for example with custom components, like our body
text which sets up a general font family so that we can use body text instead of the built-in text
if we want text with that font family.
Of course that's a concept you can use for any shared styling you want,
like we're also doing it for the card kind of, where we have a prestyled view to give us this nice card
look with a little bit of a shadow.
You also learned how you can set up some theming with constants which you can import into different files,
both for colors here or also if you needed it, for text styles or for any other style you want to share
across components so that you don't have to rewrite it all the times, especially useful for cases where
you don't want to or where you can't create separate components
as we're doing it for the font family for example.
So if that's not possible, which in case of the colors would have been difficult because we need colors
in all kinds of places, then such shared styles or shared constants are a great way
and in general, I hope you get a feeling for how you compose user interfaces with built-in components
and with your own custom components that then build up on the built-in components and how you can therefore
build nice React Native applications.
We had a look at some core components and therefore I also want to give you a quick summary regarding
what you learned about these components here.
Probably the most important component is the view, which is a container which you wrap around other
components to then lay those components out or to add certain container styles, like shadows, borders,
background color, things like that. Pretty much
equally important is the text component which you use for outputting text.
You can also nest text into text where some style is even shared and you can in general control how
text should be output, if it should wrap itself which is the default or if it should only output one
or two lines
and that's where the text component really helps you output that valuable information to your users.
Now sometimes you don't just want to output information but also fetch information and for this, the
text input can be helpful.
Now we'll dive deeper into fetching user input later in the course but you already got a first look
at how you can style it and how you can configure it and how you can make sure you're getting the right
input and you're validating the input and you're really only working with the input you need. Now speaking
of user input, the button of course also is a crucial component,
be that the built-in button or your own button which you can build with the touchable components which
also are super important
and in cases where you need to output lists of data, you learned about FlatList and about scroll view
where the main difference is that FlatList is optimized for very long lists or lists where you don't
really know how long they will be but they potentially are very long,
whereas scroll view is great for any other scrollable content which isn't infinitely long, where you certainly
will go beyond the boundaries of the screen but it won't be too much extra content because if all that
extra content is rendered without it being used, without it being visible to the user, then you're wasting
performance
and that's where FlatList comes in
because that only renders what the user can really see.
Speaking of what the user can see, in this module, you also learned how to add your own custom fonts and
sometimes you don't need a font but an image, you also learned how to do that,
how to include both local or network images and how you can style these images to look good.
Speaking of styling, for this we're using the stylesheet which is not a component but a class or an object
provided by React Native
and the advantage of using this stylesheet is not only that you'll get your styles out of the jsx
code which you want to keep relatively lean and short and concise but that you also get automatic validation
of your styles and React Native tells you when you're using a style incorrectly and that in the future,
you might also get additional performance optimizations. And with that, we can only encourage you to keep
this section in mind,
maybe go through it a second time and use it as a basis for your further course progress where we will
use all these components we worked with, where we will write more styles, where we will build more complex
user interfaces and where you really will need these fundamentals you learned in the second and in this
course module to then build amazing React Native applications.
So let's move on.