I want to build a mobile app called **Walkwaves** for exploring the city. When I walk around [London](https://hackernoon.com/tagged/london), I want the app to tell me what interesting buildings or monuments are nearby.London is such a historic city, I think it would be a really fun way to explore it. Ideally, I’d like to just have the app running in the background and tell me (via text to speech) when I’m near an interesting place.I’m writing this series of tutorials to show how I’m building this app and hopefully along the way, I can help you learn some React Native. I’m myself [learning](https://hackernoon.com/tagged/learning) it as I build.I already know React, so the tutorials assume some basic knowledge of React.The whole app is quite complex, so I’m splitting it into many tutorials. In this first tutorial we’re just going to build a simple app which can take a set of location co-ordinates (latitude, longitude) and convert them into a human understandable address or place name.

**This is what we’re going to build in this tutorial:**

![](https://hackernoon.com/hn-images/0*uH1moeKq0_-JOAiE.gif)

**Geocoding app in React Native**

Let’s go!

**Resources**

The full code is on Github — [**https://github.com/learnetto/walkwaves**](https://github.com/learnetto/walkwaves)

What I used to learn everything in this tutorial:

[The Official React Native documentation](https://facebook.github.io/react-native/docs/getting-started)

[React Native Elements documentation](https://react-native-training.github.io/react-native-elements/docs/0.19.1/getting_started.html)

[The OpenCage API documentation](https://opencagedata.com/api)

**Step 1: Setup**

First, let’s get setup. Make sure you have [Node](https://nodejs.org/) installed.

The official docs say that [Expo](https://expo.io/) is the easiest way to get started, so that’s what I’m going to do.

Install the Expo CLI command line utility:

#Run this on the command line npm install -g expo-cli

At the time of writing this tutorial, the latest React Native version of 0.57.

**Step 2: Initialise a new app**

Next, let’s create our new app Walkwaves (you can call yours whatever you want!):

#Run this on the command line expo init Walkwaves ? **Choose a template:** (Use arrow keys) ❯ **blank** The Blank project template includes the minimum dependencies to run and an empty root component. **tabs** The Tab Navigation project template includes several example screens.

Choose the blank template.

**Step 3: Start the development server**

Then cd into the directory and start the development server.

#Run this on the command line 

cd Walkwaves  
expo start

This will output something like this on the terminal:

![](https://hackernoon.com/hn-images/0*jZp0NZmfyWYa0yHu.png)

**Expo development server starting**

**Step 4: Run the app on your phone or a simulator**

Using one of the methods shown above, launch the app. I’m running it on an iPhone XS by scanning the QR code with the camera app which prompts you to open it in the [**Expo iPhone app**](https://itunes.apple.com/gb/app/expo-client/id982107779?mt=8). This is what it looks like:

![](https://hackernoon.com/hn-images/0*zXjVNxaZEJpNWyac.png)

[**Default React Native app screen**](https://learnetto-blog.s3.amazonaws.com/blog/2018-10-13/1539464080674-rn_init_screen.png)This is what the code directory structure and App.js looks like:

![](https://hackernoon.com/hn-images/0*T6M8e01t6MnjGDdG.png)

[**App.js**](https://learnetto-blog.s3.amazonaws.com/blog/2018-10-13/1539444672273-rn_init.png)

If you know any React, this will look very familiar to you. We import some components from the react and react-native libraries and then define the App component.

**App** is a simple React component which renders some text on the screen, using the [**Text**](https://facebook.github.io/react-native/docs/text) component (which is like a paragraph <p> in HTML) inside the [**View**](https://facebook.github.io/react-native/docs/view) component (which is like a div).

**Step 5: Add a form for entering co-ordinates and geocoding them**

We want a text field where we can type in the latitude and longitude, a button to trigger the geocoding (the technical term for conversion to an address), and a Text component to display the result. Of course, our goal is to display it all on a map, but this is just a very simplified first step towards that.

We’ll need to import the [**TextInput**](https://facebook.github.io/react-native/docs/textinput) and [**Button**](https://facebook.github.io/react-native/docs/button) components and change the App component as follows:

//App.js  
  
import { StyleSheet, Text, View, **TextInput, Button** } from 'react-native';  
  
export default class App extends React.Component {  
  render() {  
    return (  
      **<View style={styles.container}>  
        <Text>Walkwaves</Text>  
        <TextInput />  
        <Button title='Geocode' />  
        <Text>Human understandable address</Text>  
      </View>**    );  
  }  
}

And now the app looks like this:

![](https://hackernoon.com/hn-images/0*wFq6lUAiNMZi49xd.png)

**Unstyled screen for geocoding**

That doesn’t look great, does it? It can do with some styling.

**Step 6: Style the components**

We can style the default components directly but I found that it’s not straightforward. For example, I wasted a lot of time trying to add a background colour to the Button, which is not directly supported (in the current version 0.57).

The [**React Native Elements**](https://react-native-training.github.io/react-native-elements/) library looks nice and provides easy ways to style elements, so I’m going to use that.

Let’s add the library to our app:

#Run this on the command line

yarn add react-native-elements

Now let’s replace the default components with components from this library and add some styles:

//App.js  
  
import React from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
**import { Button, FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'  
**  
export default class App extends React.Component {  
  render() {  
    return (  
      <View style={styles.container}>  
        **<Text style={styles.title}>Walkwaves</Text>  
        <FormLabel style={{padding: 20}}>Enter Co-ordinates (latitude, longitude)</FormLabel>  
        <FormInput containerStyle={styles.input} />  
        <Button title='Geocode'  
          buttonStyle={styles.button}  
          color='#FFFFFF'  
        />  
        <Text style={styles.result}>Human understandable address</Text>**      </View>  
    );  
  }  
}  
  
const styles = StyleSheet.create({  
  container: {  
    **marginTop: 100,**    alignItems: 'center',  
    justifyContent: 'center',  
  },  
  **title: {  
    fontSize: 30,  
  },  
  input: {  
    borderColor: 'gray',  
    borderWidth: 1,  
    marginBottom: 20,  
    width: '80%',  
  },  
  button: {  
    backgroundColor: '#1E88E5',  
    width: 200,  
  },  
  result: {  
    padding: 10,  
  }**});

This looks much better:

![](https://hackernoon.com/hn-images/0*70qgY7roo9knqi5H.PNG)

[**Styled screen**](https://learnetto-blog.s3.amazonaws.com/blog/2018-10-19/1539989557694-walkwaves_styled_screen.PNG)

We can tap on the input field and enter text. Let’s store the entered input value in state so that we can use it later.Let’s add a constructor to the component and initialise the state with a value for the co-ordinates:

//App.js  
  
export default class App extends React.Component {  
  **constructor(props) {  
    super(props);  
    this.state = {  
      coords: '',  
      address: ''  
    };  
  }**

We also initialise a value for the result of the conversion, called address.

Let’s make sure the co-ordinates in state get updated when we type in the input box by setting the **onChangeText** prop on FormInput:

//App.js  
  
        <FormInput containerStyle={styles.input}  
          **onChangeText={(coords) => this.setState({coords})} />**

Let’s also replace the text “_Human understandable address_” to use the value of the geocoded address from state:

//App.js  
  
        <Button title='Geocode'  
          buttonStyle={styles.button}  
          color='#FFFFFF'  
        />  
        **<Text style={styles.result}>{this.state.address}</Text>**

Ok, now the we have a place to store the input and output values. But when we press the button, nothing happens yet…So, now for the fun part!

**Step 7: Add geocoding**

I’m going to use the [**OpenCage Data API**](https://opencagedata.com/) for geocoding the co-ordinates. To be more precise, it’s reverse geocoding when you go from co-ordinates to addresses, and geocoding when it’s the other way around.

OpenCage provides a very easy to use API and they have a generous free plan.

You can [**sign up here and get your API key**](https://opencagedata.com/users/sign_up).

Let’s add the [**opencage-api-client**](https://github.com/tsamaya/opencage-api-client) library to our app:

#Run this on the command line

yarn add opencage-api-client

> **_NOTE_**_: At this step, I started getting a strange error from the fetch library (which is a dependency of opencage-api-client), saying “_requiring module fetch which threw an exception…_”. The error goes away when I run the app in remote debug mode._ [**_See this discussion_**](https://github.com/facebook/react-native/issues/9599) _for some more workarounds. If you find a more elegant solution, please let me know._

Now, we need to trigger the geocoding when the button is pressed. We can do that by assigning a function — let’s call it **reverseGeocode** — to the onPress prop of the Button component:

//App.js  
  
        <Button title='Geocode'  
          buttonStyle={styles.button}  
          color='#FFFFFF'  
          **onPress={this.reverseGeocode}**        />

Now, let’s import the library in App.js and define the function:

//App.js  
  
**import opencage from 'opencage-api-client';**  
  
export default class App extends React.Component {  
  ...  
  **reverseGeocode = () => {  
    const key = 'YOUR\_API\_KEY';  
    opencage.geocode({ key, q: this.state.coords }).then(response => {  
      result = response.results\[0\];  
      this.setState({address: result.formatted});  
    });  
  }**

Let’s try it out now:

![](https://hackernoon.com/hn-images/0*zTGP6NRR1nvlkMWJ.gif)

**Without button loading animation**

It works! It can take a couple of seconds to make the API call to Opencage, get the result and then display it. It would be nice to have some visual feedback when the geocoding is going on.

**Step 8: Add loading animation to the Button**

The Button component has a handy prop called _loading_, using which we can display different text based on whether the button action is loading or not.

Let’s first add another property to the state called geocoding, which will take a boolean value to indicate if geocoding is going on. We’re initialise it as false:

//App.js  
  
  constructor(props) {  
    super(props);  
    this.state = {  
      coords: '31.79261,35.21785',  
      address: '',  
      **geocoding: false**    };  
  }

Now let’s use it in _reverseGeocode_ to set it to true before the API call and it back to false once the geocoding is done:

//App.js

reverseGeocode = () => {  
 const key = 'YOUR\_API\_KEY';  
 **this.setState({geocoding: true});**  
 opencage.geocode({ key, q: this.state.coords }).then(response =>  {  
      result = response.results\[0\];  
      console.log(result.formatted);  
      **this.setState({address: result.formatted, geocoding: false});**    });  
 }

Now let’s use it in the Button component to set the value of the loading prop and also to conditionally change the button text:

//App.js  
  
        <Button  
          **loading={this.state.geocoding}**          buttonStyle={{backgroundColor: "blue"}}  
          onPress={this.reverseGeocode}  
          **title={this.state.geocoding ? "Geocoding..." : "Geocode"}**          color="#ffffff"  
        />

![](https://hackernoon.com/hn-images/0*oqaZtE44f1_PyEFG.gif)

**With button loading animation**

Alright, so that’s part 1 all done. You can find the [**full code here**](https://github.com/learnetto/walkwaves).

Remember you’ll need an [**Opencage API key**](https://opencagedata.com/api) to follow the tutorial.

In Part 2, we’ll add a map view, use the GPS to get the current location and geocode it.

Make sure to [sign up on Learnetto](https://learnetto.com/tutorials/how-to-build-a-location-based-app-in-react-native-part-1) to get all the tutorials in this series for free.

_Originally published at_ [_learnetto.com_](https://learnetto.com/tutorials/how-to-build-a-location-based-app-in-react-native-part-1)_._

Apple

Facebook

Fetch

Super

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to build a location based app in React Native — Part 1

Too Long; Didn't Read

Companies Mentioned

@hrishio

RELATED STORIES