Learn By Doing: React Native with Maps

112 Pages·2020·8.985 MB·English

by  Marya Doery

Learn By Doing: React Native
with Maps
Marya Doery
Thisbookisforsaleathttp://leanpub.com/learnbydoingreactnative
Thisversionwaspublishedon2020-03-09
ThisisaLeanpubbook.LeanpubempowersauthorsandpublisherswiththeLeanPublishing
process.LeanPublishingistheactofpublishinganin-progressebookusinglightweighttoolsand
manyiterationstogetreaderfeedback,pivotuntilyouhavetherightbookandbuildtractiononce
youdo.
©2020MaryaDoery
Thankstothosewhohaveencouragedandinspiredme:AlainChautard,JasonSwett,Itamar
Turner-Trauring,AmyHoy,andAlexHillman.
Andaspecialthankstomyfamily,fortheirloveandsupport.
Contents
ReadThisFirst. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
IntroToReactNative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
GettingStartedUsingreact-native-cli. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
SettingUpYourEnvironment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
DevelopmentProcess . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
CreatingYourFirstProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
DirectoryStructureofYourReactNativeProject . . . . . . . . . . . . . . . . . . . . . . . . . 6
TestingtheDefaultApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
TheProjectPlan. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
ReactvsReactNative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
HelloWorldinReactvsReactNative. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
TickingClockinReactvsReactNative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
FetchingaRESTAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
MockingaRESTAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
FetchtheRESTAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
ReactNativePickervsHTMLSelect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
AWordAboutState,Props,andLifecycleMethods . . . . . . . . . . . . . . . . . . . . . . . . . 33
RenderMethod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
ComponentStateandsetStateMethod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
ComponentProps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
HandlingNetworkErrors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
HandlingNetworkLatency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
ProgressLoaderinReactNative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
ReactNativeButtons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
CONTENTS
WhatIsthis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Navigation-PartI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
StickwiththePlan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
AddtheGOButton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
AddingReactNavigationPackages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
UsingReactNavigationPackages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
RunningWithNavigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Navigation-PartII . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
MapsinReactNative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
PassingParameterstoRoutes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
AddingaMarkertoaMap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
DeepLinkingtoGoogleMaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
BuildanInstallableAPK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
BuildanAppUsingExpo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
WhatisExpo? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
SimpleExpoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
MoviesAppUsingExpo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
ContactInfo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Appendix:InstallingReactNativeMapsforAndroid. . . . . . . . . . . . . . . . . . . . . . . . 95
Step(0)-npminstall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Step(1)-editsettings.gradleifusingReactNative0.59andlower . . . . . . . . . . . . . . . 95
Step(2)-addbuild.gradledependencyforReactNative0.59andlower . . . . . . . . . . . . 96
Step(3)-editbuild.gradle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Step(4)-GoogleMapsAPIKey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Step(5)-addimportforReactNative0.59andlower . . . . . . . . . . . . . . . . . . . . . . . 98
Step(6)-makesureGooglePlayServicesisinstalled . . . . . . . . . . . . . . . . . . . . . . . 98
Whattodoifthingsgowrong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Appendix:Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
AnonymousFunctionsandArrowFunctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Read This First
Thebookmakesafewassumptions:
1. YouhavesomefamiliaritywithJavaScript.
2. Youhaveacomputerwhereyoucaninstallthings.
3. YouarenotrequiredtobefamiliarwithReact¹,butitwouldhelpifyoubuildyourselfa“Hello
World”ReactappbeforeturningtoReactNative.ThatwillgiveyouaveryquicklookatJSX²
(“JavaScriptXML”),whichisanextensionofJavaScript.
4. Youhaveusedthe“NodePackageManager”-npm-andcanrunitonyourcomputer.
5. You are “okay” with running tools from the command line. If you aren’t familiar with npm
and the command line, I think you will have a few struggles, but you will probably be able to
surmount them. In fact, following along could help you to learn these tools, as well, but you
will have to do more searching on the Internet at times, because this book is not a guide to
usingcommandlinetools.
6. If you want to experiment with Google Maps, as described starting withChapter 17, you will
need to be comfortable setting up a Google Cloud Platform³ account. This includes providing
themwithyourcreditcardinformation!GoogleCloudPlatformdoeshaveafreetier.Youwill
needtotakeprecautionsnottoexceedtheirlimits,otherwiseyoucanincurcharges.You
dotheseexperimentsatyourownrisk;I’mnotresponsibleifyouwindupgettingcharged!
TheexamplesinthebookwerebuiltonaLinuxOS,Ubuntuinparticular.Ifyourcomputerisrunning
MacOSorWindows,thenyouwillhavetotranslatesomecommandsintotheequivalentcommands
forthoseoperatingsystems.
Also, the examples use React Native 0.61.5 and React 16.9.0. If you are using a different set of
packages,youmayhavetomakesomeadjustments.
ThedemocodeisrunusinganAndroidEmulator⁴,whichcanrunonLinux,Windows,andMacOS.
InstructionsforsettingupyourenvironmenttoruntheexamplesareinChapter3.Idon’tthinkthis
bookwillbeveryusefultoyouifyoucannotruntheexamples.Sopleasereviewthatchapterbefore
proceedingtomakesurethatyoucansatisfytherequirements.
The source code is available as a github project, react-native-movies-maps⁵. Many of the commits
forthatprojectarereferencedinthebook,ifyouwanttoexperimentwiththatcode.
¹https://en.wikipedia.org/wiki/React_(web_framework)
²https://en.wikipedia.org/wiki/React_(web_framework)#JSX
³https://console.cloud.google.com/
⁴https://developer.android.com/studio/run/emulator
⁵https://github.com/fullStackOasis/react-native-movies-maps
Intro To React Native
Maybe you’ve come to React Native because it’s a hot new technology, and you want to add it to
your resume. Or maybe you need it for your job. Or maybe you’ve heard that it’s a great way to
“develop once, run everywhere”. After all, why build two apps - one for iOS and one for Android -
ifyoucanjustbuildone,anddeploytobothplatforms?
Whateveryourreasons,you’vedecidedthatyouwanttolearnthetechnology.Butitcanbepainfully
boringfollowingmeaninglesstutorialswhichtellyouhowtoaddabuttonormakeacalltoaREST
API. Wouldn’t it be neat if you could build a little app that does some fun things, and learn React
Nativealongtheway?That’sexactlythereasonforthisbook.Icallthisapproach“ProjectOriented
Learning”,andIthinkithelpsstudentsstickwiththelearningprocesstogetsomethingsubstantial
built.
If you’ve merely heard of React Native, but don’t really know what it is, then I’ll refer you to the
WikipediapageonReactNative⁶.Theidea,moreorless,istogivewebdevelopersthetoolstocreate
andmaintain“native”appswithouthavingtolearnthesoftwaredevelopmentprocessforbothiOS
and Android. You will get a feel for just how well this works by the time you’ve completed this
book.
React Native is supported by Facebook. They’ve done a pretty good job of documenting the setup
process⁷.However,itcangetconfusing,andthestateofReactNativeischangingveryfast.
Currently,therearetwopathsyoucanfollowtobuildReactNativeapps:1)Youcanuseacommand
linetoolcalledexpo,or2)youcanusetheReactNativecommandlineinterface,react-native-cli.
The docs tell you to use expo unless your project requires native code. What’s that mean, “native
code”?ForAndroiddevs,theJavafilesinAndroidStudioare“nativecode”.ForiOSdevs,theSwift
or Objective-C files in XCode are “native”. If there’s something that needs to be done in your app
that can’t be done using React Native, then you’ll need to start tinkering with the native code to
makeyourappwork.That’swhenyou’llneedtousereact-native-cli.
So how do you decide which tool to use, expo or react-native-cli? Unfortunately, you may not
knowifyourapprequiresnativecodebeforeyoustartbuilding.Or,youmaythinkitdoes,andlater
discoverthat it doesn’t. That’s okay! It’s not a disaster if you start down one path and then have to
switchtotheother.
Wewillstartwithreact-native-cli.Later,we’llseehoweasyit istoswitchtoexpo.
⁶https://en.wikipedia.org/wiki/React_Native
⁷https://facebook.github.io/react-native/docs/getting-started
Getting Started Using react-native-cli
Thereare4stepstogettingstartedwiththeReactNativeCLI(CommandLineInterface⁸).Youneed:
1. Node.js⁹ - a JavaScript runtime environment that runs JavaScript code without using a web
browser.
2. Watchman¹⁰-atoolthatwatchesforchangesinthefilesystem.
3. TheReactNativecommandlineinterface¹¹.
4. Tools for developing native code: a JDK and Android Studio¹² if developing for Android, or
XCodeforiOS.You’llneedPython2ifdevelopinginWindows.
Setting Up Your Environment
The instructions for setting up all this tooling are in the Getting Started¹³ area of the React Native
project. I won’t repeat them here. Follow that link, click the “React Native CLI Quickstart” option,
and choose the “Development OS” of your computer (Windows/Linux/macOS). The examples in
this book assume you’ve picked Android as your Target OS, so you will want to pick that, too.
Below is a screenshot of the “Getting Started” page, with “React Native CLI Quickstart”, “Linux”,
and“Android”selected.Noticethelightblueunderlining.Onceyoumakethoseselections,thepage
will dynamically adjust to tell you how to set things up for your own situation. Read on for my
recommendationsbeforeyoutakethesesteps,though.
⁸https://en.wikipedia.org/wiki/Command-line_interface
⁹https://nodejs.org/en/
¹⁰https://facebook.github.io/watchman/
¹¹https://reactnative.dev/docs/getting-started
¹²https://developer.android.com/studio
¹³https://facebook.github.io/react-native/docs/getting-started
GettingStartedUsingreact-native-cli 4
Figure3.0:gettingstartedwithReactNativechooseyourownpath
Node.js
First, a word about Node.js: The React Native documentation tells you to use version 8.3 or newer.
I suggest that you use nvm¹⁴ to install Node.js¹⁵. The command line tool nvm lets you easily switch
between different versions of Node. This may save you some trouble if you have projects that
requiredifferentversionsofNode.Thisisjustasuggestion;itmaybesimplerforyoutojustinstall
themostrecentversionofNodeandbedonewithit.
Development Process
Here’showdevelopmentproceeds.You’llrunaninstallationscriptwhichwillcreateasimplestarter
projectinReactNative.Youshouldimmediatelyrunthisprojectasanapptotestit.
Android
WithAndroid,youhavetwochoices.YoucanrunyourappinanAndroidEmulator,oronaphysical
devicesuchasacellphonerunningAndroid¹⁶.Theformerrequiresinstallingsomesoftwareonyour
computer. The latter is called “USB debugging”, and requires access to an Android device (possibly
your own cell phone). You plug the device into your computer’s USB port after doing a little prep
work.
¹⁴https://github.com/nvm-sh/nvm/blob/master/README.md
¹⁵https://en.wikipedia.org/wiki/Node.js
¹⁶https://en.wikipedia.org/wiki/Android_(operating_system)
GettingStartedUsingreact-native-cli 5
IfyouhavenoexperiencewithAndroiddevelopmentatall,Isuggestinstallingandrunningtheapp
on an Android Emulator rather than on an Android hardware device. Eventually, you will want to
test on a physical device. During development, my experience has been that the Emulator is easier
toworkwith.StartinguptheEmulatortakesalittletime,butonceitisstartedupyoucanjustleave
itrunningforhours.
In contrast, when you plug in your Android mobile device for USB debugging, you have to give
permissionatfirst.Notaproblem!However,myAndroiddeviceperiodicallydisconnectsitselffrom
my development computer. If you already use Android USB debugging without any issues, then
feelfreetocontinueinthatmanner.Ifyouarejustgettingstarted,youmaywanttotryusingUSB
debugging(sinceyouwillwanttodoit,atsomepoint,anyway).Ifitdoesn’tgiveyouanyproblems,
thenUSBdebuggingmaybetheeasiestwaytogetstartedquickly.
The React Nativefolks havean excellentdescription forgettingstarted with USB debugging¹⁷. You
shouldclickthatlinkandfollowtheinstructionsthereifyouwanttotryit.
iOS
Perhaps you want to do development work specific to iOS. In that case, you will need a Mac, so I
hopeyouhaveoneofthosealready!TheMacdevelopmentenvironmentisbeyondthescopeofthis
book,butyoucandevelopReactNativeappsusingXCodeandtheiOSsimulator¹⁸.
¹⁷https://facebook.github.io/react-native/docs/running-on-device
¹⁸https://developer.apple.com/library/archive/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator/
GettingStartedwithiOSSimulator.html