We just created our first component and now we need to tell React Native that we want this component
to show up on the screen of our device until we do so we're going to continue to see the default content
of the home screen which is right here.
All right.
So to tell React Native that we want to show this component on the screen.
I'm going to go back to the apt James file that's inside of my root of my project directory.
So here's the update J.S. file right here inside of here you're going to see a little bit of existing
code this code right here is some code that I added into our starter project.
Remember I mentioned that I added in just a little bit of code.
This is pretty much it right here.
So you'll notice there's not a whole lot going on.
We'll talk about the great details of what's going on side of your over time.
But once again right now let's just try to get our new component to show up so to do so I'm going to
first import the component we just created underneath the second import statement that is already inside
of here right here and going to say import component screen from.
And then I'll list out a relative path to that file we've just created so by relative path I mean that
we need to essentially describe the path from our root project directory which is where the app dot
J.S. file is to the component screen file.
So I'll first put in dot slash which means look in the current working directory.
So look in the root project directory then go into the OR folder so write out dot s RC then go into
the screens folder and then finally find the component screen file inside there.
So components screen like so when we write out these import statements we are not required to put on
the path we're seeing in the extension of the file at the end of the path.
So we do not have to put on dot j ust like that okay.
So now component screen right here is a direct reference to the function back over here that we just
created.
It's now to make that component show up on the screen.
We're going to add it to this stack.
Navigator thing the stack Navigator is a little object that decides what content we're going to show
on the screen at any given point in time so we want to add in the component that we just created as
an additional option for this stack.
Navigator to show.
So to do so I'm going to find this first object right here and right after home screen I'll put in a
comma I'll then say components like so and components screen so we've now added in our new component
as a possible option for our stack navigator to show to the user in the second object right here.
You'll notice that there's an option called initial root name.
That's a description or a configuration option that tells this navigator thing what the first component
is that should be displayed.
Right now it's set to home which means that the stack navigator is going to find the home option right
here and show that component on the screen first.
So we're going to update that initial about name and tell it that we instead want to show this components
option.
So I will change home to capital C components make sure that components right here has the exact same
spelling as components right there.
If it's not the exact same you're going to end up seeing an error message.
Okay.
So I'll save this file and when I flip back over to my device I'll see the component we just put together
on the screen.
So I see the text.
This is the component screen and I see that both on Android and my IOW device as well.
You'll also notice that this text is kind of large and that's because back inside of our component screen
component remember we added in that font size of 30.
If we start to change that font size like let's say go to 50 or so you're going to see that text appear
much larger or if we go all the way down to 10 it's gonna be far smaller.
I'm going to leave it at thirty for now.
OK.
So we've now gone through the process of creating an entire rack component and then wiring it up to
this stack navigator thing inside of our app dot J.S. file.
It's now we can see some content on the screen.
Let's take a quick pause.
We're going to come back.
We're going to do a quick little summary to kind of fill in a couple blanks about all the code that
we just wrote.
So I'll see you in just a minute.