So I'll go to the product overview screen because before I add a navigator, I want to be able to at least
see something on that screen
and therefore here, we now need to import use selector from React Redux because that will allow us to
tap into the Redux store and get our products from there.
So here in the end what we can do is we can get our products and store them in a constant products by
calling use selector
and as you learned in the previous module about state management in Redux, use selector takes a function
which automatically receives the state, the Redux state as an input and which then returns whatever data
you want to get from there
and there in the Redux state,
I want to tap into my products slice and you have to use the name you use here in combined reducers
to get this state, the data managed with the products for the user.
So here I'll say state products and now in that slice of our state, I want to get available products,
so let's get .available products here
and this is this short arrow function syntax where the part on the right side of the arrow is automatically
returned.
So that's what's now stored in products and therefore here on the flat list,
we can of course set the data prop equal to our products here which we selected because that will be
an array and that's exactly what data needs.
I will also add the key extractor here, depending on the version of React Native you're using, you won't
need this because every product in our app has an ID and newer versions of flat list also look for
ID and not just for a key but in case you are working with an older version, then you need to set
up this key extractor function
and this takes a function which gives you the item it's looking at and you need to tell it what should
be your unique key on that item and of course that's item.id,
again, newer versions of React Native don't need that. Now with that, we also need to provide the render
item prop which points at a function that renders our different list items and in here, I'll start
simple and we'll refine this later and for the moment, I'll just import the text component from React
Native and output the title of the product in a text component.
So here, we get our item data and the return value of that function which we have to provide to render
item should return
a jsx element in the end.
So here I will return a text element and in there, output itemData.item.title and I can do this
because item data is received by React Native, this has an item prop, that's also something React Native
gives you and each item here of course is just one item in our products,
so therefore it is of this type of data and therefore it has a title prop of course because that is
what I'm assigning here,
so we will have a title prop here which I can output and of course, this is not the final form of how
a product should look like in the list but it is what I use to get started so that we see something
on the screen. With that, talking of the screen, it's of course time to set up the navigator so that we
can really see something on the screen and that we have screens.
Hence here in the navigation folder, I'll add my ShopNavigator.js file and in there, we'll add a
bunch of navigation throughout this module, so we'll definitely need to import from React navigation and
I will of course start simple with a normal stack navigator which we can create with the help of the
create stack navigator function and then we'll simply create it here and I'll name it the products
navigator,
that's what I store here,
the result of create stack navigator and the result is a React component if you remember and if you
also remember, create stack navigator takes a Javascript object as the first argument where we map screen
identifiers to React components that should be loaded as screens.
So here of course I will start with the products overview screen and I import that from the screens folder
and there from the shop part and there from the products overview screen file and therefore the first
thing I want to map in this stack
navigator here is products overview or however you want to name this, which is mapped to products
overview screen.
Now of course for this stack navigator which will eventually have multiple screens, I'll also pass a
second argument to create stack navigator which is an object that allows us to configure the entire navigator
and there we can for example set up default navigation options for every screen and there, I want to
set up my header background color and so on.
So here I'll set up a Javascript object where I can set the header style to another Javascript object
where we can set the background color to any color of your choice
and that's now where the constants folder will come into play, where I will add a colors.js file, where I
simply want to export a default Javascript object with a primary color and an accent color and you can
name these keys whatever you want
and now I selected some nice colors which I want to use here but you can use whichever color you want.
My primary color will be having us hex code of #c2185b and the accent color has a hex code of
#ffc107.
Now therefore back in the shop navigator, we can import from that constants folder, still from colors
which we find in the constants folder like this and then here, the background color
I'll set up for a header style here is colors.primary.
Now with that
added, I'll also add a header tint color which colors the title text for example and I'll set this to
white because this primary color which I set up is like a pretty strong pink-reddish color and therefore
white is the color we should use so that it's clearly readable and I actually want to differ regarding
how the header looks like based on the platform we're running on.
So it's time to import platform from React Native and one side note here, in this practice app, I will
actually not focus too much on platform differences and responsive design,
I will do it to a certain extent so that there is some basic difference between the different platforms
and that the app looks good on different device sizes
but I will not test it on a broad variety of device sizes.
You learned everything you need to make it as responsive as possible,
so definitely feel free to always tweak this more than I do it here in this module.
In the end I just want to make sure that this module doesn't take hundreds of hours,
so therefore I'll keep this to a minimum.
With that set, platform here seems to be important to me because I really want to have a different look
on the header based on whether we're running on iOS or Android.
So the background color is actually not always the primary color but instead I will only set this if
the operating system we're running on is Android,
otherwise I'll set background color to an empty string which means the default will be taken and therefore
for the header tint color,
this also should only be white
if we're on Android, otherwise I'll not set it to an empty string though but instead, I want to use the
primary color as a text color on iOS,
so if we're not on Android. With that, the products navigator is set up.
Now as you learned in the navigation module, you don't export this navigator,
instead you wrap this in an app container which you create with the create app container function you
get from React navigation.
So here we can now export default create app container and pass in the products navigator, like this.
This is now the export navigation set up
and this is what we can now use in app.js.
So in app.js, we can now import our shop navigator from
navigation, shop navigator and that's now what I use inside of my provider tags here,
so the shop navigator like this. This also means that we can get rid of these React Native imports
because we use none of these React Native components in this component anymore. With all that work, we
should now be able to actually run our app and hopefully, land on the products overview screen where
we see a basic unstyled list of product titles.
So if I save that now, save all these changes and you make sure that you have npm start running and you
have emulators up and running where you loaded this,
I get an error that object is not a constructor, evaluating new product default.
The problem should be that in my model folder here, I forgot to export my product class as a default.
That of course needs to be added here,
otherwise you can't import from this file,
makes sense.
So now this works and now indeed here,
I see my product titles.
We also see the different headers,
what we don't see is a header title because I haven't added any. Hence in the products overview screen,
we can of course add our special screen only navigation options which will be merged with the default
navigation options we set up directly on the navigator by using products overview screen, our constant
here which holds our component and adding the navigation options property
and here we can use static navigation options for the moment, add a header title and set this to all
products for example
and if we now save this, we see all products here in the header.
So this is now actually looking decent, we can see our products.
Of course these products do not really look the way they should look,
so the next step will be to make sure that here we actually do get the look we need in this application.