Ultimate Guide to Integrating React Native with MapboxGL

Ultimate Guide to Integrating React Native with MapboxGL- A Google Map Alternative. Mapbox comes bundled with a lot of services. WriteapostSIGNUPLOGINFindDevelopers&MentorsCommunityPostBlogSIGNUPLOGINDanielAmahFollowSeniorSoftwareFullStackEngineerUltimateGuidetoIntegratingReactNativewithMapboxGL-AGoogleMapAlternativePublishedSep04,2020LastupdatedSep09,2020Mapboxcomesbundledwithalotofservices.Theseservicesincludes: Directions Matrix Geocoding Optimization MapboxisoneofthegreatalternativestoGooglemapsoutthere.MapboxwasbuiltontheOpenStreetMapAPIwithamazingcoolfeatures.IfyouarelookingforacheapmapserviceasidefromGoogle,takeagoodlookatMapbox.Togetstarted,visitMapboxOfficialWebsite Tocreateanaccount,clickonstartmappingforfree.Thiswouldtakeyoutosignuppagetocreateanaccount. Ifyoualreadyhaveanaccount,youcouldsigninwithyourlogindetails(usernameoremailandpassword) Onsigningin,yougettoseeyourbeautifuldashboardwithyourdefaultpublictokenasshownbelow: Mapboxoffersafreeplanwhichisreasonableasfarasyoudon’texceedthelimitprovided.Thelimitscanbeseenontherighthandsideofthedashboard.ThedefaultpublictokenwouldbeusedtomakerequeststoMapboxAPI. Next,Weneedtocreateourreactnativeapp.Tocreateareactnativeapp,visitthislinkfordirectionsonhowtosetupyourmachineforReactNative.VisitReactNativeOfficialWebsite TocreateanewReactnativeapp,Runthisonyourterminal npxreact-nativeinitReactNativeMapbox Changedirectory(cd)intotheReactNativeMapboxfolder.Todothat,runthecommandbelowonyourterminal. cdReactNativeMapbox Runtheapplicationonyoursimulator.Forthisarticle,Iwouldberunningoniossimulator.(IwouldnotbefocusingonsettinguponforAndroidinthisarticle).Torunthereactnativeapponios,Runthecommandbelowonyourterminal yarnios ThiscommandwouldopentheapponthedefaultiOSsimulator.Asshownbelow Next,wearegoingtosetupMapboxonourReactNativeapplication.TodothatwewouldbeinstallingtheMapboxnpmpackage.Thenpmpackageisfoundhere:MapboxReactNativepackageforMaps. RunthefollowingcommandtoinstallMapboxontheReactNativeapp yarnadd@react-native-mapbox-gl/maps Aspartoftheinstallationprocess,wewouldneedtoclickoniOSsetupontherepositoryforanextrasetup.Asshownintheimagebelow: Next,AddthefollowinglinetoyourPodfileasshownintheiOSsectionoftheinstallationguide. pod'react-native-mapbox-gl',:path=>'../node_modules/@react-native-mapbox-gl/maps' Asshownintheimagebelow: Next,cdtoiosfolderandrunpodinstallonyourterminalasshownbelow. (Ifyougettheerrorpodnotfound,runthecommandgeminstallcocoapodstoinstallcocoapodsandgetaccesstothepodcommand) cdios podinstall Next,cdbacktoyourrootdirectoryusingthecommand. cd.. Next,wewouldgotoApp.jsfileandclearthedefaultcontentsthatcomeswiththereactnativeinitializationprocess.Weshouldhaveblackscreen. Next,wewouldbeimportingourlibrariestocreateourmap.Asshownbelow importReact,{useEffect,useRef}from"react"; import{StyleSheet,View,Image,Platform}from"react-native"; importMapboxGLfrom"@react-native-mapbox-gl/maps"; Next,let'ssettheaccesstokenonMapboxGL.TheMapboxtokenisourdefaultpublictokenfromourmapboxdashboard.Thecodeisshownbelow: MapboxGL.setAccessToken("MAPBOX_TOKEN_GOES_HERE"); Next,wewouldbecreatingtheAppcomponent.Asshownbelow exportdefaultApp=()=>{ } Next,weneedtoaddthecomponentelementsasshownbelow. return( ) Fromthecodesnippetabove,wearewrappingthemapboxcomponentinaViewcomponentwithheightandwidthof100%tofilltheentirecontainer.(ItisimportantwehaveaheightandwidthfortheViewcomponentcontainer).Wealsoneedtoaddastyleofflex:1tothemapboxcomponentasprops.(Thisisalsoimportantelseyouwouldbegettingawhitescreen).Thezoompropsensuresthemapshowslittleormoredetaildependingonwhatyouwanttoachieve.Alargezoomnumbermeansyouwantmoredetailaboutanarea,asmallerzoomnumbermeanslessdetail. AnotheradditionMapboxcomponentistheCameracomponent.TheCameracomponentalsoensurethatthemapisbroughttofocusbyspecifyingthesamecoordinatesasshownintheMapViewcomponent. OnecleardifferencebetweenGoogleMapsandMapboxisinthewaythecoordinatesareused.ForGooglemaps,itislatitudebeforelongitudebutwithMapbox,thelongitudecomesfirstbeforethelatitude.ThisisaveryimportantpointtonotewhileworkingwithMapbox. Puttingeverythingtogether,thisistheentirecomponentforApp.js importReactfrom"react"; import{View}from"react-native"; importMapboxGLfrom"@react-native-mapbox-gl/maps"; MapboxGL.setAccessToken("MAPBOX_TOKEN_GOES_HERE"); exportdefaultApp=()=>{ return( ) } ThisishowthesimulatorlooksforIOSandAndroid Andthatisit!!!.🎉🎉🎉🎉🎉🎉.Inmynextarticle,Iwouldbeshowingyouhowwecanaddannotations(Pointsonthemap)andinthesubsequentarticle,wewouldbedealingwithPolylinesandhowtomakethemworkwithMapbox. PARTII-GuidetoaddingpointannotationstoMapbox PARTIII-GuidetoaddingpolylinestoMapbox MapboxGooglemapsReactnativemapsReportEnjoythispost?GiveDanielAmahalikeifit'shelpful.52ShareDanielAmahSeniorSoftwareFullStackEngineerFullstackdeveloperwithmorethan8yearsexperiencebuildingandwritingDRY,testableandefficientcode.IhaveworkedextensivelyinadistributedteamdrivenprojectswhereIservedastheTechnicalTeamLead(TTL)andcharg...FollowDiscoverandreadmorepostsfromDanielAmahgetstartedEnjoythispost?LeavealikeandcommentforDaniel5BethefirsttoshareyouropinionGitHubflavoredmarkdownsupportedsubmitTestIDayearagoHowtogetUserLocationonoveramapinmapboxinreact-native? 1ReplyDanielAmahayearagoIwouldbereleasinganarticlethisweekendonthis.Beinthelookout. ReplyShowmorereplies