React Native Tutorial for Beginners – Getting Started

00:00:02 welcome to this video
00:00:03 great to have you on board in this video
00:00:06 i'll dive into
00:00:06 react native together with you i'll
00:00:09 explain what it is and we'll build a
00:00:11 simple application with it
00:00:13 where we can get our current location
00:00:16 and
00:00:16 share it with our users and see the
00:00:18 position of our users on a map
00:00:20 so that's pretty cool i think and it
00:00:22 will cover a lot of features react
00:00:23 native is all about
00:00:25 react native in case you weren't aware
00:00:27 is a library that builds up upon
00:00:30 react and javascript and allows you to
00:00:32 build native mobile apps
00:00:34 so apps for ios and android that
00:00:38 use react and javascript for you during
00:00:40 the build process during development
00:00:42 but then are real native apps that you
00:00:44 distribute over the app stores
00:00:47 that run natively on these devices so
00:00:49 let's have a look at how all of that
00:00:51 works and how we can get started
00:00:57 before we install anything and write any
00:00:59 code let's understand
00:01:00 what react native is there's just one
00:01:03 sentence you'll read from time to time
00:01:05 when you come across react native it's
00:01:08 learn once right everywhere that's kind
00:01:11 of the theme
00:01:12 of react native as i said at the intro
00:01:15 of this video
00:01:16 react native builds up upon react and
00:01:18 javascript
00:01:19 hence we can use our javascript and
00:01:21 react knowledge
00:01:22 to build mobile apps which of course
00:01:25 sounds awesome
00:01:27 with react native we build apps that we
00:01:30 still tailor for ios or android but we
00:01:32 don't have to write any java or swift
00:01:35 code
00:01:36 and we learn the technology once to then
00:01:39 write apps for
00:01:40 ios and android what react native don't
00:01:42 is
00:01:43 it's not an app which provides you with
00:01:46 a component library of pre-styled
00:01:48 components that look like material
00:01:50 design on android
00:01:51 and ios design on ios it instead gives
00:01:54 you core
00:01:55 building blocks which you can take which
00:01:58 you then have to style and compose
00:02:00 on your own but you will see this in
00:02:02 this video
00:02:03 the idea behind react native of course
00:02:05 still is that we write
00:02:07 real mobile apps and i want to emphasize
00:02:09 that
00:02:10 real native apps not wrapped in some
00:02:12 webview or anything like that
00:02:13 with javascript and react anti-react
00:02:16 native library
00:02:17 which gives us a lot of utilities
00:02:19 helpers and a couple of other things you
00:02:21 will see in this video
00:02:23 so what is a react native app and maybe
00:02:26 more importantly
00:02:27 what is it not when you build an app
00:02:29 with react native you're not building a
00:02:31 web page running in the browser
00:02:33 on your mobile device that's not the
00:02:35 case you're not building a web page
00:02:38 you're also not building a web app
00:02:39 that's hosted in a web view
00:02:41 like it would be the case for ionic or
00:02:43 cordova apps
00:02:44 there you typically or you build a web
00:02:47 app with css html and javascript
00:02:50 and then cordova gives you a wrapper
00:02:53 that
00:02:53 will lead to a native app being created
00:02:56 that is distributed over the app stores
00:02:58 but that rapper just wraps your web page
00:03:02 so to say
00:03:03 so you got a native app but don't really
00:03:05 have native code under the hood
00:03:07 and that can lead to performance uh
00:03:10 issues or at least to worse performance
00:03:12 than for native apps the big advantage
00:03:14 of course is
00:03:15 that you got all the web stack
00:03:18 technologies at your disposal
00:03:19 and you build your native app just as
00:03:21 you build a web app
00:03:22 for react native it's different there we

00:03:24 have a real native app
00:03:26 because all the ui is going to get
00:03:28 compiled
00:03:29 to native code that's really important
00:03:32 we're going to get a native app out of
00:03:34 that
00:03:35 the javascript part is going to stay
00:03:37 javascript but all of the ui elements
00:03:39 the buttons and so on will be the native
00:03:42 equivalents depending on which platform
00:03:44 we're running on
00:03:45 that gives us better performance but it
00:03:47 also makes the development a bit harder
00:03:49 because we're not really working with
00:03:50 just html css and javascript
00:03:53 to be precise we won't work with css at
00:03:56 all it's not supported
00:03:57 we won't work with traditional html
00:04:00 elements at all it's not in there you
00:04:02 will see what we got instead
00:04:03 and we can use javascript but only the
00:04:05 features that are supported
00:04:07 by the environment react native gives us
00:04:09 now i'll come back to all these things
00:04:10 throughout the video though
00:04:12 so why don't we just get started and
00:04:14 build our first react native app
00:04:17 to get started with building react
00:04:18 native apps i recommend you official
00:04:20 docs to which you can find a link in the
00:04:22 video description
00:04:23 there's a getting started page and for
00:04:25 now we'll go with the quick start
00:04:26 they will soon go into a more elaborate
00:04:29 project setup but let's start with the
00:04:30 quick start
00:04:31 now there you see one instruction one
00:04:34 installation command
00:04:35 that might look familiar to you if
00:04:37 you've worked with react
00:04:39 for react projects so not react native
00:04:42 just react
00:04:43 there is a package called create react
00:04:45 app
00:04:46 which makes it easy to get started with
00:04:48 react projects and gives you a nice
00:04:50 project with a nice build workflow out
00:04:52 of the box
00:04:54 now there's an equivalent for create for
00:04:56 react native it's called create
00:04:58 react native app and we can't just copy
00:05:00 that command to install that
00:05:01 tool on our machine now on mac and linux
00:05:05 you probably need to add sudo in front
00:05:07 of it to get the right permissions
00:05:09 and then you're prompted to enter your
00:05:11 password and now this will install this
00:05:14 package globally on your machine once
00:05:17 this is done
00:05:18 you can create a new project by running
00:05:20 create react native app as a command
00:05:22 so here i navigate it into the folder
00:05:24 where i want to create my project
00:05:26 and then i'll name it share
00:05:30 places you can choose any name you want
00:05:34 this will create a new folder and
00:05:35 install all the required dependencies
00:05:38 here you can see it's using yarn and
00:05:40 alternative to npm which i got installed
00:05:42 check it out if you're facing any issues
00:05:44 with npm and that setup process
00:05:46 also make sure to not use npm version 5
00:05:49 at least at the point i'm recording this
00:05:51 it's buggy use version 4 instead
00:05:54 and once all of that is finished we
00:05:56 actually can start
00:05:57 our app already we can navigate into the
00:06:00 newly created folder
00:06:02 and run npm start now this will
00:06:05 build the project and spin up a
00:06:07 development server so that's pretty cool
00:06:09 you still get these web development like
00:06:11 features
00:06:12 where your native app will actually
00:06:14 connect to that development server to
00:06:16 get live updates and so on
00:06:18 and now you can do something cool you
00:06:20 can visit
00:06:21 the app store on your real smartphone
00:06:24 the real device you own
00:06:26 and search for a app named expo expo
00:06:29 client is the exact name
00:06:31 and if you got it you can open it and
00:06:33 scan that qr code you should see here
00:06:36 and this will connect your development
00:06:38 server and launch your app
00:06:40 on your real device though and that's
00:06:42 important
00:06:43 only in a wrapper it doesn't really
00:06:45 install it on your device it just wraps

