1 00:00:02,120 --> 00:00:07,100 So I'll go to the product overview screen because before I add a navigator, I want to be able to at least 2 00:00:07,100 --> 00:00:09,590 see something on that screen 3 00:00:09,590 --> 00:00:18,380 and therefore here, we now need to import use selector from React Redux because that will allow us to 4 00:00:18,380 --> 00:00:22,630 tap into the Redux store and get our products from there. 5 00:00:22,640 --> 00:00:28,790 So here in the end what we can do is we can get our products and store them in a constant products by 6 00:00:28,790 --> 00:00:30,800 calling use selector 7 00:00:30,800 --> 00:00:36,950 and as you learned in the previous module about state management in Redux, use selector takes a function 8 00:00:36,950 --> 00:00:44,060 which automatically receives the state, the Redux state as an input and which then returns whatever data 9 00:00:44,060 --> 00:00:45,470 you want to get from there 10 00:00:45,770 --> 00:00:47,360 and there in the Redux state, 11 00:00:47,360 --> 00:00:53,780 I want to tap into my products slice and you have to use the name you use here in combined reducers 12 00:00:53,990 --> 00:00:57,990 to get this state, the data managed with the products for the user. 13 00:00:58,010 --> 00:01:05,180 So here I'll say state products and now in that slice of our state, I want to get available products, 14 00:01:06,220 --> 00:01:10,270 so let's get .available products here 15 00:01:10,270 --> 00:01:15,460 and this is this short arrow function syntax where the part on the right side of the arrow is automatically 16 00:01:15,460 --> 00:01:17,020 returned. 17 00:01:17,020 --> 00:01:21,870 So that's what's now stored in products and therefore here on the flat list, 18 00:01:21,880 --> 00:01:28,870 we can of course set the data prop equal to our products here which we selected because that will be 19 00:01:28,870 --> 00:01:31,790 an array and that's exactly what data needs. 20 00:01:31,810 --> 00:01:36,730 I will also add the key extractor here, depending on the version of React Native you're using, you won't 21 00:01:36,790 --> 00:01:43,450 need this because every product in our app has an ID and newer versions of flat list also look for 22 00:01:43,450 --> 00:01:49,900 ID and not just for a key but in case you are working with an older version, then you need to set 23 00:01:49,900 --> 00:01:51,940 up this key extractor function 24 00:01:51,940 --> 00:01:56,230 and this takes a function which gives you the item it's looking at and you need to tell it what should 25 00:01:56,230 --> 00:02:00,100 be your unique key on that item and of course that's item.id, 26 00:02:00,160 --> 00:02:07,410 again, newer versions of React Native don't need that. Now with that, we also need to provide the render 27 00:02:07,410 --> 00:02:14,720 item prop which points at a function that renders our different list items and in here, I'll start 28 00:02:14,720 --> 00:02:21,650 simple and we'll refine this later and for the moment, I'll just import the text component from React 29 00:02:21,650 --> 00:02:25,590 Native and output the title of the product in a text component. 30 00:02:25,610 --> 00:02:31,580 So here, we get our item data and the return value of that function which we have to provide to render 31 00:02:31,580 --> 00:02:33,580 item should return 32 00:02:33,900 --> 00:02:35,780 a jsx element in the end. 33 00:02:35,810 --> 00:02:42,890 So here I will return a text element and in there, output itemData.item.title and I can do this 34 00:02:42,890 --> 00:02:48,680 because item data is received by React Native, this has an item prop, that's also something React Native 35 00:02:48,680 --> 00:02:53,000 gives you and each item here of course is just one item in our products, 36 00:02:53,000 --> 00:02:58,640 so therefore it is of this type of data and therefore it has a title prop of course because that is 37 00:02:58,640 --> 00:02:59,830 what I'm assigning here, 38 00:02:59,960 --> 00:03:05,300 so we will have a title prop here which I can output and of course, this is not the final form of how 39 00:03:05,300 --> 00:03:10,100 a product should look like in the list but it is what I use to get started so that we see something 40 00:03:10,100 --> 00:03:16,900 on the screen. With that, talking of the screen, it's of course time to set up the navigator so that we 41 00:03:16,900 --> 00:03:20,920 can really see something on the screen and that we have screens. 42 00:03:21,160 --> 00:03:28,240 Hence here in the navigation folder, I'll add my ShopNavigator.js file and in there, we'll add a 43 00:03:28,240 --> 00:03:36,020 bunch of navigation throughout this module, so we'll definitely need to import from React navigation and 44 00:03:36,050 --> 00:03:42,470 I will of course start simple with a normal stack navigator which we can create with the help of the 45 00:03:42,470 --> 00:03:48,740 create stack navigator function and then we'll simply create it here and I'll name it the products 46 00:03:48,860 --> 00:03:50,280 navigator, 47 00:03:50,420 --> 00:03:51,700 that's what I store here, 48 00:03:51,710 --> 00:03:57,320 the result of create stack navigator and the result is a React component if you remember and if you 49 00:03:57,320 --> 00:04:03,800 also remember, create stack navigator takes a Javascript object as the first argument where we map screen 50 00:04:03,860 --> 00:04:08,710 identifiers to React components that should be loaded as screens. 51 00:04:08,810 --> 00:04:16,040 So here of course I will start with the products overview screen and I import that from the screens folder 52 00:04:16,040 --> 00:04:23,930 and there from the shop part and there from the products overview screen file and therefore the first 53 00:04:24,020 --> 00:04:26,120 thing I want to map in this stack 54 00:04:26,120 --> 00:04:33,630 navigator here is products overview or however you want to name this, which is mapped to products 55 00:04:33,640 --> 00:04:34,800 overview screen. 56 00:04:34,790 --> 00:04:41,510 Now of course for this stack navigator which will eventually have multiple screens, I'll also pass a 57 00:04:41,510 --> 00:04:46,790 second argument to create stack navigator which is an object that allows us to configure the entire navigator 58 00:04:47,180 --> 00:04:52,550 and there we can for example set up default navigation options for every screen and there, I want to 59 00:04:52,550 --> 00:04:56,660 set up my header background color and so on. 60 00:04:57,350 --> 00:05:05,060 So here I'll set up a Javascript object where I can set the header style to another Javascript object 61 00:05:05,060 --> 00:05:09,620 where we can set the background color to any color of your choice 62 00:05:09,620 --> 00:05:16,000 and that's now where the constants folder will come into play, where I will add a colors.js file, where I 63 00:05:16,010 --> 00:05:23,330 simply want to export a default Javascript object with a primary color and an accent color and you can 64 00:05:23,330 --> 00:05:25,760 name these keys whatever you want 65 00:05:25,760 --> 00:05:30,730 and now I selected some nice colors which I want to use here but you can use whichever color you want. 66 00:05:30,920 --> 00:05:42,890 My primary color will be having us hex code of #c2185b and the accent color has a hex code of 67 00:05:42,890 --> 00:05:46,940 #ffc107. 68 00:05:47,130 --> 00:05:52,920 Now therefore back in the shop navigator, we can import from that constants folder, still from colors 69 00:05:54,020 --> 00:06:00,230 which we find in the constants folder like this and then here, the background color 70 00:06:00,230 --> 00:06:04,240 I'll set up for a header style here is colors.primary. 71 00:06:04,250 --> 00:06:07,470 Now with that 72 00:06:07,530 --> 00:06:15,630 added, I'll also add a header tint color which colors the title text for example and I'll set this to 73 00:06:16,470 --> 00:06:24,900 white because this primary color which I set up is like a pretty strong pink-reddish color and therefore 74 00:06:24,900 --> 00:06:33,080 white is the color we should use so that it's clearly readable and I actually want to differ regarding 75 00:06:33,080 --> 00:06:37,110 how the header looks like based on the platform we're running on. 76 00:06:37,160 --> 00:06:44,450 So it's time to import platform from React Native and one side note here, in this practice app, I will 77 00:06:44,450 --> 00:06:49,700 actually not focus too much on platform differences and responsive design, 78 00:06:49,700 --> 00:06:55,160 I will do it to a certain extent so that there is some basic difference between the different platforms 79 00:06:55,190 --> 00:06:58,580 and that the app looks good on different device sizes 80 00:06:58,790 --> 00:07:02,630 but I will not test it on a broad variety of device sizes. 81 00:07:02,660 --> 00:07:06,910 You learned everything you need to make it as responsive as possible, 82 00:07:06,980 --> 00:07:12,230 so definitely feel free to always tweak this more than I do it here in this module. 83 00:07:12,230 --> 00:07:16,710 In the end I just want to make sure that this module doesn't take hundreds of hours, 84 00:07:16,730 --> 00:07:19,250 so therefore I'll keep this to a minimum. 85 00:07:19,250 --> 00:07:24,080 With that set, platform here seems to be important to me because I really want to have a different look 86 00:07:24,440 --> 00:07:28,790 on the header based on whether we're running on iOS or Android. 87 00:07:28,790 --> 00:07:34,940 So the background color is actually not always the primary color but instead I will only set this if 88 00:07:34,940 --> 00:07:38,320 the operating system we're running on is Android, 89 00:07:38,360 --> 00:07:43,820 otherwise I'll set background color to an empty string which means the default will be taken and therefore 90 00:07:43,820 --> 00:07:45,540 for the header tint color, 91 00:07:45,570 --> 00:07:47,420 this also should only be white 92 00:07:47,450 --> 00:07:54,780 if we're on Android, otherwise I'll not set it to an empty string though but instead, I want to use the 93 00:07:54,780 --> 00:07:57,720 primary color as a text color on iOS, 94 00:07:57,720 --> 00:08:04,150 so if we're not on Android. With that, the products navigator is set up. 95 00:08:04,200 --> 00:08:09,240 Now as you learned in the navigation module, you don't export this navigator, 96 00:08:09,240 --> 00:08:14,940 instead you wrap this in an app container which you create with the create app container function you 97 00:08:14,940 --> 00:08:16,970 get from React navigation. 98 00:08:16,980 --> 00:08:24,510 So here we can now export default create app container and pass in the products navigator, like this. 99 00:08:24,510 --> 00:08:27,510 This is now the export navigation set up 100 00:08:27,630 --> 00:08:30,240 and this is what we can now use in app.js. 101 00:08:30,510 --> 00:08:37,260 So in app.js, we can now import our shop navigator from 102 00:08:39,770 --> 00:08:46,700 navigation, shop navigator and that's now what I use inside of my provider tags here, 103 00:08:46,700 --> 00:08:52,670 so the shop navigator like this. This also means that we can get rid of these React Native imports 104 00:08:52,700 --> 00:09:00,020 because we use none of these React Native components in this component anymore. With all that work, we 105 00:09:00,020 --> 00:09:07,130 should now be able to actually run our app and hopefully, land on the products overview screen where 106 00:09:07,130 --> 00:09:12,390 we see a basic unstyled list of product titles. 107 00:09:12,470 --> 00:09:17,840 So if I save that now, save all these changes and you make sure that you have npm start running and you 108 00:09:17,840 --> 00:09:20,520 have emulators up and running where you loaded this, 109 00:09:20,870 --> 00:09:26,980 I get an error that object is not a constructor, evaluating new product default. 110 00:09:26,980 --> 00:09:35,270 The problem should be that in my model folder here, I forgot to export my product class as a default. 111 00:09:35,300 --> 00:09:36,970 That of course needs to be added here, 112 00:09:36,980 --> 00:09:39,250 otherwise you can't import from this file, 113 00:09:39,290 --> 00:09:40,640 makes sense. 114 00:09:40,640 --> 00:09:42,670 So now this works and now indeed here, 115 00:09:42,740 --> 00:09:44,780 I see my product titles. 116 00:09:44,780 --> 00:09:46,420 We also see the different headers, 117 00:09:46,430 --> 00:09:51,500 what we don't see is a header title because I haven't added any. Hence in the products overview screen, 118 00:09:51,500 --> 00:09:57,770 we can of course add our special screen only navigation options which will be merged with the default 119 00:09:57,770 --> 00:10:04,490 navigation options we set up directly on the navigator by using products overview screen, our constant 120 00:10:04,490 --> 00:10:10,050 here which holds our component and adding the navigation options property 121 00:10:10,070 --> 00:10:17,870 and here we can use static navigation options for the moment, add a header title and set this to all 122 00:10:17,870 --> 00:10:19,630 products for example 123 00:10:19,810 --> 00:10:24,470 and if we now save this, we see all products here in the header. 124 00:10:24,680 --> 00:10:28,870 So this is now actually looking decent, we can see our products. 125 00:10:28,970 --> 00:10:32,720 Of course these products do not really look the way they should look, 126 00:10:32,720 --> 00:10:38,810 so the next step will be to make sure that here we actually do get the look we need in this application.