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?
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.
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!
@@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).
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
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.
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!
@@learnwithmapster same error dude and when i checked in the expo logs i am getting Task :rnmapbox_maps:compileDebugKotlin FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':rnmapbox_maps:compileDebugKotlin'. > A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction please help me out in fixing this
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
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 :(
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.
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!
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 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
@@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.
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).
@@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.
@@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 :)
@@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.
@@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 :)
@@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
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.
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
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
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.
I cannot get this to work and make a dev build at all. For iOS I get the error "{"message":"Not Authorized - No Token","url":"[GET] /downloads/v2/mapbox-common/releases/ios/packages/23.10.1/MapboxCommon.zip","auth":"","ua":"Amazon CloudFront"}" even though I've made sure that the secret access token is in the app.config and that it has the downloads read access. For Android, it just cannot find the package at all.
![Eminem - Fuel (feat. JID) [Official Lyric Video]](http://i.ytimg.com/vi/t5H_CewqpKA/mqdefault.jpg)
I really appreciate your help to teach me how to properly setup this lib with expo, you deserve your like and a subscription.
Thank you so much! I couldn't find anything else like this!
Great video, followed along almost flawlessly getting set up and built and developing in Android. Subscribed!
HUGE win!!!!! Saved me so much time here
This tutorial help me a lot.
Great content. Thank you for this. Much appreciated
Very useful video! Also looking forward to maybe seeing you on Turtle WoW ;D
Thank you so very much for this brilliant video!!!!
Thanks for sharing! Very helpful
Amazing! Thanks a lot bro
upload videos like that regularly
Wow, thank you so much. Really.
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?
Could You please make a tutorial video for the "@homee/react-native-mapbox-navigation" package also to use it with Expo EAS
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.
Hilariously, 5 min after I posted this I managed to get a point annotation working. No idea what changed!
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!
@@learnwithmapster I'm hyped... Patiently waiting already :)
@@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).
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
Can you make react native expo with mapbox Navigation App??
Why wouldn't this work for the Web?
Thank you for the awesome video
thank you for this helpfull video
can you please make a video on how to add turn by turn navigation
and thank you
OK! I'll put it on the list!
So you do not need to do expo prebuild to generate ios and android folder ? you just use eas ?
I can't seem to get this to work with expo 46 im so sad XD. maybe i need expo 47..
can you share with your github repository?
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.
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!
@@learnwithmapster same error dude and when i checked in the expo logs i am getting Task :rnmapbox_maps:compileDebugKotlin FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':rnmapbox_maps:compileDebugKotlin'.
> A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction
please help me out in fixing this
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? :)
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.
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
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 :(
For me the app crashes upon navigating to the screen with Mapbox in it. No errors are shown too :/
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.
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
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!
@@learnwithmapster the only difference was typescript, this time I initialize blank expo app without typescript and it worked !
@@amirabbasrezaei4055 Good job getting it working! I have found sometimes making new blank apps is a great way to double check.
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?
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
@@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
@@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.
can you push your code at github, i followed but it not working, please, help me...
Hi, what's not working?
@@learnwithmapster it notify too many error and i cant fix them :(((
Can you make a mapbox app without EAS? Only react native cli or expo cli
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).
@@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.
@@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 :)
@@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.
@@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 :)
Development build is one time pain to setup 😂
Can you also run this with Web as well?
Hi there, I don't totally understand the question! Working with Mapbox on web is much simpler than this :)
@@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
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.
I guess you have to build the project with EAS. Because the package requires native code to be able to work
Does this work with EAS Updates?
Hmm, I don't know for certain, but I don't see why it wouldn't?
hey, unfortunately you need a paid account developper to eas build on ios...
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
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
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.
I cannot get this to work and make a dev build at all.
For iOS I get the error "{"message":"Not Authorized - No Token","url":"[GET] /downloads/v2/mapbox-common/releases/ios/packages/23.10.1/MapboxCommon.zip","auth":"","ua":"Amazon CloudFront"}" even though I've made sure that the secret access token is in the app.config and that it has the downloads read access.
For Android, it just cannot find the package at all.
try giving the secret token every single permission, in case there's some other one it needs