Expo EAS and Mapbox React Native | Tutorial for Installing Maps on a mobile app

It's a HUGE win for EAS builds with Expo to now incorporate Mapbox. However, getting things up and running can be a bit challenging, especially if you aren't totally used to EAS builds. There are a couple small parts that you may need help with, so hopefully this video gives you a leg-up and a walkthrough!
• Building an Expo App w... -- General tutorial on EAS builds (very helpful!)
Resources used/referred to:
github.com/rnmapbox/maps
expo.dev/
expo.canny.io/feature-request...
docs.expo.dev/build/internal-...
docs.expo.dev/build/setup/
00:00 Introduction (Yay Expo!)
00:55 Starting a new Expo project
01:30 RNMapbox Docs
02:15 Adding code for Mapbox (and getting token)
04:15 Setting up EAS Build
05:08 Building for iOS
06:00 Installing iOS
07:30 Building for Android
08:10 Installing for Android

[@alexandervega3463]

I really appreciate your help to teach me how to properly setup this lib with expo, you deserve your like and a subscription.

[@tudor14]

Great video, followed along almost flawlessly getting set up and built and developing in Android. Subscribed!

[@eddiesoseraowi]

Thank you so much! I couldn't find anything else like this!

[@brian.webster]

Great content. Thank you for this. Much appreciated

[@ohxrn2029]

HUGE win!!!!! Saved me so much time here

[@AbdulDollie]

Thank you so very much for this brilliant video!!!!

[@hejacky4737]

Thanks for sharing! Very helpful

[@user-pj9vj3cu8u]

This tutorial help me a lot.

[@rodrigosoares5207]

Amazing! Thanks a lot bro

[@wowvain2989]

Very useful video! Also looking forward to maybe seeing you on Turtle WoW ;D

[@arupde6320]

upload videos like that regularly

[@cesarmelendez2577]

Wow, thank you so much. Really.

[@JKholmatov]

Could You please make a tutorial video for the "@homee/react-native-mapbox-navigation" package also to use it with Expo EAS

[@tudor14]

Another comment! Would you be able to do a quick video on adding marker views/point annotations/symbol layers with rnmapbox/maps? I feel like this would really shed some light on some (subjectively) cryptic documentation on that area. I've really struggled just getting a basic marker on my map and following posts/articles and I feel like I'm missing something lol.

[@tudor14]

Hilariously, 5 min after I posted this I managed to get a point annotation working. No idea what changed!

[@learnwithmapster]

Awesome! Crushin' it James! Still, might be a good idea to do a mini-series on Mapbox React Native, since it's not totally easy to understand some quirks. Keep an eye out for that!

[@tudor14]

@@learnwithmapster I'm hyped... Patiently waiting already :)

[@ErichCervantez]

@@learnwithmapster That would be awesome. I managed to get a PointAnnotation appearing, but can't seem to make it disappear when you click elsewhere on the map. Should be simple but the documentation is kinda lacking here (or maybe I don't know where it is).

[@noahthegreat190]

Great vid! By the way, what are you using to get iOS running on your windows machine? Thanks in advance!

[@learnwithmapster]

I don't use anything to get iOS running on windows! The nice thing about using Expo EAS is that I don't need to use any Mac stuff at all to deploy iOS apps :)

[@noahthegreat190]

@@learnwithmapster Ty brother 🙏🏼

[@BrunoBernard-kn6vt]

So you do not need to do expo prebuild to generate ios and android folder ? you just use eas ?

[@zhiweihu9119]

Thanks for your warm video!! It means that it could not run on Expo Go, and create a development build of your app instead. Is that right? :)

[@learnwithmapster]

hello! Right, you can't use the out-of-the-box Expo Go, but using EAS build you can use Mapbox and it's MUCH easier than ejecting.

[@KJ-1271]

Hi im running this on an M1 mac and im getting issues where the map will start glitching and show white triangles on the screen. Has anyone run into this and if so, are there any solutions to this?

[@janericlonario3592]

ERROR TypeError: Cannot read property 'EventTypes' of null, js engine: hermes * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

[@nasreddinejaouadi8006]

thank you for this helpfull video can you please make a video on how to add turn by turn navigation and thank you

[@learnwithmapster]

OK! I'll put it on the list!

[@OleksandrBilokur]

Thanks for the video) tried - it is working) But I have a question - is it possible somehow to see changes on ios simulator without building it again? I mean small updates, like with expo I did it for android(launched on real android device, specified metro server address - ok), but how to do the same for iPhone in simulator(as looks like it created totally independent build with no local metro server on mac)? thanks

[@learnwithmapster]

Hi Oleks! Unfortunately I don't know the answer to this one. I exclusively test on my real device, because I never trust the emulator (I've had problems in the past trying to use the emulator, and then having issues once going onto a real device). Sorry I can't help more here :(

[@mard9304]

Can you make react native expo with mapbox Navigation App??

[@l0gical998]

Why wouldn't this work for the Web? Thank you for the awesome video

[@markw496]

I can't seem to get this to work with expo 46 im so sad XD. maybe i need expo 47..

[@user-dr2jd1oo3l]

can you share with your github repository?

[@sangviet2347]

I tried to build it on android and have an error:"Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information". I have searched for many solutions on the internet but still can't solve.

[@learnwithmapster]

Hi there, more details will be shown in the Expo logs in that area where you see the Gradle error. It will have references to specific files or packages if you look a bit more in detail at it, which might help you pin it down!

