Hi and welcome back.
Now that we have worked on our Hello World application, I want to talk to you
a little bit about what this setup really means.
In every React native project file using which we're going to be displaying
anything on the screen, whether they're components or screens
themselves, such as the app screen itself, we're going to need to import react
from the React library because React Native is built on top of React.
When you import React from React in your
React Native project, you are essentially importing the core
react library, which provides the foundation for building
components and handling states in our application.
Without this import, we're not going to be
able to use any of the core React APIs for our React native project.
So this is a very important line.
Now, the second line here we import safe area view and text.
Well, Text probably tells you what it does.
It's used to display text on the screen,
but we don't really know what Safe Area View does.
So what happens if I just delete this?
Safe Area view, right?
Why do I have it in here in the first place?
If I do, that Android project looks fine,
but for iOS, you're going to see that the top bar
displaying the information is going to be totally discarded.
It's not going to be accounted for.
And Hello World Text is actually going to appear right inside the header,
behind the WiFi status and the carrier status of the phone, which is
not something that we want to let our user see.
So Safe Area View is a component that provides a way to render content
within the safe area boundaries of a device.
Safe Area View is especially important when designing mobile applications as it
ensures that your content is not obscured by device specific elements such as
the status bar, home indicator, or rounded borders.
When we use Safe Area View in our React Native project,
we can be sure that our application's content is displayed within the visible
portion of the device's screen, regardless of the device type or screen size.
And this helps to ensure that our app looks and functions correctly on all
devices without any awkward or unattractive visual elements.
So this is what we did right here
and that is why we used Safe Area View and Text components.
Right here we're going to go into how
to style these components and how to use more different components and essentially what
components are in React Native in the upcoming sections.
So thanks a lot for watching.
See you in the next video.