Native Shopify Mobile App with 20 new features
Kickstart your hyperlocal marketplace in Corona pandemic with a starter guide
Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 22.214.171.124 release ready!
Owner and Founder. Opencart
In this blog, we will learn about how to implement map view, add markers and draw navigation route between two markers.
Well, React Native is one of the best platforms for mobile application development.
But the official documents do not provide any way to integrate the maps/directions/navigation in your application.
Integrating this simple, but procedural, please follow through the lines written along
So, without wasting further time, let’s get started.
Now, you need to do some manual changes in your android and ios directories respectively.
Let’s Start with the Android configuration first.
In your project level build.gradle file (path to this file: android –> build.gradle )
In your module level build.gradle file (path to this file: android–> app–>build.gradle)
Now you need to add Your Google Map API key in your AndroidManifest.xml file
Setup your Podfile (found at ios/Podfile as below, replacing all references to _YOUR_PROJECT_TARGET_ with your project target (it’s the same as project name by default).
Then run in the ios folder
If you want to enable Google Maps on iOS, obtain the Google API key and edit your AppDelegate.m as follows:
The [GMSServices provideAPIKey] should be the first call of the method.
Then, do either of the following
Re-run npm install or yarn to ensure the postinstall script is run.
After following the initial configuration steps, the rest of the implementation is quite simple.
Suppose the name of your Component is MyAppRouteComponent then your file would be something like below :
Hope This helps you.
For Map Related further Troubleshooting, Please do read more details over here
Keep coding and Keep Sharing
References : https://github.com/react-native-community/react-native-maps
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
But using Expo as well, the usage would be the same.
Expo, should not cause you any issues as far as the implementation mentioned above is related.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.