Your first React Native App with Expo

If you’re like me, a newbie to mobile app development but have experience developing with React, Expo is an excellent tool to get you on the road to building your first mobile application!

Expo is a set of tools that can get you writing a React Native app within minutes. It includes out of the box tools such as Android Studio/XCode configurations, certificate management with Apple & Google, and push notifications just to name a few. Additionally the team at Expo is incredibly responsive and can be easily reached via their forums or Slack channel. They even have a Canny for feature requests by the community.

If you’re hesitant to install any tools and dependancies you can try React Native directly in your web browser with Snack.

In this article I’ll be covering setting up your environments, installing dependencies, and writing some code to create your first mobile app! By the end you’ll have created an app that gathers the Geolocation of a user’s mobile phone, passes that longitude & latitude data to Open Weather’s API, and displays weather information in a single React Native component. Sounds pretty easy right? Well let’s get started!

SETUP

First let’s go grab your personal API key from Open Weather at https://openweathermap.org/api. I’d like to note that it takes at least 10 minutes for Open Weather API to activate the API key, which is why I suggest beginning with this step.

Next we’ll need to have the latest version of NodeJS installed. You can download it here.

Expo’s command line tool will also be required. You’ll run this tool locally to package, serve and publish your projects. Plus, who doesn’t love using the command line? Go ahead and open up your terminal use the following command:

npm install expo-cli — global

Great, now that you’ve got the Expo’s CLI tool installed, let’s initialize a new project in terminal, cd into its respective the folder, and finally start Expo.

expo init my-new-project

This will prompt you to chose the type of workflow you’d prefer in your terminal. For this particular project I used a managed workflow with a blank canvas. Next you’ll need to choose the name (the name of your app as it appears both within Expo and on your home screen as a standalone app)and slug (the friendly url name for publishing).

Once those choices have been made, let’s cd into our new project folder and start Expo.

cd my-new-project
npm start

This will automatically open up the devtools in your browser and start Expo’s Metro Bundler on a local port. If things are working correctly you should see something similar to this. Let’s go ahead and click Run on your preferred simulator.

Your terminal will sling up the logs for your project as you move along the coding process.

Finally, let’s open up another tab in your terminal and enter the command to open up your favorite source-code editor. I’m partial to VS Code so I use code .

Time to get coding!

You’ll notice in your simulator a welcome screen that asks you to open up App.js to start working on your app. Isn’t it comforting to see the similarities to plain old React? I’m personally quite comforted by this…

Defining a loading state:

The first thing we’ll focus on is to a create a state that will ultimately serve as our loading screen for when weather is being fetched. Go ahead and implement the isLoading state similar to the below.

Full Gist here

Next we’ll create a new folder named component and a file in it called weather.js. The code for weather conditions will be divided into two views, a header, and a body. The header will show the weather condition icon and temperature, and the body will display the text associated with the weather condition.

Weather.js will be a functional component. We’ll start by defining two containers inside the main container: headerContainer and bodyContainer. I usedMaterialCommunityIcons which comes with Expo as a sub-library of a mega library called vector-icons.

Full Gist here

Let’s Fetch Some Data

By now you’ve received your API key from OpenWeather. Let’s take a look at the type of info we get back from our API. My favorite free app to test API calls is Postman. I won’t be showing you how to use it in this article but if you’re already familiar with Postman go ahead and provide latitude, longitude, your unique API key and the unit of measurement you’d like to receive your data back in.

You should be receiving JSON that looks like this:

Glad to know the API GET request and key are working

Disclaimer — I’m won’t be going into detail to show you how to hide an API key, nor is the below, “best practice” when it comes to securing your unique API key. I’ve used Expo’s Constant.manifest feature to separate my key from my App.js file. You can learn more about here.

• We start by importing the API key in App.js.

import Constants from 'expo'
const KEY = Expo.Constants.manifest.extra.mysecret

• Create a fetchWeather function that provides longitude and latitude coordinates from our device’s location and fetches the data from the server returning a JSON object.

fetchWeather(lat, lon) {
  fetch(`http://api.openweathermap.org/data/2.5/weather?  
   lat=${lat}&lon=${lon}&APPID=${KEY}&units=imperial`)
  .then(res => res.json())
  .then(data => {
    this.setState({
      temperature: data.main.temp,
      weatherCondition: data.weather[0].main,
      isLoading: false
     });
   });
  }

• Use componentDidMount(), to help us re-render once our API is done fetching the data and updating state.

componentDidMount() {
  navigator.geolocation.getCurrentPosition(
    position => { 
      this.fetchWeather(position.coords.latitude,  
        position.coords.longitude);
      },
      error => {
        this.setState({
          error: 'Error Retrieving Weather Conditions'
        });
       }
     );
    }

• The JSON response contains lots of data we can use but let’s just focus on two things: the temperature, and the weatherCondition, which we will store in our local state defined in App.js.

state = {
  isLoading: true,
  temperature: 0,
  weatherCondition: null,
  error: null
}

• Now, we’ll pass the two values of our local state as props to the Weather Component.

<Weather weather={weatherCondition} temperature={temperature} />

• At this point App.js should resemble the below:

Full Gist here

• Now update props in Weather.js

Full Gist here

Now that we’re able to fetch real-time data, we need to make our Weather component behave dynamically based on the values being received. This entire dynamic behavior will be associated withweatherCondition.

Dynamic behavior

Using weatherCondition, we can define changes in our background, title, subtitle and weather icon. Let's start by pre-defining weather conditions in a new folder and file, ./utils/WeatherConditions.js.

Full Gist here.

These weather conditions are provided from the Open Weather API. Finally we’ll import this file in our Weather.jsand define PropTypes for the two props we’re receiving from App.js.

Full Gist here

Great job, you did it!

Now that we’ve got the boilerplate, feel free to play around with the styling to make it look more minimalistic or more fun, it’s up to you!

I’ve added a bit more info from the API and this entire application can be found at my Github Repo.