00:06:47 your app
00:06:48 that's also why i won't use this
00:06:50 approach here because whilst it's nice
00:06:52 to see something quickly on the phone
00:06:54 if you want to dig into native features
00:06:57 of your app so you want to use some
00:06:58 native features like maps and so on
00:07:01 you can face difficulties with this
00:07:02 wrapper and if you ever want to
00:07:04 publish your app and build it for the
00:07:06 app stores
00:07:07 you need to leave this process here so
00:07:10 therefore
00:07:11 i will quit this process and run npm run
00:07:14 eject which is a command
00:07:16 that gets out of that wrapped world here
00:07:19 and gives us access to the full workflow
00:07:22 to the real native app and to the
00:07:24 full capabilities of react native so to
00:07:26 say though i will say this expo approach
00:07:28 is great
00:07:29 and you can build apps with that too but
00:07:31 i like the raw
00:07:32 the original approach so i'll run npm
00:07:35 run eject
00:07:36 i'll choose a react native project which
00:07:37 i want to create
00:07:39 give it a name as it should appear on
00:07:41 the user device
00:07:42 screens share places maybe
00:07:46 and then android and xcode studio
00:07:48 project name because you can open that
00:07:50 project in
00:07:51 android studio and xcode which are the
00:07:53 ides for developing native apps
00:07:55 and you will need to do this especially
00:07:58 for xcode if you add certain libraries
00:08:00 that hook
00:08:01 into real native device features now
00:08:03 with that
00:08:04 we got this running by the way if you
00:08:07 ever during npm start encounter an error
00:08:11 there should be all the two commands you
00:08:13 can copy in to fix that error
00:08:15 immediately
00:08:16 so make sure to run these commands in
00:08:17 that case
00:08:19 so with that we got this working now it
00:08:22 would be nice to see it in a code editor
00:08:24 so let's open the project
00:08:26 in one and here i opened it in visual
00:08:30 studio code
00:08:31 you could also use webstorm adam or
00:08:33 sublime whatever you like
00:08:34 now in there you'll see this expo folder
00:08:37 with some configuration
00:08:39 more importantly android and ios these
00:08:42 folders
00:08:42 hold the actual config files and builds
00:08:45 off the native apps so don't delete them
00:08:48 in these files you also find a project
00:08:50 you can open with
00:08:51 android studio open the full folder or
00:08:54 ios
00:08:54 open the dot xcode project file we got
00:08:58 node modules which holds all the
00:08:59 dependencies of our javascript project
00:09:02 and then a couple of config files and
00:09:04 then there are two important files
00:09:06 index.js kicks off our app by calling
00:09:09 this
00:09:09 strange app registry here in the end and
00:09:12 there it registers a functions
00:09:14 a function that returns our app
00:09:16 component
00:09:17 and that app component can be found in
00:09:19 the app.js file and
00:09:21 it's a normal react component we import
00:09:24 react the normal react we also use in
00:09:26 web projects
00:09:27 we create a component by extending react
00:09:30 component
00:09:30 we have a render method we export that
00:09:33 component
00:09:34 and in the render method we render some
00:09:36 jsx though and that's important
00:09:38 you won't see a div a span a h1 tag
00:09:42 anything like that here because and this
00:09:45 is the most important takeaway
00:09:47 you should take away from this video
00:09:49 react native
00:09:51 doesn't work with the normal html
00:09:53 elements it doesn't work with the normal
00:09:55 dom it doesn't work with the normal css
00:09:58 it doesn't even work with the same
00:09:59 javascript support as in the browser
00:10:02 all of that is given to you by react
00:10:04 native and css isn't given to you
00:10:06 at all so instead of the normal dom
00:10:09 elements like a diff a span

