![\"Geolocation](\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/04\/Map-Illustration.jpg\")
<\/figure><\/div>\n\n\n\nLet\u2019s begin our publication with the core points related to frontend development. So, using React Native is opening the case.<\/p>\n\n\n\n
Track current location<\/h2>\n\n\n\nSetup<\/h3>\n\n\n\n
Before enabling geolocation tracking in the application, you should remember that the final product is targeted at both cohorts of mobile device users. We\u2019ll look at Apple first. A location request access for Android devices is implemented through adding The React Native Geolocation API extends the Geolocation web specs and is available globally through the There is the Once the latest location information is available, the In order to display maps, the react-native-maps package<\/a> was used. Although this solution is imperfect due to multiple bugs and lack of documentation to cope with them, it provides a set of features we need to display information on maps. Moreover, it works on both iOS and Android at the same time.<\/p>\n\n\n\n We used a default setup where both mobile operating systems render their own maps: Apple Maps on iOS and Google Maps on Android.<\/p>\n\n\n\n The A complete API description of The The list of places to render on the map pass as props to this component (it comes from the redux state but we skipped this part here).<\/p>\n\n\n\n Another component provided by react-native-maps is called
In order to enable geolocation tracking on iOS, you need to include NSLocationWhenInUseUsageDescription<\/code> key in Info.plist<\/code><\/p>\n\n\n\nNSLocationWhenInUseUsageDescription\nThe reason why your app want to use location goes gere\n<\/pre>\n\n\n\n
AndroidManifest.xml<\/code> to your application:<\/p>\n\n\n\n <\/pre>\n\n\n\n
React Native Geolocation API<\/h3>\n\n\n\n
navigator.geolocation<\/code>.<\/p>\n\n\n\ngetCurrentPosition<\/code> function that helps access current position:<\/p>\n\n\n\nGeolocation.getCurrentPosition(success, [error], [options]);\n<\/pre>\n\n\n\n
success<\/code> callback is invoked. However, the we decided to make a small wrapper function that returns Promise<\/code> and hides callbacks logic inside, so that it could be easily chained with other asynchronous actions:<\/p>\n\n\n\ngetCurrentPosition() {\n return new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(\n ({coords}) => resolve({\n latitude: coords.latitude, longitude: coords.longitude\n }),\n reject,\n {enableHighAccuracy: false, timeout: 5000, maximumAge: 1000}\n )\n })\n}\n<\/pre>\n\n\n\nUsing react-native-maps<\/h2>\n\n\n\n
Render map<\/h3>\n\n\n\n
MapView<\/code> component is built to show maps on the device. It provides a react-like API for declaratively controlling features. All features on maps including Markers, Polygons, etc. should be specified as children of this component. Have a look at the following example use:<\/p>\n\n\n\n \n\n<\/pre>\n\n\n\n
showsUserLocation<\/code> property is used to show natively user location.<\/li>initialRegion<\/code> displays the initial region on the map.<\/li>style<\/code> is basically set to be positioned absolute and fill the entire screen.<\/li><\/ul>\n\n\n\nMapView<\/code> component can be found in the following documentation<\/a>.<\/p>\n\n\n\nRender Markers on the map<\/h3>\n\n\n\n
PlacesMarkers<\/code> is a React Native component implemented in our application to render place markers on the map. Its functionality is as:<\/p>\n\n\n\nrender() {\n const {places} = this.props\n\n if (!places.length) return null\n\n return (\n \n {\n places.map(place => {\n return (\n \n )\n })\n }\n \n )\n}\n<\/pre>\n\n\n\nMapView.Marker<\/code>. It renders markers on the map and provides a set of features described in the documentation<\/a>. Of all them, we used the following ones:<\/p>\n\n\n\n