[@Tomas-iq3qu]

For me the app crashes upon navigating to the screen with Mapbox in it. No errors are shown too :/

[@learnwithmapster]

Can you double check your app.json and make sure it's in the right format, and you've added the secret token with the correct permissions? That's what I found most often was the issue when there's no error showing.

[@edge0601]

Development build is one time pain to setup 😂

[@amirabbasrezaei4055]

I try this with expo 46 but got error in app.json that says "plugin config is Invalid". Please test with this version and help me

[@learnwithmapster]

Hmm. If you can look carefully at my app.json in the video and compare to yours? There must be something incorrect in there that you might find by careful comparison!

[@amirabbasrezaei4055]

@@learnwithmapster the only difference was typescript, this time I initialize blank expo app without typescript and it worked !

[@learnwithmapster]

@@amirabbasrezaei4055 Good job getting it working! I have found sometimes making new blank apps is a great way to double check.

[@richardchukwuma3415]

Hi i seem to be late to the party... I followed all steps, nd was able to build successfully. But now I get an error, 'You can't install the app on your device" Please what might be the issue?

[@learnwithmapster]

Hmm... that's a tough one!! There are so many possible errors... is this iOS or Android? This sounds more related to an EAS thing than Mapbox-specific

[@richardchukwuma3415]

@@learnwithmapster yes!! After much pondering on it. It seems to be eas.. I removed the map and tried to rebuild my project on EAs, still I wasn’t able to still get it install. Problem is that I’m not getting any error

[@learnwithmapster]

@@richardchukwuma3415 Bleargh, yeah, there are a lot of tricky bits. The best is probably to start a new EAS project, follow along with the bare minimum of the Expo docs and see if you can get it working on your device! And then after that, try adding in the Mapbox stuff. That way at least you're working from the most basic starting point and it's easier to diagnose anything. BTW, if you're installing on Android, make sure you select the downloaded build in the file explorer directly -- it'll only install from there.

[@geandaschagas6286]

ERROR TypeError: null is not an object (evaluating 'MGLModule.EventTypes') ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

[@heyitspieter]

I guess you have to build the project with EAS. Because the package requires native code to be able to work

[@nomnomnam]

Can you also run this with Web as well?

[@learnwithmapster]

Hi there, I don't totally understand the question! Working with Mapbox on web is much simpler than this :)

[@wowvain2989]

@@learnwithmapster i think he might be reffering to Expo Web, which still uses react native but "compiles" for the web so it can't really use the normal Mapbox JS web sdk

[@codewithme305]

can you push your code at github, i followed but it not working, please, help me...

[@learnwithmapster]

Hi, what's not working?

[@codewithme305]

​@@learnwithmapster it notify too many error and i cant fix them :(((

[@joeboulton2621]

Does this work with EAS Updates?

[@learnwithmapster]

Hmm, I don't know for certain, but I don't see why it wouldn't?

[@nakshatrasingh6933]

Can you make a mapbox app without EAS? Only react native cli or expo cli

[@learnwithmapster]

Certainly you can make a Mapbox app without EAS, by ejecting completely from Expo or writing in native code. But EAS is the only way to do while using Expo's various build tools (which in my opinion make the dev and building process much easier to do).

[@markw496]

@@learnwithmapster I tend to be a prototype and make error kind of guy. For me I'm hoping that we'll get a way to use mapbox with expo go :(. I could only wish.

[@learnwithmapster]

@@markw496 I was the same, but once you get through the process with EAS it's really not so bad! At the very least it's better than doing it all in native code :)

[@markw496]

@@learnwithmapster Yeah true its better than native code. But the real issue is when you build the project. If you have a simple project it is fast but my project has quite a few stuff. Takes about 5-10 minutes each try.

[@learnwithmapster]

@@markw496 You should only have to build a new EAS build when you actually make a change that requires it (ie, adding a new library that requires a build change) -- otherwise, opening your custom EAS app on your phone, running `expo start`, and scanning the QR code should work exactly like Expo Go, allowing to do hotloading just like normal Expo :)

[@smotrimoivideo]

does it work on desktop browser as well?

[@learnwithmapster]

This is just for Expo mobile apps! It's much easier to build for desktop browsers, you don't need to use Expo at all.

[@smotrimoivideo]

@@learnwithmapster if i would like to build an app that runs on ios, android and web and has the same look and functionality using expo, what would you advise me to do with the map question? i would really just like to use the same code for all the versions...

[@learnwithmapster]

@@smotrimoivideo Hey there. Unfortunately using the exact same code for all versions is probably not ideal -- for ios and android, using expo is a great idea, but for web you're better off using plain HTML/CSS/JS. There may be some ways to port it across but I think you'd be hamstringing yourself and making things a lot more complicated!!

[@alexquenelle]

hey, unfortunately you need a paid account developper to eas build on ios...

[@learnwithmapster]

You don't need a paid account, but you may experience really long delays without it (or try doing it outside of peak hours). See expo.dev/eas-build-status

[@nakshatrasingh6933]

If you are going to use EAS Build to create release builds for the Apple App Store, you need access to an account with a $99 USD Apple Developer Program membership. FOUND THIS IN EXPO DOCS

[@learnwithmapster]

Ah ha, I thought Alexandre was referring to having a paid account with Expo, not with Apple. Yes, in order to build and publish on the App Store, you need an Apple Developer account.