00:10:10 h1 and so on you use a couple of
00:10:13 components
00:10:14 provided by react native which we
00:10:15 therefore import from the react native
00:10:17 package
00:10:18 like the view which essentially is your
00:10:20 div replacement
00:10:22 and the text which would be your
00:10:23 paragraph or a span replacement
00:10:26 and you can find a full list of all the
00:10:27 components on the official docs
00:10:29 if you scroll down you will find a
00:10:31 components section
00:10:33 with all the components that are built
00:10:35 into react native
00:10:36 and you will see that these aren't too
00:10:38 many because react native is a lot about
00:10:41 you
00:10:41 building your own interfaces it gives
00:10:43 you some core building blocks
00:10:45 but you have to build your app on your
00:10:47 own and for a lot of features
00:10:49 like later when we add a map we will
00:10:51 also have to
00:10:52 go to a third party package to get that
00:10:55 functionality
00:10:56 because react native really only gives
00:10:57 you the core to work with
00:11:00 so this is our code important maybe that
00:11:03 style sheet
00:11:04 thing here at the bottom now i mentioned
00:11:06 that css
00:11:07 isn't part of react native apps it's not
00:11:09 supported
00:11:10 this syntax here might look like css but
00:11:13 it's just javascript
00:11:14 and react native gives you this
00:11:16 stylesheet object to create
00:11:18 optimized javascript objects that
00:11:20 basically allow you to define
00:11:22 classes like this property here which
00:11:25 then hold a couple of properties
00:11:27 which you then can assign to components
00:11:30 now again this is not css it just
00:11:32 emulates css
00:11:34 and it doesn't support all css features
00:11:36 for a list of the supported features
00:11:38 also check the video description there
00:11:40 is a cheat sheet to be found there
00:11:42 so this is our component
00:11:46 this is how it works now let's view it
00:11:48 and i want to view it on a simulator
00:11:51 now you can also go back to the official
00:11:53 docs and on the getting started guide if
00:11:55 you click on building projects with
00:11:57 native code
00:11:58 you can choose your operating system and
00:12:00 for which operating system you want to
00:12:01 build
00:12:02 and then you can find detailed
00:12:03 instructions on how to set everything up
00:12:05 there
00:12:06 important if you want to build for ios
00:12:08 on windows
00:12:09 that unfortunately won't work that's not
00:12:12 permitted by apple basically
00:12:14 you need xcode to build an ios app and
00:12:16 xcode doesn't run
00:12:17 on windows other combinations like
00:12:20 android for windows and so on are
00:12:22 possible
00:12:22 so you will find installation
00:12:24 instructions there like for how to
00:12:26 install
00:12:27 android on windows make sure to follow
00:12:29 through all these steps here at the
00:12:30 bottom install
00:12:31 android studio install the sdk maybe not
00:12:34 the latest version but the one before
00:12:36 that the latest version often isn't
00:12:38 supported
00:12:39 install the android device manager the
00:12:42 build support library and so on make
00:12:46 sure to also set
00:12:47 your environment variables as described
00:12:49 here so basically follow to through the
00:12:51 full process here
00:12:53 and once you did that open android
00:12:55 studio
00:12:56 and create a new virtual device there
00:12:59 you can also find instructions on how to
00:13:00 do that here preparing a virtual device
00:13:03 here you find screenshots and so on and
00:13:05 in the end you just launch it by
00:13:06 clicking the play button
00:13:08 once all of that is done you can go into
00:13:10 your project
00:13:11 open the terminal that's the normal
00:13:13 terminal just integrated into my ide
00:13:16 and run npm run android and the same of

00:13:18 course for ios once you set everything
00:13:20 up there
00:13:21 this will open this terminal window
00:13:24 where a process starts
00:13:25 that's your development server don't
00:13:27 quit this it's important to get live
00:13:30 updates and for your app to continue
00:13:31 running
00:13:32 in development mode this run android
00:13:35 process here will build your project now
00:13:37 thereafter it will fill the finish and
00:13:38 not keep running so the development
00:13:40 server is the only thing that keeps
00:13:41 running
00:13:42 and this will now build the project and
00:13:45 bundle it and ship it to the simulator
00:13:47 and then also start it there so once
00:13:50 this is done the app should start up on
00:13:52 that simulator which i started
00:13:54 here it is coming needs to connect to
00:13:56 the server now it's building on the
00:13:58 server
00:13:59 and once that is done once we reach 100
00:14:02 here
00:14:03 we should see our app run here on the
00:14:06 left and here it is
00:14:07 that's the text you see in app.js
00:14:10 now let's quickly confirm this by adding
00:14:12 our own text here we say
00:14:14 it works maybe
00:14:18 like this let's save that and now to get
00:14:21 live updates
00:14:22 press command m on mac and control
00:14:25 m on windows and then click enable live
00:14:28 reload
00:14:28 or even even hot reloading if you want
00:14:31 you can also manually reload here or do
00:14:33 that by pressing
00:14:34 r twice like this and you should see
00:14:38 your updated app here now that's really
00:14:40 great
00:14:41 of course we don't just want to see some
00:14:43 text here we want to get the user
00:14:45 location
00:14:46 and also then share it with other users
00:14:48 display it on a map
00:14:49 and so on now to achieve that
00:14:52 we need to have a button and i will
00:14:55 create my own component for this so i'll
00:14:57 create a new folder which i named
00:14:58 components
00:15:00 you could also place this in a subfolder
00:15:02 with your name source
00:15:03 if you want and in that folder i will
00:15:06 add my
00:15:07 fetch location component
00:15:11 it'll be a very simple one but i want to
00:15:12 show you that you can and that you will
00:15:14 build your own components and react
00:15:16 native apps
00:15:17 now here i first of all will import
00:15:20 react
00:15:21 from react so not react native just
00:15:23 react
00:15:24 and then create a constant fetch
00:15:26 location
00:15:27 which gets props and returns a function
00:15:30 body so that's just a functional
00:15:31 component i'm creating here
00:15:33 and i'll export fetch location as the
00:15:36 default of this file
00:15:38 and in there i will return some jsx in
00:15:41 my function
00:15:42 now here i want to return a button and
00:15:44 therefore it is of course a very simple
00:15:46 component
00:15:47 does it make sense to just wrap a button
00:15:49 maybe we'll do it here
00:15:51 so i'll import my button
00:15:55 from react native and then
00:15:59 i can simply add it here button as a
00:16:02 self-closing tag that's important
00:16:03 it needs a title property to know which
00:16:06 text to display here i'll write
00:16:08 get location and then it needs to on
00:16:11 press handler
00:16:12 now in react for web projects you would
00:16:14 have on click here
00:16:16 to react to clicks now it's just on
00:16:18 press here to react to user
00:16:20 touch events to press events
00:16:23 and there i don't want to handle this
00:16:26 event in this file
00:16:27 i'll instead call some method i expect
00:16:30 to get wire props
00:16:32 so here i'll call on
00:16:37 get location maybe so i need to set up
00:16:40 prop
00:16:41 on the component when i use it and then
00:16:43 hook it up to a method there

