Connecting to Third Party API

Since Shoutem apps are plain React Native apps, you can connect to any API. It’s very simple to do networking in React Native. Basically, React Native enables you to use Fetch API out of the box, a simple interface for communicating with API endpoints. If, however, you need something more sophisticated, you can use Async Actions in Redux.

In this tutorial we’ll explain how to build a simple React Native app fetching the photo of the day from NASA’s APOD API. We’ll also use the Shoutem UI toolkit. Here’s how the completed app should look:

The complete code for this extension is available in our GitHub repository.

Initialize the Extension

Shoutem apps are made of extensions, so start by creating a new extension.

$ shoutem init nasa
Enter information about your extension. Press `return` to accept (default) values.

Title: NASA
Version: 0.0.1
Description: Photo of the day from Nasa
...
Extension initialized!

Switch over to the extension’s folder:

$ cd nasa

Create a new starting screen and shortcut:

$ shoutem screen add PhotoDay --shortcut Photo
Enter shorcut information:
Title: Nasa Photo

Screen `PhotoDay` is created in file `app/screens/PhotoDay.js`!
Shortcut `Photo` is created!
Shortcut `Photo` opens `PhotoDay` screen.
File `app/extension.js` was modified.
File `extension.json` was modified.

Push the extension to Shoutem:

$ shoutem push
Uploading `NASA` extension to Shoutem...
Success!

Install that extension to a new app. You can do this through the Builder or directly through the CLI:

$ shoutem install --new NasaApp
Installing `NASA` extension to the new app...
Extension successfully installed to the new app. Check it here:
https://builder.shoutem.com/app/8074

Once this is done, go to the Builder and add the screen inside the app. Now you can preview the app:

Fetch the Photo

Now let’s fetch the photo into the screen. We’ll use the Fetch API from JavaScript. This is the complete code from app/screens/PhotoDay.js

#file app/screens/PhotoDay.js

import React, {
  Component
} from 'react';

import {
  Screen,
  View,
  Image,
  Spinner,
  Tile,
  Title,
  Subtitle
} from '@shoutem/ui';

// public API, you can get yours on: https://api.nasa.gov
const apiKey = 'NNKOjkoul8n1CH18TWA9gwngW1s1SmjESPjNoUFo';

// NASA photo API url
var photoUrl = "https://api.nasa.gov/planetary/apod";


export default class PhotoDay extends Component {
  state = {
    photo: null
  }

  componentDidMount() {
    fetch(photoUrl + '?api_key=' + apiKey, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
      .then((response) => response.json())
      .then((photo => {
        this.setState({ photo });
      }));
  }

  render() {
    const { photo } = this.state;
    // render Spinner is photo is not fetched
    const content = photo ?
    (
      <Image
        styleName="large-portrait"
        source={{ uri: photo.url }}
      >
        <Tile>
          <Title>{photo.title}</Title>
          <Subtitle>{photo.copyright}</Subtitle>
        </Tile>
      </Image>
    ) : <Spinner />;

    return (
      <Screen>
        <View styleName="flexible vertical v-center">
          {content}
        </View>
      </Screen>
    );
  }
}

Push the changed extension to Shoutem:

$ shoutem push
Uploading `NASA` extension to Shoutem...
Success!

Preview it to see the changes. This is the final result: