How does Uber always know the pickup location? Or how can Tinder find dates within a two-mile radius from you? It\u2019s simple \u2013 you allowed them to know your location.<\/p>\n
Location-based apps use customers\u2019 geolocations to function and control different features. From pizza delivery and taxi to Find My iPhone and telling the bus schedule, location-based applications have been helping us out with our everyday tasks.<\/p>\n
Location might be either the primary function, like in Uber, or auxiliary, like in Facebook \u2013 it always tells you when there is an upcoming event near you. Whether primary function or not, geolocation helps improve user experience.
\n![\"Develop](\"https:\/\/djangostars.com\/blog\/wp-content\/uploads\/2018\/12\/Img-1-1-2.png\")
\nIn this tutorial, our logistics software developers will tell you about the main components of location-based apps and how to develop one using the React Native geolocation service. First, we will study what React Native is and compare it to native app development. Then we will share approaches to gathering and displaying the location in an app. And finally, we will examine the design challenges and the ways to solve them.<\/p>\n
For over 16 years, Django Stars experts have been trusted to develop logistics software<\/a>, often leveraging React Native with Django to implement advanced location-based services. Check out our case studies<\/a> to learn more about the projects our specialists have been involved in. \n Build your cross-platform product faster. <\/p>\n <\/h3>\n\t\t Here is a brief description of React Native: it is an open-source JavaScript framework created by Facebook that allows developers to create cross-platform apps with native behavior. This is especially valuable for location based app development, since iOS and Android have different designs, buttons, and gestures. In the past, building such apps required creating two separate versions \u2014 a time-consuming process \u2014 but with React Native, a single codebase can deliver a seamless experience on both platforms.<\/p>\n This helps businesses offer their app to both iOS and Android users, which increases the potential customer base. In addition, it can reduce the cost of developing an application (for example taxi app development cost). React Native is a popular choice for new companies that cannot afford building two separate apps or are unsure whether their audience uses iOS or Android. Taking into account that the cross-platform market is likely to grow to $80 billion by 2020<\/a>, it makes perfect sense for many businesses to opt for React Native.<\/p>\n Now we are moving to the pros and cons of React Native. It is not an almighty and all-powerful framework, but there are definite cases when you should use it. However, there are a few reasons when you might not want to use React Native.<\/strong> In this part, we will tell you about the ways to gather and display the geolocation data in React Native. The choice usually depends on the specifics on the app being developed.<\/p>\n We will point out three ways to gather user location in React Native apps. This is a generic overview for you to understand the cases when to opt for each and differences between them.<\/p>\n There is a native JavaScript API<\/a> for detecting the geolocation of a device. It is simple to install and use, but there are some drawbacks \u2013 it works only when the app is running and does not give information about the location provider (3G, Wi-Fi, GPS).<\/p>\n It is a package that can specify the location of a device from 0 to 1000 meters (0.6 miles). Such precision requires higher battery consumption but on the other hand, you can configure how often to track the location. This package lets you integrate with SQLite so that you can store the recorded location data on the mobile device and then sync it to your database via HTTP.<\/p>\n Since it is a package, you need to maintain and update it regularly. Luckily, its creator offers support via Github. This package is free for iOS but costs $300 for Android for one app.<\/p>\n To solve the problem with the background tracking when using the native JavaScript API, you can write native code that will start a foreground service in a separate thread. That’s exactky what we did when developing our food delivery product Azyan<\/a>. Partly, we chose this way because React Native made it easy to bridge native code to React Native components.
\n\n \n\n <\/div>\n \n ![\"logo\"](\"https:\/\/djangostars.com\/blog\/wp-content\/themes\/ds-new-blog\/assets\/img\/ds-logo-white.svg\"){kind=logo}
\n \n\t\t\tReact Native<\/u> development.\t\t\t
\n Learn how<\/a>\n <\/div>\n\t\t <\/div>\n<\/div>\n<\/p>\nTools For Location-Based Service Development: Native vs. React Native<\/h2>\n
\nReact Native Pros<\/strong><\/p>\n\n
\nThey include:<\/p>\n\n
![\"speaking](\"https:\/\/djangostars.com\/blog\/wp-content\/uploads\/2018\/12\/Img-2-2-2.png\")
<\/p>\nHow to Gather and Display User Location in React Native<\/h2>\n
Gathering location data<\/h3>\n
Use React Native API<\/h4>\n
react-native-background-geolocation<\/h4>\n
import { NativeModules, DeviceEventEmitter, PermissionsAndroid } from 'react-native'\r\nimport Config from 'react-native-config'\r\nimport get from 'lodash\/get'\r\nconst { GeoLocation } = NativeModules\r\nclass BackgroundGeoLocation {\r\n constructor(token, user_id) {\r\n this.state = null\r\n }\r\n start(dispatch, nextState) {\r\n this.dispatch = dispatch\r\n const token = get(nextState, 'session.data.token')\r\n const user_id = get(nextState, 'user.data.user_id')\r\n const id = get(nextState, 'user.data.id')\r\n this.state = {\r\n user_id,\r\n token,\r\n }\r\n return PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION)\r\n .then(is_granted => is_granted === PermissionsAndroid.RESULTS.GRANTED\r\n ? is_granted\r\n : PermissionsAndroid.requestMultiple([\r\n PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,\r\n PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,\r\n ])\r\n )\r\n .then(_ => PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION))\r\n .then(is_granted => is_granted === PermissionsAndroid.RESULTS.GRANTED ? true : new Error())\r\n .then(_ => setTimeout(() => GeoLocation.startService(token, user_id, id, `${Config.API_URL}\/live\/car-tracking\/gps-pos\/`), 300))\r\n .catch(e => console.log(e))\r\n }\r\n stop() {\r\n return GeoLocation.stopService()\r\n .then(_ => console.log(_))\r\n }\r\n handleLocationChange(geo) {\r\n console.log(geo)\r\n }\r\n}\r\nexport default BackgroundGeoLocation\r\n<\/code><\/pre>\nBridge native code to JavaScript API<\/h4>\n
\n\n <\/div>\n \n \n The speedy and reliable food\ndelivery service. <\/div>\n \n\n \n <\/div>\n