00:16:45 so let's use fetch location in app.js
00:16:48 there i will import fetch location with
00:16:51 a capital f as it's the convention for
00:16:53 custom components from dot slash
00:16:56 components
00:16:57 fetch location and then instead my text
00:17:00 here
00:17:01 instead of that i'll import i'll add
00:17:04 fetch location
00:17:05 and now important we need to set it on
00:17:08 get location prop on that
00:17:10 so on get location prop should now refer
00:17:13 to a method that then gets executed
00:17:16 so above the render method i'll add a
00:17:18 new method
00:17:20 get user location handler maybe
00:17:23 i'll use this syntax where i assign an
00:17:26 arrow function to a property to make
00:17:28 sure that
00:17:28 this always refers to my class and then
00:17:31 here i'll bind
00:17:32 this get user location as a handler
00:17:35 now if we save that we
00:17:38 reload it should live reload not sure
00:17:40 where it's not doing that but
00:17:42 anyways if we save that we should see
00:17:45 that button
00:17:46 now that button alone won't do much
00:17:48 right now let's now simply log something
00:17:50 to the console
00:17:53 pressed the button the question just is
00:17:56 how do we see the console now we're not
00:17:59 in a browser
00:18:00 well the cool thing is if you open the
00:18:02 developer tools you can debug javascript
00:18:04 remotely
00:18:05 this will open up a new browser tab it
00:18:08 should do so at least
00:18:10 here i position it next to my simulator
00:18:13 and there you can open the developer
00:18:14 tools and now you will see the console
00:18:16 log from your device
00:18:18 here which of course is cool for
00:18:20 debugging there's of course more you can
00:18:22 do with debugging
00:18:23 and you'll find more information on that
00:18:24 as well as on react network in general
00:18:26 in my udemy course which you'll find
00:18:28 i'll link in the video description
00:18:30 but for now let's keep it as it is here
00:18:32 and now of course i don't want to log
00:18:33 here i want to get the user location
00:18:35 right
00:18:36 to get that location we need to call
00:18:39 some method problem
00:18:40 or probably and here react native
00:18:42 actually exposes
00:18:44 a web api to us if we have a look at the
00:18:48 official react native docs
00:18:50 you will see that under guides
00:18:54 there is this javascript environment
00:18:56 point and there you
00:18:57 find information about all the features
00:19:00 javascript
00:19:00 all the javascript features you can use
00:19:02 in your react native app
00:19:04 because it's not running in the browser
00:19:05 so you can't use the same features
00:19:07 as in let's say the latest version of
00:19:09 chrome instead it runs in a javascript
00:19:11 environment
00:19:12 spun up by react native so react native
00:19:14 decides which features you can use
00:19:16 here you can find that information and
00:19:18 here you will find
00:19:19 that there is a navigator geolocation
00:19:22 object you can access
00:19:23 it's the same object you can use in the
00:19:24 browser to get the user location
00:19:27 so here we can use navigator geolocation
00:19:30 and then call get current position this
00:19:33 method expects two arguments
00:19:35 the first one is a callback function
00:19:38 here i'll use an arrow function
00:19:39 where i get the user position so i'll
00:19:42 log this to the console
00:19:44 and the second argument is a arrow
00:19:47 function in case
00:19:48 we got some well error now if we save
00:19:51 this and we go back to our application
00:19:54 and we reload the app and click that
00:19:55 button the app actually crashes
00:19:59 now this happens because we don't have
00:20:01 the permission to get the user
00:20:04 position and if we don't even tell our
00:20:08 app that we will eventually need this
00:20:10 permission
00:20:10 it will just crash so what you can and
00:20:14 should do is
00:20:16 access the documentation on navigate

00:20:18 navigator geolocation here in the react
00:20:20 native docs and there you see how to set
00:20:22 up the permissions on ios
00:20:24 where you will basically need to edit
00:20:26 the info pls file
00:20:28 and on android where you need to copy
00:20:29 that entry here this element is
00:20:31 users permissions element to your
00:20:34 android
00:20:35 manifest so here you can access the
00:20:38 android folder
00:20:39 go to the app go to source and then to
00:20:42 android manifest
00:20:44 and there you see two permission entries
00:20:46 and you can copy that
00:20:48 one into there and you see we try to
00:20:50 access the
00:20:51 user location here in the end now with
00:20:53 that entry
00:20:54 we basically make android aware
00:20:58 of that permission which our app
00:20:59 eventually needs and it would show that
00:21:01 permission
00:21:02 when we installed it for the app store
00:21:04 so now with that added
00:21:06 if we reload the app it will still crash
00:21:10 because what we will need to do here
00:21:12 after we edited the manifest
00:21:14 rerun run android this will trigger a
00:21:18 full rebuild
00:21:19 which we need here to ensure that our
00:21:21 new android manifest
00:21:23 is taken into account so let's
00:21:26 make sure this happens this will install
00:21:28 a new version of the app
00:21:30 and thereafter you can see i click this
00:21:32 and i get objects being printed here on
00:21:34 the right
00:21:34 and these by the way are not my real
00:21:36 coordinates now
00:21:38 it might still fail at this point and
00:21:40 give you some error saying that it timed
00:21:42 out
00:21:42 in this case you should go to the
00:21:44 settings of your simulator by clicking
00:21:45 the three dots here
00:21:47 and then to location and send a location
00:21:51 to the simulator
00:21:52 and also try going to settings and
00:21:54 disable use detected adb location
00:21:57 and turn it back on also
00:22:00 waiting for just a minute or so
00:22:02 sometimes resolves the issue and
00:22:03 thereafter you should be able
00:22:05 to get a user location here
00:22:08 now with that we have a location we want
00:22:12 to display it on a map
00:22:13 right so we need a map now there is no
00:22:16 map built into react native
00:22:17 if we have a look at the official docs
00:22:19 and we scroll down to the components
00:22:21 you at least at the point of time
00:22:22 recording this won't find a map here
00:22:26 so we need a map and there is a third
00:22:28 party library we can use
00:22:30 if you google for react native maps you
00:22:32 will find this library
00:22:34 maintained by airbnb
00:22:37 airbnb uses react native and their app
00:22:40 and they basically built this library
00:22:42 which wraps the google maps and apple
00:22:45 maps
00:22:46 sdks and gives you components you can
00:22:49 use in your react native app
00:22:51 and these components really will hook
00:22:53 into the native code and give you access
00:22:54 to the native code features
00:22:56 though for you with a nice javascript
00:22:58 interface
00:23:00 you should visit the installation
00:23:01 instructions the first time you are here
00:23:03 and there you see that first of all we
00:23:05 install it like any other javascript
00:23:07 library with npm install
00:23:09 so let's do that let's run this command
00:23:11 in our terminal
00:23:12 in our project and this will download
00:23:15 react native maps
00:23:16 and add it to the node modules folder
00:23:18 now
00:23:19 once this completes we can also have a
00:23:21 look at the next steps
00:23:23 because since this library will actually
00:23:25 hook into native device features
00:23:27 using the native maps sdks we need to
00:23:30 link it to our apps you can do that
00:23:33 automatically with this command
00:23:34 though for this to work you first of all
00:23:36 need to run npm install
00:23:39 g react native to have this tool

