- 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