In this video we're gonna start to set up our stock navigator and our index screen and just so you know
we're going to eventually do the show screen create an edit but we're not going to worry about those
right away.
We're going to first just put together our stack navigator and the index screen and we're going to get
just these two things working with this blog post provider.
So we're not gonna worry about any other components.
We're just gonna put together the index screen to start once we get a better understanding of how this
blog post provider works then we're gonna come back and add in all those other screens to be honest
with you.
We're going to do kind of a series of re factors to get our blog post provider into a good spot.
We're going to first write out some kind of basic simple code to implement it.
We're going to point out a couple of issues and then eventually come back and add in some like really
interesting functionality that we can use to kind of use a very similar data handling approach on other
projects quite easily.
So in other words first we're gonna wire up our stock navigator and just the index screen.
So going to flip back over my code editor which is running this or open to this new application where's
my code editor.
There it is get some insight on my new project directory.
The blog directory inside of here I'm going to first open up my app dot J.S. file select everything
inside there and delete it all then create a S.R. C directory in there I'll make a screen's folder and
then inside the screens folder I'll make a new file called index screen dot J.S. so again the goal of
this component is to eventually show a list of blog posts our users as usual for right now we're just
gonna throw a little bit of boilerplate inside of here so I'll do an import react from react.
I'll get my view and text and style sheet around React Native I'll create my index screen Mr quote up
there let me fix that up and then inside my component I bet you can guess what we're gonna do next.
Let's place a view.
We'll put in a text Ovitz bits and text like index screen create that styles object
and do our export default index screen like so all right.
So just the usual stuff you're now we'll flip back over to our apt j ust file we're gonna import our
index screen we're gonna create a new stack navigator using react navigation and get some content to
show up so going to flip back over to abduct J.S. at the top I'm going to import create stack navigator
and create app container from react.
Navigation
then import my index screen that we just created that's going to come from source screens index screen
will then create our navigator so create stack navigator.
Remember this thing takes two arguments.
The first one is can be our route configuration object so we're gonna list out all the possible screens
that a user can navigate to.
Right now there's just one screen.
The next screen.
Going to call it index.
And I'll provide index screen and then we'll provide that second argument as well.
So the second argument is gonna be some configuration options specifically for our stack Navigator.
So gonna give the thing an initial root name.
Right now we only have one index or one root called index but we're going to eventually add in more
routes so we might as well add this option in right away and also do default navigation options.
Remember this is going to set the title inside of our header.
So going to provide a title and it's gonna have it say blogs for right now.
We haven't really touched navigation options so far inside this course but in this application we're
going to eventually start to investigate how we can customize navigation options depending upon what
screen we're looking at.
We're going to eventually do that in order to customize the title that we display inside the header
for every different screen in the mockup it just shows blog list but we're going to customize it a little
bit.
Okay.
So we've now create our navigator.
So now we can do our export default create app container and I'll pass in that navigator.
Like so let's save this and it looks like I've got a little typo somewhere I have an air around react
not to Ovation which is definitely not what I meant to import.
Yep looks like there's type right there.
So I'll do navigation instead I'll save it.
Now anytime that you start to make a little typo in imports sometimes react native really just doesn't
want to reload your application at all.
So let's see.
Yeah.
Okay.
Looks like it actually worked this time and it looks like my android device is struggling but will get
that working I'm going to assume it's just going to work on there eventually.
So I got my index screen visible and there's my title of blocks.
So at least somewhere to get started.
All right let's take a pause right here.
When we come back the next video we're gonna start to discuss why we need whereas it right here why
we need that blog post provider in exactly what it's going to do.
So quick pause and I'll see you in just a minute.