00:23:41 available globally on your machine
00:23:43 but i will show you the manual linking
00:23:45 way here are the
00:23:47 explanations for ios i recommend the
00:23:49 last way option free
00:23:51 and the steps here should be really
00:23:53 clear on how to do this in xcode
00:23:55 for android we follow these steps and
00:23:58 there first of all
00:23:59 we take that code here and compile
00:24:03 our project our react native maps
00:24:06 project
00:24:07 now for that you need google play
00:24:08 services installed so make sure you
00:24:10 check
00:24:10 this in your sdk manager in your android
00:24:13 studio
00:24:14 and then just go to your android folder
00:24:17 there to the app folder and there to the
00:24:19 build gradle file
00:24:20 and important there is another build
00:24:22 gradle file one
00:24:24 level above that don't go in there go
00:24:26 into the one
00:24:27 in the app folder then if you scroll
00:24:29 down you will find a dependencies
00:24:31 object this one and there simply add
00:24:35 this new entry compile project create
00:24:37 native app maps the next step is
00:24:41 that we copy these two lines here and go
00:24:43 to android settings gradle
00:24:46 so now this is directly in the android
00:24:47 folder this file
00:24:49 and just paste them in at the end of
00:24:51 that file you may close that file
00:24:53 thereafter
00:24:54 next you need a maps api key that's
00:24:57 important you're going to use the google
00:24:58 maps
00:24:59 api behind the scenes and to be able to
00:25:02 use it you need a key
00:25:04 now you can follow the link you see here
00:25:07 this should take you to the google api
00:25:09 console you need to be logged in for
00:25:10 that
00:25:11 there you should then choose a project
00:25:12 here at the drop down at the top
00:25:14 and then you can generate new
00:25:16 credentials a new api key now here i
00:25:18 already got one so i'll just copy that
00:25:21 you will now need to add a new entry to
00:25:24 the application element
00:25:26 in your android manifest xml file so
00:25:29 let's go back to our project
00:25:31 app source android manifest and here in
00:25:34 application
00:25:35 i'll temporarily store my key and then
00:25:39 copy that metadata item
00:25:40 don't overwrite the full application
00:25:42 just add this item
00:25:45 here and then take your key and replace
00:25:48 your google maps api key with that
00:25:51 don't replace this here this has to stay
00:25:53 as it is
00:25:54 just the other part with that let's
00:25:56 close that
00:25:57 and now there's one additional thing we
00:25:59 need to do besides ensuring that we have
00:26:00 google play services installed
00:26:03 go down a little bit further and take
00:26:05 this import here
00:26:07 and now go to the java folder
00:26:10 in app source main java
00:26:13 to main application and add this import
00:26:16 here
00:26:17 below the other imports and then take
00:26:20 the
00:26:22 new maps package code here and in the
00:26:25 same file scroll down
00:26:27 to the get packages function add a comma
00:26:31 of the main react package and add this
00:26:33 entry
00:26:34 and with that you should have everything
00:26:36 you need to work with maps now let's see
00:26:38 if that's the case
00:26:39 let's first of all create a new
00:26:42 component
00:26:43 and i'll name it users
00:26:47 map.js i'll import react in here
00:26:50 from react and i'll create my user's map
00:26:55 method
00:26:56 where i receive props and then where i
00:26:58 simply
00:26:59 have a function where i return jsx
00:27:04 and i will export users map as the
00:27:07 default here
00:27:10 like this and now in there
00:27:13 i want to use a view so import
00:27:17 view from react native
00:27:25 like this add it because the view always

00:27:27 makes up for a great container
00:27:30 i also want to import stylesheet to
00:27:32 define some styles thereafter
00:27:35 and i want to import my map
00:27:38 so i will import map view that's simply
00:27:41 how the component is named though you
00:27:43 could name this whatever you want it's a
00:27:44 default export from the package
00:27:46 from react native maps and with that we
00:27:50 can add a map
00:27:51 inside our view here so i can add a map
00:27:54 view here
00:27:54 self-closing element and this
00:27:58 map view here needs some styling so i'll
00:28:01 create a new constant below my
00:28:03 functional component which i'll name
00:28:05 styles where i use
00:28:07 stylesheet create and pass our object to
00:28:10 it
00:28:11 and there i'll for one create a new
00:28:13 property named map container
00:28:15 that will hold the styles the view
00:28:17 receives
00:28:18 and here i simply want to use with 100
00:28:22 needs to be wrapped in quotation marks
00:28:24 then
00:28:25 and height maybe 200 this will be pixels
00:28:28 automatically don't
00:28:29 add a unit here and then i'll add my map
00:28:33 property where i will simply set width
00:28:35 to 100 percent and height to 100
00:28:38 to take the width and height of the
00:28:39 container now for the view here
00:28:42 i'll add the style prop and set it equal
00:28:45 to styles
00:28:46 dot map container and for the map view
00:28:49 i'll add style
00:28:50 and set it equal to styles dot map
00:28:54 with that let's save this and let's use
00:28:55 this component let's
00:28:57 head over to app.js and let's import it
00:29:00 so
00:29:00 import users map
00:29:04 from dot slash components users map
00:29:08 and let's add it below the fetch
00:29:10 location component users map
00:29:12 just like that now since we added
00:29:15 a library that accesses native device
00:29:18 features
00:29:19 i strongly recommend restarting the
00:29:22 whole development server
00:29:23 so quit this terminal you can see it
00:29:25 already crashed here and that's pretty
00:29:27 normal
00:29:28 and rerun npm run android before you do
00:29:31 so
00:29:31 even go so far to close the app here and
00:29:35 uninstall it from your device like this
00:29:40 thereafter rerun npm run android to get
00:29:42 a clean
00:29:43 new build a new development workflow and
00:29:46 a new version of the app
00:29:47 shipped to your simulator with that
00:29:49 restarted i'll again turn on
00:29:52 live reloading and connect my remote
00:29:54 javascript debugging and you should see
00:29:56 the map
00:29:57 you might also see a blank map because
00:30:00 it can be tricky to configure this
00:30:01 correctly
00:30:03 in that case you'll find a link with a
00:30:05 lot of discussions and solutions to that
00:30:07 in the video
00:30:08 description also make sure because
00:30:10 that's one common source
00:30:12 that in your credentials page here
00:30:16 if you go to library you can go to
00:30:19 google maps android api
00:30:21 that this is enabled enable it otherwise
00:30:24 if this is not the case
00:30:26 with that you should see the map here
00:30:29 now would be nice to have some margin
00:30:30 between the map and the button
00:30:32 so i'll quickly go to my user's map and
00:30:34 add a stall to the map
00:30:36 container where i say margin top of 20
00:30:38 maybe
00:30:40 and now of course we wanna maybe
00:30:44 show a different snippet different part
00:30:46 of the world when it loads
00:30:48 and also move the focus of the map once
00:30:51 the user picked the location
00:30:54 now for starting with a certain region
00:30:57 being focused on the map let's have a
00:31:00 look
00:31:01 at the official docs here on airbnb
00:31:03 create react native maps so on this
00:31:05 github repository you found why google
00:31:08 there if you scroll down you will find a
00:31:10 code snippet where we set an initial

00:31:12 region prop
00:31:13 to some object that has a latitude a
00:31:15 longitude
00:31:16 and a latitude delta and a longitude
00:31:18 delta
00:31:19 now this is how you describe a region in
00:31:22 or for
00:31:23 the react native maps package a region
00:31:27 has a latitude and longitude for the
00:31:29 center basically
00:31:30 and then the deltas for both coordinates
00:31:33 to describe a circle
00:31:35 or a part around that center so how far
00:31:38 do we go to left and right and to top
00:31:40 and bottom
00:31:41 from that point so i'll just copy that
00:31:44 setup here
00:31:45 into our code for the map view here
00:31:49 so there let's simply set initial region
00:31:52 and the important point about initial
00:31:53 region by the way is that this will
00:31:55 only be set initially as the name
00:31:57 applies and will not
00:31:59 refocus if you ever were to change this
00:32:02 in run mode during runtime
00:32:04 and here i will maybe decrease this a
00:32:06 little bit to zoom in closer
00:32:08 if i now save this and we go back to our
00:32:10 application you see we're zoomed in
00:32:12 on san francisco here so this is the
00:32:16 initial region
00:32:17 i now also want to focus onto the place
00:32:20 the user sits in
00:32:22 when i got that user location so for
00:32:25 that
00:32:25 i'll go back to the app.js file and in
00:32:28 there
00:32:29 i'll add my state property because i
00:32:31 want to manage all the application state
00:32:33 in here
00:32:33 you can also use redux with react native
00:32:36 i won't do it in this video
00:32:38 it's basically as easy to add as you add
00:32:40 it to a normal react app
00:32:42 and i will also cover it in my udemy
00:32:44 course if you're interested
00:32:46 so here i'll set the normal state as you
00:32:48 set it in any react component
00:32:49 any class based component and here i'll
00:32:53 set this user location to null
00:32:55 initially now if we got a position here
00:32:59 i will call this set state and there
00:33:03 i will set user location
00:33:06 to an object where i have a latitude
00:33:10 property that is equal to position and
00:33:12 there we had a quartz object
00:33:14 and there we had a latitude property two
00:33:17 and i will set a longitude property
00:33:19 that's equal to position
00:33:21 chords longitude i also need to set the
00:33:25 delta since i want to
00:33:27 not only navigate to a point but also
00:33:29 keep a certain zoom
00:33:32 so i will just copy
00:33:35 longitude and latitude from there or
00:33:37 alternatively
00:33:38 hard coded in there so whatever approach
00:33:41 you want to
00:33:42 use feel free to do so i'll simply
00:33:45 copy it here and add it to my user
00:33:49 location
00:33:50 with that we got that in the state now
00:33:53 we want to pass it down to users map
00:33:55 so there i'll pass a user location
00:33:58 property and bind it to this
00:34:02 state user location
00:34:05 and in users map we now need to accept
00:34:07 this property and do something with it
00:34:10 as i said changing the initial region at
00:34:12 runtime won't do much
00:34:14 but we can also set the normal region
00:34:16 and this will be updated during runtime
00:34:18 so we can set this equal to props user
00:34:21 location
00:34:23 user location the props we're probably
00:34:25 just added and it will then focus
00:34:27 on that location on the map now with
00:34:30 that
00:34:30 if we go back and we click get location
00:34:34 you should move to basically the
00:34:36 googleplex this is where they sit
00:34:39 would be nice to also see a marker
00:34:41 wouldn't it
00:34:42 of course we can display one in the map
00:34:45 view
00:34:46 let's convert it from a self-closing tag
00:34:48 to a non-self-closing one
00:34:50 because in between the opening and
00:34:51 closing tag we can add another component
00:34:54 the map view dot marker component

