1 00:00:02,410 --> 00:00:07,070 So for this module, attached you find again a simple starting project. 2 00:00:07,090 --> 00:00:09,640 There you have the app.js file with an empty view, 3 00:00:09,790 --> 00:00:11,680 so not too much happening there. 4 00:00:11,770 --> 00:00:16,870 You get a constants folder with a basic color which I set up for you and that's it. 5 00:00:16,870 --> 00:00:21,010 Other than that, there is nothing interesting in here, it's a very basic application which we'll now 6 00:00:21,010 --> 00:00:25,320 use to build this application which I just sketched out. 7 00:00:25,420 --> 00:00:28,930 Now of course, you can absolutely go ahead and build the basics on your own, 8 00:00:28,930 --> 00:00:34,870 so these three different screens which we in the end need or four different screens, one for all the places, 9 00:00:34,870 --> 00:00:40,390 one for the place details, one for creating a new place and one for the full screen map which we also 10 00:00:40,390 --> 00:00:45,590 want to show, you can absolutely do that and build the base skeleton for these screens on your own, 11 00:00:45,590 --> 00:00:51,100 also set up the basic navigation because these are of course all things we already did multiple times 12 00:00:51,370 --> 00:00:52,600 in this course. 13 00:00:52,750 --> 00:00:57,310 It's also things I will start with in the next lectures in case you want to follow along there or 14 00:00:57,310 --> 00:01:01,000 compare your solution to mine and thereafter, we'll dive into 15 00:01:01,090 --> 00:01:09,150 the meat of this module, we'll dive into how to add native device capabilities. So let's get started 16 00:01:09,210 --> 00:01:10,510 with the basics therefore. 17 00:01:10,510 --> 00:01:17,080 I'll add a new folder screens with the four screens I want to have and that would be the places list 18 00:01:17,080 --> 00:01:28,360 screen file, the place detail screen file, the new place screen file and also the map screen where we 19 00:01:28,360 --> 00:01:33,770 can then see this full screen map and I'll populate them with content throughout this module 20 00:01:33,820 --> 00:01:36,970 but these are the four basic screens which I'll need. 21 00:01:36,970 --> 00:01:43,460 I'll also add a navigation folder so that we can setup navigation in there and here I'll set up my 22 00:01:43,470 --> 00:01:51,030 PlacesNavigator.js file. Now in the starting project I provided, React navigation and all its dependencies 23 00:01:51,450 --> 00:01:52,920 are already installed, 24 00:01:52,920 --> 00:01:56,720 so if you're using that, you don't need to manually install it, 25 00:01:58,260 --> 00:02:03,480 otherwise if you're using your own starting project, make sure you install React navigation with npm 26 00:02:03,480 --> 00:02:09,660 install React navigation and also make sure you install these extra dependencies here to make sure that 27 00:02:09,660 --> 00:02:12,280 React navigation works with expo. 28 00:02:12,330 --> 00:02:19,290 So with that installed, now of course we can setup navigation here in the places navigator and for that, 29 00:02:19,380 --> 00:02:24,150 in here I'll import from React navigation 30 00:02:26,730 --> 00:02:31,020 and what I'll import is of course the stack navigator creation function, 31 00:02:31,020 --> 00:02:37,110 so create stack navigator and also create app container which we also need to do because we'll need 32 00:02:37,110 --> 00:02:41,580 to do both - create a stack navigator and set up the app container thereafter. 33 00:02:41,580 --> 00:02:46,830 Now we also need to import the screens we want to work with and that would be the places list screen 34 00:02:47,070 --> 00:02:53,640 which I'll import from the screens folder and there, it's the places list screen. We'll also need the 35 00:02:53,640 --> 00:02:59,910 place detail screen of course, place detail screen which is imported from screens place detail 36 00:02:59,910 --> 00:03:02,850 screen and also, obviously the other two screens. 37 00:03:02,850 --> 00:03:12,800 So we got the new place screen from screens, new place screen and last but not least, we also need to import 38 00:03:12,830 --> 00:03:18,770 our map screen here from the screens folder and then that would be the map screen. 39 00:03:18,770 --> 00:03:26,800 Now we can set up our stack navigator here and I'll store this places navigator in a constant 40 00:03:26,990 --> 00:03:31,440 and as you also learned it, we're now mapping identifiers to our screens, 41 00:03:31,550 --> 00:03:38,720 so we got maybe the places identifier mapped to the places list screen, we got the place detail identifier 42 00:03:38,840 --> 00:03:41,180 mapped to the place detail screen, 43 00:03:41,180 --> 00:03:49,300 we also got the new place identifier mapped to the new place screen and last but not least, maybe map mapped 44 00:03:49,330 --> 00:03:57,040 to map screen. And with that, we can set up some default navigation options here, so I'll pass in a second 45 00:03:57,130 --> 00:04:02,680 argument and of course setting this up is totally optional but I'll add default nav options to every 46 00:04:02,680 --> 00:04:09,970 screen therefore and I want to define my header style in here and make sure that there we're using a 47 00:04:09,970 --> 00:04:14,010 background color depending on whether we're running on Android or not. 48 00:04:14,140 --> 00:04:21,880 Hence I'll import this platform API thing from React Native and I will also need my color, so I'll also 49 00:04:21,910 --> 00:04:30,790 import colors from Constants/colors, that's also required because with that, we can now check whether 50 00:04:30,790 --> 00:04:37,120 the platform operating system is Android and if it is, we can make sure that the background color of the 51 00:04:37,120 --> 00:04:39,400 header is our primary color, 52 00:04:39,580 --> 00:04:46,600 otherwise I'll set no color, I want to use the default transparent look which iOS uses and here also 53 00:04:46,600 --> 00:04:53,080 set up a header tint color for the text on there, again checking for the platform because if the platform 54 00:04:53,080 --> 00:04:59,560 is Android since we have a a solid background, I'll set the tint color to white, for iOS I'll do the opposite, 55 00:04:59,590 --> 00:05:06,520 there I'll set it to my primary color. Now that is it here, I have no custom fonts in this project, of 56 00:05:06,520 --> 00:05:12,790 course you could add some if you want to. With this set up, we can export our app container which we therefore 57 00:05:12,790 --> 00:05:21,230 need to create with create app container and pass in the places navigator here. Now that's navigation 58 00:05:21,230 --> 00:05:21,790 set up, 59 00:05:21,890 --> 00:05:24,620 of course in the app.js file we can now use that. 60 00:05:24,620 --> 00:05:32,200 So here we should import the places navigator from the navigation folder, places navigator, 61 00:05:32,240 --> 00:05:39,920 we don't need the view import here anymore therefore and we can just return places navigator. Since I'm not 62 00:05:39,920 --> 00:05:44,540 loading any custom fonts, I also don't need to do this app loading stuff 63 00:05:44,540 --> 00:05:49,610 we did in earlier or in other modules, here I can just return this right from the start. 64 00:05:51,500 --> 00:05:58,660 Now in these screens here, in the places list screen, I'll import React from React, 65 00:05:58,700 --> 00:06:01,190 I'll import couple of things from 66 00:06:01,220 --> 00:06:02,070 React Native, 67 00:06:02,120 --> 00:06:08,180 probably a view, a text and a stylesheet and then we can see if we need something else later from React 68 00:06:08,180 --> 00:06:08,570 Native 69 00:06:08,600 --> 00:06:15,740 and then set up the constant here, places list screen is a normal React component which receives 70 00:06:15,740 --> 00:06:19,550 props and which the end returns some content, 71 00:06:19,550 --> 00:06:24,330 here I'll just return a view with a text of places list screen, 72 00:06:24,590 --> 00:06:30,230 so just some dummy content for now and also have the stylesheet set up here with Stylesheet.create 73 00:06:31,190 --> 00:06:34,800 and ultimately, export the places list screen. 74 00:06:34,800 --> 00:06:37,420 And this will be the base skeleton we can use for every view, 75 00:06:37,430 --> 00:06:40,880 so I will drop it into every view and just adjust this name here. 76 00:06:40,880 --> 00:06:48,250 So here we have the place detail screen which I want to use and then copy it also in the new place screen 77 00:06:48,850 --> 00:06:52,720 and replace this name here in all three places 78 00:06:52,720 --> 00:06:58,300 and last but not least, also drop this into the map screen to have that here as well 79 00:06:58,300 --> 00:07:02,650 and then we'll of course add the real content throughout this module. 80 00:07:02,800 --> 00:07:05,530 So that's the screens created, 81 00:07:05,530 --> 00:07:12,190 if we now save that and you run this with npm start or with expo start and you run it on your favorite 82 00:07:12,220 --> 00:07:18,660 emulator or emulators, once this finished building, we should see the places list screen in the end, 83 00:07:18,990 --> 00:07:21,020 like this. 84 00:07:21,120 --> 00:07:26,790 Now of course, we're not having a header title here, so let's make sure we do set one, also on Android 85 00:07:27,180 --> 00:07:34,830 by going to the places list screen and in there, we can add places list screen navigation options and 86 00:07:34,830 --> 00:07:42,690 set this to a static object here where we can add a header title of all places or something like that 87 00:07:42,690 --> 00:07:47,840 and with that of course, once this reloads, we see that title here on the places list screen. 88 00:07:48,030 --> 00:07:55,260 So that's the basic screen set up which we'll need for this module here. With that before we dive any 89 00:07:55,260 --> 00:07:58,530 deeper into the content of the other screens, 90 00:07:58,650 --> 00:08:04,020 let's actually make sure that we have a plus button here in the header as well which takes us to the 91 00:08:04,020 --> 00:08:10,770 new place screen because that's then where we can get started with tapping into native device functionalities 92 00:08:10,770 --> 00:08:13,010 and with adding places. 93 00:08:13,090 --> 00:08:20,200 Now of course you know how to add a button to the header of your navigator, all you need to do is install 94 00:08:20,200 --> 00:08:27,040 a new package with npm install --save and that's the react-navigation header-buttons 95 00:08:27,040 --> 00:08:32,170 package which we used a couple of times throughout this course and I will use it in exactly the same way I 96 00:08:32,170 --> 00:08:33,790 used it in the rest of the course. 97 00:08:33,880 --> 00:08:39,880 So I'll create a components folder in which I can set up my own header button component to have that 98 00:08:40,000 --> 00:08:51,020 preconfigured reusable button component and in that component, I import header button from this React 99 00:08:51,080 --> 00:09:02,460 navigation header buttons package we just installed. Import Ionicons from expo/vector-icons, 100 00:09:02,510 --> 00:09:07,110 a package which you might want to install in case you are getting errors here with npm install 101 00:09:07,110 --> 00:09:18,840 --save and also import the colors constant from the constants folder and there, the colors file and 102 00:09:18,840 --> 00:09:24,870 then here we have a regular component custom header button which receives props which return some 103 00:09:24,880 --> 00:09:31,260 jsx and here I want to return the header button which we're importing but now we'll just configure 104 00:09:31,260 --> 00:09:32,750 it to our requirements. 105 00:09:33,000 --> 00:09:39,240 First of all by forwarding all props to it and then we can set the icon component to ionicon so that 106 00:09:39,270 --> 00:09:40,480 this is used, 107 00:09:40,590 --> 00:09:47,250 set the icon size here maybe to 23 because I think that worked quite well thus far and set the 108 00:09:47,250 --> 00:09:48,870 color to 109 00:09:48,870 --> 00:09:57,240 and now I'll need one other import, I'll need to import platform from React Native 110 00:09:57,600 --> 00:09:59,940 because now I want to check the platform here 111 00:10:01,560 --> 00:10:07,470 and if the platform is Android, we'll have a solid background, so then I want to use white as an icon color, 112 00:10:07,800 --> 00:10:10,680 otherwise I use my primary colour. 113 00:10:10,740 --> 00:10:16,080 Now with that, the only thing that's left to do is to export this custom header button here and now we 114 00:10:16,080 --> 00:10:20,600 can start using it in the places list screen. In there 115 00:10:20,610 --> 00:10:29,280 also as before, I import two other packages from react-navigation-header-buttons, two other things from 116 00:10:29,280 --> 00:10:36,480 this package and that would be my header buttons and item, both needs to be imported and in addition, 117 00:10:36,480 --> 00:10:42,810 we can also import our own custom header button now from the components folder and there from this header 118 00:10:42,810 --> 00:10:48,060 button file which we just worked in. But with that imported, we can change our navigation options here 119 00:10:48,060 --> 00:10:53,880 to be dynamic, where we have this function that gives us the nav data and which then eventually returns 120 00:10:54,270 --> 00:11:00,750 this configuration object because this will then allow us to also bind the button to some function which 121 00:11:00,750 --> 00:11:07,380 we receive via route params because here, I want to add header right to add my header buttons and 122 00:11:07,380 --> 00:11:12,540 of course that's now also a pattern we did many times throughout this course, we added the header buttons 123 00:11:12,540 --> 00:11:19,560 like this and have the item in there. On the header buttons component, we can set the header button component 124 00:11:19,590 --> 00:11:27,330 and point at our custom header button component here and on the item, we now set a title, like add place and 125 00:11:27,330 --> 00:11:31,930 we set an icon name here which depends on the platform, 126 00:11:32,010 --> 00:11:39,870 so therefore I will actually import this platform API here from React Native and we can now check if platform 127 00:11:39,960 --> 00:11:48,090 operating system is Android, if that's the case, then I want to set this to md add, otherwise to ios add 128 00:11:48,240 --> 00:11:52,560 which adds a plus button for the specific platform, 129 00:11:52,560 --> 00:11:58,290 so following the specific look of that platform. We also need to add the onPress function and there 130 00:11:58,290 --> 00:12:05,160 if we tap on this, I simply want to navigate with the navigate method here and that's why we need to 131 00:12:05,160 --> 00:12:11,310 have this dynamic function here, so that we get access to nav data and then navigation, navigate to 132 00:12:11,430 --> 00:12:19,990 new place and new place here of course is my identifier in the places navigator of this new place screen. 133 00:12:20,040 --> 00:12:24,780 So with that, we have a way of going to that screen and hence if we save this, we should be able to do 134 00:12:24,780 --> 00:12:25,960 that. 135 00:12:26,100 --> 00:12:32,800 Obviously I'm getting an error because in my header button component, since I have a React component 136 00:12:32,920 --> 00:12:38,680 in there, importing React from React doesn't sound like the worst idea so let's quickly fix that here 137 00:12:38,680 --> 00:12:45,290 in the header button component but now with that, as this reloads, we have this plus button and we can 138 00:12:45,290 --> 00:12:51,760 go to the new places screen, to the new place screen, also here on Android of course. 139 00:12:51,980 --> 00:12:57,680 Now on that new place screen, we can therefore also add navigation options to set a title, new place screen 140 00:12:58,070 --> 00:13:04,010 navigation options, set it to some static object for the moment because we right now don't need this 141 00:13:04,010 --> 00:13:11,210 to be a function, we don't need access to the nav data, we just need to set the header title to add place 142 00:13:11,930 --> 00:13:17,340 and with that if we save it, obviously if we go there, we see that title in the header. 143 00:13:17,540 --> 00:13:20,440 So this is this basic set up here, 144 00:13:20,570 --> 00:13:25,430 now we can work on that add place screen to make sure that we can add a place.