How to use Geolocation, Geocoding and Reverse Geocoding in React Native Apps
Tags: reactnative, geolocation, geocoding
Published: 2020-03-27 00:23:11

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="09d9" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="9fdb" class="graf graf--p graf-after--figure">In this post, you will learn how to implement Geolocation React native apps. We will also learn how to Convert Geocode in Location address (Reverse Geocoding) and Location Address into Geocode(Geocoding) in a simple React native app.</p><p name="6987" class="graf graf--p graf-after--p">React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.</p><h3 name="01a7" class="graf graf--h3 graf-after--p">What Is React&nbsp;Native?</h3><p name="05ce" class="graf graf--p graf-after--h3 is-selected">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="7fee" class="graf graf--p graf-after--p">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="9d66" class="graf graf--p graf-after--p">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this blog, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some example: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.</p><h3 name="2fea" class="graf graf--h3 graf-after--p">What is Geolocation?</h3><p name="8825" class="graf graf--p graf-after--h3">The most famous and familiar location feature&#8202;—&#8202;Geolocation is the ability to track a device’s whereabouts using GPS, cell phone towers, WiFi access points or a combination of these. Since devices are used by individuals, geolocation uses positioning systems to track an individual’s whereabouts down to latitude and longitude coordinates, or more practically, a physical address. Both mobile and desktop devices can use geolocation.<br>Geolocation can be used to determine time zone and exact positioning coordinates, such as for tracking wildlife or cargo shipments.</p><p name="b122" class="graf graf--p graf-after--p">Some famous apps using Geolocation are</p><ul class="postList"><li name="43f4" class="graf graf--li graf-after--p">Uber / Lyft&#8202;—&#8202;Cab booking</li><li name="e8bd" class="graf graf--li graf-after--li">Google Maps (of course)&#8202;—&#8202;Map services</li><li name="90ff" class="graf graf--li graf-after--li">Swiggy / Zomato&#8202;—&#8202;Food delivery</li><li name="1801" class="graf graf--li graf-after--li">Fitbit&#8202;—&#8202;Fitness app</li><li name="fc18" class="graf graf--li graf-after--li">Instagram / Facebook&#8202;—&#8202;For tagging photos</li></ul><h3 name="116c" class="graf graf--h3 graf-after--li">What is Geocoding and Reverse geocoding?</h3><p name="d0ef" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Geocoding</strong> is the process of transforming a street address or other description of a location into a (latitude, longitude) coordinate.<br><strong class="markup--strong markup--p-strong">Reverse geocoding</strong> is the process of transforming a (latitude, longitude) coordinate into a (partial) address. The amount of detail in a reverse geocoded location description may vary, for example, one might contain the full street address of the closest building, while another might contain only a city name and postal code.</p><h3 name="8efb" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the anonymous login feature of Firebase. This is my break-down of the blog</p><p name="87e0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="6172" class="graf graf--li graf-after--p">Create a simple React Native app</li><li name="b6ab" class="graf graf--li graf-after--li">Install Plugins for Geocoding and Geolocation and get User Location</li><li name="7e09" class="graf graf--li graf-after--li">Get User Current Location (Geocoding)</li><li name="e24a" class="graf graf--li graf-after--li">Convert User Geolocation into an address (Reverse Geocoding)</li><li name="3666" class="graf graf--li graf-after--li">Convert User Entered Address into Geocode (Geocoding)</li></ol><p name="7e71" class="graf graf--p graf-after--li">We have three major objectives</p><ol class="postList"><li name="3785" class="graf graf--li graf-after--p">Get User Current Location which we will get in latitude and longitude (Geolocation)</li><li name="6f72" class="graf graf--li graf-after--li">Convert that latitude and longitude in Street Address (Reverse Geocoding)</li><li name="4686" class="graf graf--li graf-after--li">And again convert Street address entered by the user into latitude and longitude (Geocoding)</li></ol><p name="5a63" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Let’s dive right in!</strong></p><h3 name="c2ea" class="graf graf--h3 graf-after--p">Step 1:&#8202;—&#8202;Create a simple React Native&nbsp;app</h3><p name="4f40" class="graf graf--p graf-after--h3">If you are coming from a web background, the easiest way to get started with React Native is with Expo tools because they allow you to start a project without installing and configuring Xcode or Android Studio. Expo CLI sets up a development environment on your local machine and you can begin writing a React Native app within minutes. For instant development, you can use <a href="https://snack.expo.io/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Snack</a> to try React Native out directly in your web browser.</p><p name="f5b2" class="graf graf--p graf-after--p">If you are familiar with native development, you will likely want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.</p><p name="9e87" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Expo CLI Quickstart</strong></p><p name="68d5" class="graf graf--p graf-after--p">Assuming that you have <a href="https://nodejs.org/en/download/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Node 10+</a> installed, you can use npm to install the Expo CLI command-line utility:</p><pre name="f84b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install -g expo-cli</code></pre><p name="3ba3" class="graf graf--p graf-after--pre">Then run the following commands to create a new React Native project called “AwesomeProject”:</p><pre name="8f7d" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">expo init AwesomeProject<br>cd AwesomeProject<br>npm start # you can also use: expo start</code></pre><p name="fac8" class="graf graf--p graf-after--pre">This will start a development server for you.</p><p name="57f0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">React Native CLI Quickstart</strong></p><p name="14da" class="graf graf--p graf-after--p">Assuming that you have <a href="https://nodejs.org/en/download/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Node 10+</a> installed, you can use npm to install the React Native CLI command-line utility:</p><pre name="b08c" class="graf graf--pre graf-after--p">npm install -g react-native-cli</pre><p name="d19c" class="graf graf--p graf-after--pre">Then run the following commands to create a new React Native project called “AwesomeProject”:</p><pre name="7771" class="graf graf--pre graf-after--p">react-native init AwesomeProject</pre><blockquote name="4308" class="graf graf--blockquote graf-after--pre">For details you can check this <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">link</a>.</blockquote><h3 name="d9d1" class="graf graf--h3 graf-after--blockquote">Step 2&nbsp;:&#8202;—&#8202;Install Plugins for Geocoding and Geolocation and get User&nbsp;Location</h3><blockquote name="be8f" class="graf graf--blockquote graf-after--h3"><strong class="markup--strong markup--blockquote-strong">In Bare React Native Apps</strong></blockquote><h4 name="5241" class="graf graf--h4 graf-after--blockquote">react-native-geolocation-service</h4><p name="c3cd" class="graf graf--p graf-after--h4">This library is created in an attempt to fix the location timeout issue on android with the react-native’s current implementation of Geolocation API. This library tries to solve the issue by using Google Play Service’s new <code class="markup--code markup--p-code">FusedLocationProviderClient</code> API, which Google strongly recommends over android's default framework location API. It automatically decides which provider to use based on your request configuration and also prompts you to change the location mode if it doesn't satisfy your current request configuration.</p><blockquote name="4dc4" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">NOTE: Location request can still timeout since many android devices have GPS issue in the hardware level or in the system software level. Check the </em><a href="https://github.com/Agontuk/react-native-geolocation-service#faq"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">FAQ</em></a><em class="markup--em markup--blockquote-em"> for more details.</em></blockquote><h4 name="28f0" class="graf graf--h4 graf-after--blockquote">Installation</h4><p name="9912" class="graf graf--p graf-after--h4">yarn</p><pre name="0325" class="graf graf--pre graf-after--p">yarn add react-native-geolocation-service</pre><p name="c709" class="graf graf--p graf-after--pre">npm</p><pre name="eecd" class="graf graf--pre graf-after--p">npm install react-native-geolocation-service</pre><h4 name="701f" class="graf graf--h4 graf-after--pre">Setup</h4><h4 name="0d54" class="graf graf--h4 graf-after--h4">Android</h4><p name="a7ab" class="graf graf--p graf-after--h4">No additional setup is required for Android</p><h4 name="833a" class="graf graf--h4 graf-after--p">iOS</h4><p name="3b30" class="graf graf--p graf-after--h4">You need to include the <code class="markup--code markup--p-code">NSLocationWhenInUseUsageDescription</code> key in Info.plist to enable geolocation when using the app. In order to enable geolocation in the background, you need to include the <code class="markup--code markup--p-code">NSLocationAlwaysUsageDescription</code> key in Info.plist and add location as a background mode in the 'Capabilities' tab in Xcode.</p><ul class="postList"><li name="6f64" class="graf graf--li graf-after--p">Update your <code class="markup--code markup--li-code">Podfile</code></li></ul><pre name="c83a" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code">pod 'react-native-geolocation', path: '../node_modules/@react-native-community/geolocation'</code></pre><ul class="postList"><li name="478d" class="graf graf--li graf-after--pre">Then run <code class="markup--code markup--li-code">pod install</code> from ios directory</li></ul><blockquote name="d42b" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong">In EXPO </strong><a href="https://docs.expo.io/versions/latest/introduction/managed-vs-bare/#managed-workflow"  class="markup--anchor markup--blockquote-anchor" rel="noopener noreferrer noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">managed</strong></a><strong class="markup--strong markup--blockquote-strong"> apps,</strong></blockquote><p name="56cd" class="graf graf--p graf-after--blockquote">you’ll need to run</p><pre name="8d22" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">expo install expo-location</code></pre><h3 name="e28a" class="graf graf--h3 graf-after--pre">Step 3:&#8202;—&#8202;Get User Current Location (Geocoding)</h3><blockquote name="5439" class="graf graf--blockquote graf-after--h3"><strong class="markup--strong markup--blockquote-strong">In Bare React Native Apps,</strong></blockquote><p name="3d92" class="graf graf--p graf-after--blockquote">Since this library was meant to be a drop-in replacement for the RN’s Geolocation API, the usage is pretty straight forward, with some extra error cases to handle.</p><blockquote name="2f66" class="graf graf--blockquote graf-after--p">One thing to note, this library assumes that location permission is already granted by the user, so you have to use <code class="markup--code markup--blockquote-code">PermissionsAndroid</code> to request for permission before making the location request.</blockquote><p name="0307" class="graf graf--p graf-after--blockquote">For getting user location you have to import <code class="markup--code markup--p-code">Geolocation</code> API from <code class="markup--code markup--p-code">react-native-geolocation-service</code> package like this</p><pre name="d080" class="graf graf--pre graf-after--p">import Geolocation from 'react-native-geolocation-service';</pre><p name="7332" class="graf graf--p graf-after--pre">And add this function into your code</p><pre name="d55a" class="graf graf--pre graf-after--p">if (hasLocationPermission) {<br>        Geolocation.getCurrentPosition(<br>            (position) =&gt; {<br>                console.log(position);<br>            },<br>            (error) =&gt; {<br>                // See error code charts below.<br>                console.log(error.code, error.message);<br>            },<br>            { enableHighAccuracy: true, timeout: 15000, maximumAge:          10000 }<br>        );<br>    }</pre><p name="5565" class="graf graf--p graf-after--pre">So after adding all this code your file something look like this.</p><figure tabindex="0" contenteditable="false" name="b36e" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/3667251e86c2f5e085507f01db850c60.js %}</div></div></figure><blockquote name="75cb" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">In EXPO </strong><a href="https://docs.expo.io/versions/latest/introduction/managed-vs-bare/#managed-workflow"  class="markup--anchor markup--blockquote-anchor" rel="noopener noreferrer noopener noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">managed</strong></a><strong class="markup--strong markup--blockquote-strong"> apps,</strong></blockquote><p name="cb81" class="graf graf--p graf-after--blockquote">For getting user location you have to import <code class="markup--code markup--p-code">Location </code>API from <code class="markup--code markup--p-code">expo-location</code> package like this</p><pre name="885e" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import * as Location from 'expo-location';</code></pre><p name="6b6c" class="graf graf--p graf-after--pre">And add this function into your code</p><pre name="468e" class="graf graf--pre graf-after--p">_getLocationAsync = async () =&gt; {<br>    let { status } = await Permissions.askAsync(Permissions.LOCATION);<br>    if (status !== 'granted') {<br>      this.setState({<br>        errorMessage: 'Permission to access location was denied',<br>      });<br>    }<br>let location = await Location.getCurrentPositionAsync({});<br>    this.setState({ location });<br>  };</pre><p name="ae75" class="graf graf--p graf-after--pre">So after adding all this code your file something look like this.</p><blockquote name="7493" class="graf graf--blockquote graf-after--p">One thing to note, this library assumes that location permission is already granted by the user, so you have to use <code class="markup--code markup--blockquote-code">Permissions from ‘expo-permissions’</code> to request for permission before making the location request.</blockquote><figure tabindex="0" contenteditable="false" name="d0ed" class="graf graf--figure graf--iframe graf-after--blockquote is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/c2475ac4c3e0e2ebfa2a527220dc0237.js %}</div></div></figure><h3 name="ecfc" class="graf graf--h3 graf-after--figure">Step 4:&#8202;—&#8202;Convert User Geolocation into an address (Reverse Geocoding)</h3><blockquote name="885a" class="graf graf--blockquote graf-after--h3"><strong class="markup--strong markup--blockquote-strong">In Bare React Native Apps,</strong></blockquote><p name="aa99" class="graf graf--p graf-after--blockquote">In this app, we are using <code class="markup--code markup--p-code">react-native-geocoding</code> package for <strong class="markup--strong markup--p-strong">Geocoding</strong> and <strong class="markup--strong markup--p-strong">Reverse Geocoding</strong></p><h4 name="49ff" class="graf graf--h4 graf-after--p">react-native-geocoding</h4><p name="ffa3" class="graf graf--p graf-after--h4">A geocoding module for <a href="https://github.com/facebook/react-native"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native</a> to transform a description of a location (i.e. street address, town name, etc.) into geographic coordinates (i.e. latitude and longitude) and vice versa.</p><p name="6752" class="graf graf--p graf-after--p">This module uses the <a href="https://developers.google.com/maps/documentation/geocoding/intro"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">Google Maps Geocoding API</a> and requires an API key for purposes of quota management. Please check <a href="https://developers.google.com/maps/documentation/geocoding/get-api-key"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">this link</a> out to obtain your API key.</p><h4 name="4670" class="graf graf--h4 graf-after--p">Install</h4><pre name="c994" class="graf graf--pre graf-after--h4">npm install --save react-native-geocoding</pre><p name="e3e5" class="graf graf--p graf-after--pre">For Geocoding and Reverse Geocoding in your app you import <code class="markup--code markup--p-code">Geocoder</code> API from <code class="markup--code markup--p-code">react-native-geocoding</code> package like this</p><pre name="bda2" class="graf graf--pre graf-after--p">import Geocoder from 'react-native-geocoding';</pre><p name="55c0" class="graf graf--p graf-after--pre">And Then you have to initialize the module in your app(needs to be done only once)</p><pre name="0ad6" class="graf graf--pre graf-after--p">Geocoder.init("xxxxxxxxxxxxxxxxxxxxxxxxx"); // use a valid API key<br>// With more options<br>// Geocoder.init("xxxxxxxxxxxxxxxxxxxxxxxxx", {language : "en"}); // set the language</pre><p name="3ea6" class="graf graf--p graf-after--pre">And use this code respectively for Geocoding and reverse Geocoding</p><pre name="d822" class="graf graf--pre graf-after--p">Geocoder.from(41.89, 12.49)<br>		.then(json =&gt; {<br>        		var addressComponent = json.results[0].address_components[0];<br>			console.log(addressComponent);<br>		})<br>		.catch(error =&gt; console.warn(error));<br>// Works as well :<br>// ------------<br>// location object<br>Geocoder.from({<br>	latitude : 41.89,<br>	longitude : 12.49<br>});<br>// latlng object<br>Geocoder.from({<br>	lat : 41.89,<br>	lng : 12.49<br>});<br>// array<br>Geocoder.from([41.89, 12.49]);</pre><h4 name="56b9" class="graf graf--h4 graf-after--pre">Error Codes</h4><figure tabindex="0" contenteditable="false" name="a120" class="graf graf--figure graf--iframe graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0946e35577e883fb084a63282e9767ee.js %}</div></div></figure><blockquote name="ec65" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">In EXPO </strong><a href="https://docs.expo.io/versions/latest/introduction/managed-vs-bare/#managed-workflow"  class="markup--anchor markup--blockquote-anchor" rel="noopener noreferrer noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">managed</strong></a><strong class="markup--strong markup--blockquote-strong"> apps,</strong></blockquote><p name="e520" class="graf graf--p graf-after--blockquote">For geocoding of Address we are using <code class="markup--code markup--p-code">react-native-geocoding</code> so the installation and Initialize Steps are the same as Geolocation.</p><p name="4ac4" class="graf graf--p graf-after--p">we will use this code for Reverse Geocoding</p><pre name="9828" class="graf graf--pre graf-after--p">_attemptReverseGeocodeAsync = async () =&gt; {<br>    this.setState({ inProgress: true });<br>    try {<br>      let result = await Location.reverseGeocodeAsync(<br>        this.state.selectedExample<br>      );<br>      this.setState({ result });<br>    } catch (e) {<br>      this.setState({ error: e });<br>    } finally {<br>      this.setState({ inProgress: false });<br>    }<br>  };</pre><h3 name="1a9b" class="graf graf--h3 graf-after--pre">Step 5:&#8202;—&#8202;Convert User Entered Address into Geocode (Geocoding)</h3><p name="48a2" class="graf graf--p graf-after--h3">For Reverse geocoding of Address, we are using <code class="markup--code markup--p-code">expo-location</code> so the installation and Initialize Steps are the same as Reverse Geocoding.</p><p name="c2b7" class="graf graf--p graf-after--p">we will use this code for Geocoding</p><pre name="421f" class="graf graf--pre graf-after--p">Geocoder.from("Colosseum")<br>		.then(json =&gt; {<br>			var location = json.results[0].geometry.location;<br>			console.log(location);<br>		})<br>		.catch(error =&gt; console.warn(error));</pre><blockquote name="e4f0" class="graf graf--blockquote graf-after--pre"><strong class="markup--strong markup--blockquote-strong">In EXPO </strong><a href="https://docs.expo.io/versions/latest/introduction/managed-vs-bare/#managed-workflow"  class="markup--anchor markup--blockquote-anchor" rel="noopener noreferrer noopener noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">managed</strong></a><strong class="markup--strong markup--blockquote-strong"> apps,</strong></blockquote><p name="b32f" class="graf graf--p graf-after--blockquote">For geocoding of Address we are using <code class="markup--code markup--p-code">react-native-geocoding</code> so the installation and Initialize Steps are the same as Geolocation.</p><p name="52dc" class="graf graf--p graf-after--p">we will use this code for Geocoding</p><pre name="19c2" class="graf graf--pre graf-after--p">_attemptGeocodeAsync = async () =&gt; {<br>    this.setState({ inProgress: true, error: null });<br>    try {<br>      let result = await Location.geocodeAsync(this.state.selectedExample);<br>      this.setState({ result });<br>    } catch (e) {<br>      this.setState({ error: e.message });<br>    } finally {<br>      this.setState({ inProgress: false });<br>    }<br>  };</pre><p name="239e" class="graf graf--p graf-after--pre">Working Example of Geocode and Reverse Geocing in Your App</p><figure tabindex="0" contenteditable="false" name="d548" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/318c7d1a3f91904df6a459666bec4bda.js %}</div></div></figure><h3 name="b629" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="7b07" class="graf graf--p graf-after--h3 graf--trailing">In this blog, we learned how to implement Geolocation React Native app. We also learnt how to Convert Geocode in Location address(Reverse Geocoding) and Location Address into Geocode(Geocoding) in a simple React Native app.</p></div></div></section><section name="9f91" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="61c5" class="graf graf--h3 graf--leading">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about how to implement Geolocation&nbsp;, Geocoding and Reverse Geocoding React Native app, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React Native life cycle hooks</a></li><li name="bf8d" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image picker</a>| <a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Integrate Firebase</a></li><li name="8db9" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li><li name="44b0" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/firebase-push-notifications-in-react-native/81/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push notifications in React Native Apps</a></li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/720/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="c36a" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>