00:34:57 and check out the docs of react native
00:34:59 maps for a full list of all the
00:35:00 components and features they have
00:35:02 they have a lot map view marker is a
00:35:05 self-closing one
00:35:06 it needs a coordinate prop and this is
00:35:09 now not a region
00:35:10 it doesn't care about deltas it just
00:35:12 wants a position defined by latitude and
00:35:14 longitude
00:35:16 so here to coordinate we can also just
00:35:18 pass props user location
00:35:20 this object will have the deltas but it
00:35:23 will just ignore them here so that's
00:35:24 fine
00:35:25 if we reload we'll get an error
00:35:28 do you know why because initially
00:35:32 in app.js our user location is null
00:35:35 so we try to set a marker on a position
00:35:38 we don't have at the beginning
00:35:40 the solution is simple only render this
00:35:43 if we got a user position
00:35:44 so here prior to returning something in
00:35:46 that function i'll
00:35:48 create a new variable user location
00:35:50 marker
00:35:52 which is null but then i'll check if
00:35:54 props user location is
00:35:56 jewish so if it's not null then user
00:35:59 location marker will be that marker code
00:36:02 and then i can just output this variable
00:36:04 user location marker
00:36:05 down there in my jsx code this is how we
00:36:08 conditionally render content in react
00:36:12 with that now it works again and if i
00:36:14 click get location
00:36:16 we center onto our position and we also
00:36:18 have
00:36:19 that marker which is great now
00:36:22 of course we don't just want to have our
00:36:24 location we want to see that
00:36:26 location of our users too right now in
00:36:28 order to do this we need to store it
00:36:31 on a server in a database and we need to
00:36:33 fetch it from there
00:36:35 now i will use firebase as a backend and
00:36:37 for that i created a new firebase
00:36:39 project by visiting firebase
00:36:41 page going to the console creating a new
00:36:43 project
00:36:44 and in that new project you should go to
00:36:46 the database tab and take the real-time
00:36:47 database
00:36:49 in there visit the rules and make sure
00:36:51 that read and write are both set to true
00:36:54 so that anyone can read and write to
00:36:55 your database not settings you want to
00:36:57 use in production
00:36:58 but settings which are great for our
00:37:00 dummy app here in production you
00:37:02 typically have authentication flow
00:37:04 to only allow authenticated users to
00:37:05 post data and read data but here we
00:37:08 won't add authentication
00:37:10 i instead will send a http request a
00:37:14 post request
00:37:15 to decent to this endpoint and a nested
00:37:17 url actually
00:37:18 to store my place on this database and
00:37:22 of course you could use any other
00:37:23 backend too
00:37:24 i just use firebase because it's easy to
00:37:26 use if you've got your own
00:37:27 backend definitely use that the approach
00:37:29 i show you here will work with any
00:37:31 backend
00:37:32 so we want to send a request here
00:37:35 whenever we get the user location
00:37:37 so what i will do is after calling set
00:37:40 state
00:37:41 i will send a http request with the
00:37:43 fetch api
00:37:44 now the fetch api is basically the
00:37:47 modern replacement
00:37:48 for xml http request in javascript you
00:37:51 could say
00:37:52 it's a browser api which is made
00:37:54 available to you by react native
00:37:55 you can find more information about this
00:37:58 in the javascript environment page i
00:37:59 showed you earlier in the video
00:38:01 and the fetch api as a first argument
00:38:04 takes a url you want to send your
00:38:06 request to
00:38:07 so that's this firebase url and there i
00:38:10 actually want to target a places node
00:38:12 and for firebase i need to add json at
00:38:14 the end it's really just a firebase
00:38:16 database thing you don't need to add
00:38:17 this for your own back-end

00:38:19 and places this will create a new places
00:38:21 node
00:38:22 now i want to send a post request so i
00:38:24 need to set up a second argument here
00:38:26 one argument only would send a get
00:38:28 request the second argument is a
00:38:30 javascript object where i configure this
00:38:32 request
00:38:33 for example by setting method to post
00:38:35 turning this from a get to a post
00:38:37 request
00:38:38 and again this is just a normal fetch
00:38:40 api if it's unclear to you how it works
00:38:42 check out some docs on it it's just
00:38:45 react native's implementation of it
00:38:48 now within a post request we also need
00:38:50 to send a body so let's specify a body
00:38:53 property
00:38:54 and this now needs to be a json string
00:38:56 so we can use json stringify to turn our
00:38:58 javascript object into such a string
00:39:00 and i just want to send an object that
00:39:02 holds a latitude and a longitude
00:39:05 so i will just copy latitude and
00:39:06 longitude from there i don't care about
00:39:08 the deltas
00:39:09 i just want to store positions which i
00:39:11 will use for
00:39:12 markers that don't care about delta's
00:39:15 either
00:39:16 and with that we send this to firebase
00:39:20 now fetch gives us back a promise so i
00:39:23 can chain then here to get back a
00:39:25 response and
00:39:26 lock that response to the console and
00:39:29 catch to contact
00:39:30 to catch any errors during that not
00:39:33 server side errors or
00:39:34 404 errors but errors due to
00:39:37 connectivity problems for example now if
00:39:40 we save that and i click get location
00:39:43 i get back a 200 response so that's
00:39:45 looking good looks like it worked
00:39:47 if i check out firebase i see the places
00:39:50 node
00:39:51 and in there a new element with this
00:39:53 cryptic
00:39:54 id that's an id automatically generated
00:39:57 by firebase
00:39:59 and in there i see my latitude and
00:40:00 longitude so that's looking promising
00:40:04 we're storing data obviously we want to
00:40:06 get it to
00:40:07 output markers of other users too so
00:40:10 what i'll first of all do is
00:40:12 i'll just get up my location again hence
00:40:15 creating a second object with the same
00:40:17 coordinates
00:40:18 but now we'll manually tweak the
00:40:19 coordinates a little bit set this to
00:40:22 8 two maybe here and the latitude
00:40:26 to four
00:40:29 one so just tiny adjustments so that it
00:40:32 doesn't go
00:40:33 all the way to the other end of the
00:40:36 world
00:40:38 hitting enter helps in saving these
00:40:40 changes by the way so make sure to save
00:40:42 them
00:40:43 and now we got two different positions
00:40:46 which i want to see if
00:40:47 i see different markers you could of
00:40:49 course also launch your app on a second
00:40:51 device and it should work if you then
00:40:53 get a different location there
00:40:56 now we need a button to fetch the
00:40:58 location
00:40:59 so i will add a button here above
00:41:02 my fetch location component i need to
00:41:04 import that button from react native
00:41:07 therefore
00:41:08 and i will wrap this button in a view
00:41:10 component
00:41:11 simply because this view element makes
00:41:15 it easy for me
00:41:16 to style that and i will add
00:41:19 inline style here which you can do don't
00:41:21 have to bind to a stylesheet object
00:41:23 though it is preferred
00:41:24 but here i'll quickly add an inline
00:41:26 style where i say margin
00:41:30 bottom to 20 to have some distance to
00:41:33 the fetch location button now i'll give
00:41:36 this button a title of
00:41:39 get user places and on press
00:41:43 will execute a method i'll add this
00:41:45 method here i'll name it get
00:41:47 user places handler
00:41:50 like this so let's target this here
00:41:54 this get user replaces handler

