So for this module, attached you find again a simple starting project.
There you have the app.js file with an empty view,
so not too much happening there.
You get a constants folder with a basic color which I set up for you and that's it.
Other than that, there is nothing interesting in here, it's a very basic application which we'll now
use to build this application which I just sketched out.
Now of course, you can absolutely go ahead and build the basics on your own,
so these three different screens which we in the end need or four different screens, one for all the places,
one for the place details, one for creating a new place and one for the full screen map which we also
want to show, you can absolutely do that and build the base skeleton for these screens on your own,
also set up the basic navigation because these are of course all things we already did multiple times
in this course.
It's also things I will start with in the next lectures in case you want to follow along there or
compare your solution to mine and thereafter, we'll dive into
the meat of this module, we'll dive into how to add native device capabilities. So let's get started
with the basics therefore.
I'll add a new folder screens with the four screens I want to have and that would be the places list
screen file, the place detail screen file, the new place screen file and also the map screen where we
can then see this full screen map and I'll populate them with content throughout this module
but these are the four basic screens which I'll need.
I'll also add a navigation folder so that we can setup navigation in there and here I'll set up my
PlacesNavigator.js file. Now in the starting project I provided, React navigation and all its dependencies
are already installed,
so if you're using that, you don't need to manually install it,
otherwise if you're using your own starting project, make sure you install React navigation with npm
install React navigation and also make sure you install these extra dependencies here to make sure that
React navigation works with expo.
So with that installed, now of course we can setup navigation here in the places navigator and for that,
in here I'll import from React navigation
and what I'll import is of course the stack navigator creation function,
so create stack navigator and also create app container which we also need to do because we'll need
to do both - create a stack navigator and set up the app container thereafter.
Now we also need to import the screens we want to work with and that would be the places list screen
which I'll import from the screens folder and there, it's the places list screen. We'll also need the
place detail screen of course, place detail screen which is imported from screens place detail
screen and also, obviously the other two screens.
So we got the new place screen from screens, new place screen and last but not least, we also need to import
our map screen here from the screens folder and then that would be the map screen.
Now we can set up our stack navigator here and I'll store this places navigator in a constant
and as you also learned it, we're now mapping identifiers to our screens,
so we got maybe the places identifier mapped to the places list screen, we got the place detail identifier
mapped to the place detail screen,
we also got the new place identifier mapped to the new place screen and last but not least, maybe map mapped
to map screen. And with that, we can set up some default navigation options here, so I'll pass in a second
argument and of course setting this up is totally optional but I'll add default nav options to every
screen therefore and I want to define my header style in here and make sure that there we're using a
background color depending on whether we're running on Android or not.
Hence I'll import this platform API thing from React Native and I will also need my color, so I'll also
import colors from Constants/colors, that's also required because with that, we can now check whether
the platform operating system is Android and if it is, we can make sure that the background color of the
header is our primary color,
otherwise I'll set no color, I want to use the default transparent look which iOS uses and here also
set up a header tint color for the text on there, again checking for the platform because if the platform
is Android since we have a a solid background, I'll set the tint color to white, for iOS I'll do the opposite,
there I'll set it to my primary color. Now that is it here, I have no custom fonts in this project, of
course you could add some if you want to. With this set up, we can export our app container which we therefore
need to create with create app container and pass in the places navigator here. Now that's navigation
set up,
of course in the app.js file we can now use that.
So here we should import the places navigator from the navigation folder, places navigator,
we don't need the view import here anymore therefore and we can just return places navigator. Since I'm not
loading any custom fonts, I also don't need to do this app loading stuff
we did in earlier or in other modules, here I can just return this right from the start.
Now in these screens here, in the places list screen, I'll import React from React,
I'll import couple of things from
React Native,
probably a view, a text and a stylesheet and then we can see if we need something else later from React
Native
and then set up the constant here, places list screen is a normal React component which receives
props and which the end returns some content,
here I'll just return a view with a text of places list screen,
so just some dummy content for now and also have the stylesheet set up here with Stylesheet.create
and ultimately, export the places list screen.
And this will be the base skeleton we can use for every view,
so I will drop it into every view and just adjust this name here.
So here we have the place detail screen which I want to use and then copy it also in the new place screen
and replace this name here in all three places
and last but not least, also drop this into the map screen to have that here as well
and then we'll of course add the real content throughout this module.
So that's the screens created,
if we now save that and you run this with npm start or with expo start and you run it on your favorite
emulator or emulators, once this finished building, we should see the places list screen in the end,
like this.
Now of course, we're not having a header title here, so let's make sure we do set one, also on Android
by going to the places list screen and in there, we can add places list screen navigation options and
set this to a static object here where we can add a header title of all places or something like that
and with that of course, once this reloads, we see that title here on the places list screen.
So that's the basic screen set up which we'll need for this module here. With that before we dive any
deeper into the content of the other screens,
let's actually make sure that we have a plus button here in the header as well which takes us to the
new place screen because that's then where we can get started with tapping into native device functionalities
and with adding places.
Now of course you know how to add a button to the header of your navigator, all you need to do is install
a new package with npm install --save and that's the react-navigation header-buttons
package which we used a couple of times throughout this course and I will use it in exactly the same way I
used it in the rest of the course.
So I'll create a components folder in which I can set up my own header button component to have that
preconfigured reusable button component and in that component, I import header button from this React
navigation header buttons package we just installed. Import Ionicons from expo/vector-icons,
a package which you might want to install in case you are getting errors here with npm install
--save and also import the colors constant from the constants folder and there, the colors file and
then here we have a regular component custom header button which receives props which return some
jsx and here I want to return the header button which we're importing but now we'll just configure
it to our requirements.
First of all by forwarding all props to it and then we can set the icon component to ionicon so that
this is used,
set the icon size here maybe to 23 because I think that worked quite well thus far and set the
color to
and now I'll need one other import, I'll need to import platform from React Native
because now I want to check the platform here
and if the platform is Android, we'll have a solid background, so then I want to use white as an icon color,
otherwise I use my primary colour.
Now with that, the only thing that's left to do is to export this custom header button here and now we
can start using it in the places list screen. In there
also as before, I import two other packages from react-navigation-header-buttons, two other things from
this package and that would be my header buttons and item, both needs to be imported and in addition,
we can also import our own custom header button now from the components folder and there from this header
button file which we just worked in. But with that imported, we can change our navigation options here
to be dynamic, where we have this function that gives us the nav data and which then eventually returns
this configuration object because this will then allow us to also bind the button to some function which
we receive via route params because here, I want to add header right to add my header buttons and
of course that's now also a pattern we did many times throughout this course, we added the header buttons
like this and have the item in there. On the header buttons component, we can set the header button component
and point at our custom header button component here and on the item, we now set a title, like add place and
we set an icon name here which depends on the platform,
so therefore I will actually import this platform API here from React Native and we can now check if platform
operating system is Android, if that's the case, then I want to set this to md add, otherwise to ios add
which adds a plus button for the specific platform,
so following the specific look of that platform. We also need to add the onPress function and there
if we tap on this, I simply want to navigate with the navigate method here and that's why we need to
have this dynamic function here, so that we get access to nav data and then navigation, navigate to
new place and new place here of course is my identifier in the places navigator of this new place screen.
So with that, we have a way of going to that screen and hence if we save this, we should be able to do
that.
Obviously I'm getting an error because in my header button component, since I have a React component
in there, importing React from React doesn't sound like the worst idea so let's quickly fix that here
in the header button component but now with that, as this reloads, we have this plus button and we can
go to the new places screen, to the new place screen, also here on Android of course.
Now on that new place screen, we can therefore also add navigation options to set a title, new place screen
navigation options, set it to some static object for the moment because we right now don't need this
to be a function, we don't need access to the nav data, we just need to set the header title to add place
and with that if we save it, obviously if we go there, we see that title in the header.
So this is this basic set up here,
now we can work on that add place screen to make sure that we can add a place.