Connecting to 3rd party API

As 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 API. We’ll also use 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

As Shoutem apps are made of extensions, start by creating 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!

Locate to extension:

$ cd nasa

Create a new starting screen (screen created with 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 extension to Shoutem:

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

Install that extension to 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 inside the Builder and add the screen inside the app. Now you can preview the app:

Fetch the photo

Now let’s fetch the photo in 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=
      >
        <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 changes to Shoutem:

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

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