00:41:58 and in that method i'll again send a
00:42:00 fetch request i'll copy the logic from
00:42:03 this fetch request here actually
00:42:08 but i will not send a second argument
00:42:10 because i want to send a get request
00:42:13 to this node so just like that
00:42:17 on the other end i don't just want to
00:42:18 lock the response instead i will call
00:42:20 log
00:42:20 response json here to take the json out
00:42:23 of it
00:42:24 and then the next then call i'll have
00:42:26 the parsed response this is essentially
00:42:28 how fetch works
00:42:29 we first of all get back the response
00:42:32 with the code
00:42:33 and the unparsed data body
00:42:36 and then with json we can parse that and
00:42:38 we get back the body
00:42:39 in a javascript object form so here we
00:42:42 have this object
00:42:44 and that's an important thing we
00:42:45 probably want to have an array
00:42:47 to conveniently loop through it and
00:42:49 output a couple of markers
00:42:51 for the different items in the array on
00:42:54 firebase
00:42:55 we store everything in this object
00:42:57 format though
00:42:58 so here we got the places object which
00:43:01 has these cryptic
00:43:02 strings here as properties and then the
00:43:05 values would be
00:43:06 these objects here so we have nested
00:43:08 objects where these are
00:43:10 the keys we need to convert the that
00:43:13 object into an array therefore
00:43:15 so i'll create a new places array here
00:43:18 which is an empty array at the beginning
00:43:21 and then with a for in loop where i get
00:43:23 my keys
00:43:24 of parsed response
00:43:28 i can extract these places so i can then
00:43:31 call places array push
00:43:34 and push a new javascript object there
00:43:38 where i will have a latitude we need
00:43:39 that for the marker
00:43:41 which is parsed response for that given
00:43:44 key
00:43:44 and then there will be a latitude
00:43:46 property because we're storing latitude
00:43:48 and longitude there
00:43:49 and therefore the same of course for
00:43:53 longitude and then i'll add a third
00:43:56 element third property which i'll name
00:43:58 id which will be just my key
00:44:01 that cryptic key so that i have that
00:44:03 stored here too
00:44:04 will be helpful for looping would be
00:44:06 helpful if you add some
00:44:08 update functionality or delete
00:44:10 functionality this is the id
00:44:11 under which it is stored on firebase now
00:44:14 that array needs to be stored in the
00:44:16 state of this component
00:44:18 so i'll add a user places array which is
00:44:20 empty initially
00:44:22 to my state and then
00:44:25 here where i got my places in an array
00:44:28 outside of the for in loop i'll set this
00:44:31 or call this
00:44:32 set state and now set state
00:44:36 should set the state of user places
00:44:39 equal to my places array i got here
00:44:43 with that i got an array of these places
00:44:47 i of course want to output them on my
00:44:48 map though so to my map component i'll
00:44:51 pass
00:44:52 user replaces you can name this property
00:44:55 whatever you want
00:44:56 and i'll bind it to this state user
00:45:00 places
00:45:02 to pass it on to the user's map so in
00:45:05 there we will now have a prop user
00:45:06 places
00:45:07 under which we can get the places of our
00:45:10 users
00:45:12 maybe we should name this property here
00:45:14 in the state users places
00:45:16 so updated down there where you call set
00:45:18 stay 2 as well as here where you pass it
00:45:21 on and let's
00:45:21 rename the prop to user places too
00:45:25 in the user's map component i now want
00:45:28 to create as many markers as needed
00:45:30 so i'll create my user's markers
00:45:34 component here a constant here and use
00:45:38 props users places this new prop we just
00:45:41 added
00:45:41 with the map method as you always do it

00:45:44 in react for outputting an array of
00:45:45 elements in jsx
00:45:48 in there i'll get my user place
00:45:51 and i want to return a map view dot
00:45:53 marker component
00:45:55 where i bind the coordinate to
00:45:59 user place because that is an object
00:46:01 that has a latitude and longitude
00:46:04 key or property and i also want to set
00:46:07 the key since we're having a loop here
00:46:08 so that is the default logic and react
00:46:11 erase basically you need a key
00:46:13 set the key to use replace id
00:46:17 like that so this is the marker i output
00:46:20 for each element in my user places
00:46:22 array so now i got this user's markers
00:46:25 constant which i can output next to my
00:46:28 user location marker
00:46:30 and if we do all of that and we save all
00:46:33 the files and we reload our application
00:46:36 we should be able to go
00:46:40 down zoom out a little bit by holding
00:46:42 command control and then
00:46:43 just dragging and first of all
00:46:47 click get user places whoops a little
00:46:50 bit further down
00:46:51 and see these two places here near the
00:46:54 googleplex
00:46:55 and these are indeed the places we added
00:46:58 and edited
00:46:59 on firebase and this is it this is of
00:47:02 course only a rough introduction to
00:47:04 react native
00:47:05 there is much more you can do with it
00:47:07 with the styling you can access the
00:47:09 camera add authentication
00:47:11 create response of the science all of
00:47:13 that
00:47:14 all of that covered in my udemy course
00:47:16 in case you're interested
00:47:17 but i hope that this was a great
00:47:19 introduction to it that you got a
00:47:21 feeling for how you work with react
00:47:23 native
00:47:23 how you start a project how you add
00:47:25 packages that need
00:47:27 native device features how you work with
00:47:29 components build your own components
00:47:32 work with the web with a back end and
00:47:34 now you can dive into the official docs
00:47:36 and or my course or of course some other
00:47:38 tutorial
00:47:39 to learn more about it would be great to
00:47:41 welcome you my course would be great to
00:47:43 welcome you in future videos here on
00:47:45 this channel
00:47:46 have a great day bye

You may also like